🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Front
NextJs
01-설치

설치

시스템 요구 사항:

  • Node 18.17 이상
  • macOS, Windows(WSL 포함) 및 Linux 지원

1. 자동 설치

모든 것을 자동으로 설정되어 있는 create-next-app 사용하여 새 Next.js 앱을 시작하는 것이 좋습니다. 프로젝트를 만들려면 다음을 실행합니다.

Terminal
1
npx create-next-app@latest

설치 시 다음과 같은 프롬프트가 표시됩니다:

Terminal
1
What is your project named? my-app

2
Would you like to use TypeScript? No / Yes

3
Would you like to use ESLint? No / Yes

4
Would you like to use Tailwind CSS? No / Yes

5
Would you like to use `src/` directory? No / Yes

6
Would you like to use App Router? (recommended) No / Yes

7
Would you like to customize the default import alias (@/*)? No / Yes

8
What import alias would you like configured? @/*

프롬프트가 나타나면, create-next-app에서 프로젝트 이름을 가진 폴더를 만들고 필요한 종속성을 설치합니다.

알아 둘만 한:

  • 이제 Next.js는 기본적으로 TypeScript, ESLint 및 Tailwind CSS 구성과 함께 제공됩니다.
  • 선택적으로 프로젝트 루트의 src 디렉토리 을 클릭하여 응용 프로그램의 코드를 구성 파일과 분리할 수 있습니다.

2. 수동 설치

새 Next.js 앱을 수동으로 만들려면 필요한 패키지를 설치합니다.

Terminal
1
npm install next@latest react@latest react-dom@latest

package.json 파일을 열고 다음 스크립트를 추가합니다:

package.json
1
{

2
  "scripts": {

3
    "dev": "next dev",

4
    "build": "next build",

5
    "start": "next start",

6
    "lint": "next lint"

7
  }

8
}

다음 스크립트는 응용 프로그램을 개발하는 여러 단계를 의미합니다:

  • dev : next dev를 실행하여 Next.js를 개발 모드로 시작한다.
  • build : next build를 실행하여 프로덕션 사용을 위한 애플리케이션을 빌드한다.
  • start : Next.js 프로덕션 서버를 시작하기 위해 next start을 실행합니다.
  • lint : Next.js의 내장 ESLint 구성을 설정하기 위해 next lint를 실행합니다.

2.1 디렉터리 만들기

Next.js는 파일 시스템 라우팅을 사용하는데, 이는 파일을 구조화하는 방법에 따라 응용프로그램의 경로가 결정된다는 것을 의미한다.

2.1.1 app 디렉터리

새로운 애플리케이션의 경우 App Router를 사용하는 것이 좋다. App 라우터를 사용하면 React의 최신 기능을 사용할 수 있으며, 커뮤니티 피드백을 기반으로 한 Pages 라우터의 진화시킨 것입니다.

app/를 만든 다음, layout.tsx와 page.tsx 파일을 추가한다. 이 파일들은 사용자가 당신의 애플리케이션(/)의 루트를 방문할 때 렌더링된다.

app 디렉토리

필요한 <html> 및 <body> 태그를 사용하여, app/layout.tsx 내부에 루트 레이아웃을 만든다:

app/layout.tsx
1
export default function RootLayout({ children }: { children: React.ReactNode }) {

2
  return (

3
    <html lang="en">

4
      <body>{children}</body>

5
    </html>

6
  )

7
}

마지막으로 다음과 같은 초기 콘텐츠를 사용하여 홈페이지 app/page.tsx를 만든다:

app/page.tsx
1
export default function Page() {

2
  return <h1>Hello, Next.js!</h1>

3
}

알아 둘만 한(Good to know)

layout.tsx를 만드는 것을 잊어버린다면, Next.js는 next dev와 함께 개발 서버를 실행할 때, 자동으로 이 파일을 만든다.

App Router 사용에 대해 자세히 알아보세요.

2.1.2 page 디렉터리(옵션)

App Router 대신 Pages Router를 사용하는 경우, 프로젝트의 루트에 page/디렉토리를 작성할 수 있다.

그런 다음, 페이지 폴더 안에 index.tsx 파일을 추가합니다. 이것이 당신의 홈페이지(/)가 될 것이다:

pages/index.tsx
1
export default function Page() {

2
  return <h1>Hello, Next.js!</h1>

3
}

그 다음, pages/안에 _app.tsx 파일을 추가하여, 글로벌 레이아웃을 정의한다. 사용자 지정 앱 파일에 대해 자세히 알아보세요.

pages/_app.tsx
1
import type { AppProps } from 'next/app'

2


3
export default function App({ Component, pageProps }: AppProps) {

4
  return <Component {...pageProps} />

5
}

마지막으로, (서버의 초기 응답을 제어하기 위해) pages/ 내부에 _document.tsx 파일을 추가한다. 사용자 정의 Document 파일에 대해 자세히 알아보십시오.

pages/_document.tsx
1
import { Html, Head, Main, NextScript } from 'next/document'

2


3
export default function Document() {

4
  return (

5
    <Html>

6
      <Head />

7
      <body>

8
        <Main />

9
        <NextScript />

10
      </body>

11
    </Html>

12
  )

13
}

Pages 라우터 사용에 대해 자세히 알아보세요.

알아 둘만한

동일한 프로젝트에서 두 라우터를 모두 사용할 수 있지만 app 내 경로는 pages보다 우선된다. 혼란을 피하기 위해 새 프로젝트에서 하나의 라우터만 사용하는 것이 좋다.

2.1.3 public 폴더(옵션)

이미지, 폰트 등과 같은 정적 자산을 저장할 public 폴더를 생성합니다. 그런 다음 공용 디렉터리 내부의 파일을 기본 URL(/)에서 시작하여 코드로 참조할 수 있습니다.

3. 개발 서버 실행

  1. npm run dev를 실행하여 개발 서버를 시작합니다.
  2. http://localhost:3000을 방문하여 애플리케이션을 확인하십시오.
  3. app/page.tsx(또는 pages/index.tsx) 파일을 편집하고 저장하면, 브라우저에서 업데이트된 결과를 볼 수 있습니다.
00-Next.js 기타 기능02-프로젝트 구조