Next.js 시작하기

자동 설정

1. 설치

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

 

타입스크립트 사용시

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

 

설치시 대화형으로 설치가 진행되며, 비대화형으로 설치하기 위해 option을 추가할 수 있다.

create-next-app <project-directory> [options]

Options:
  -V, --version                      output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --js, --javascript

    Initialize as a JavaScript project.

  --eslint

    Initialize with eslint config.

  --no-eslint

    Initialize without eslint config.

  --experimental-app

    Initialize as a `app/` directory project.

  --use-npm

    Explicitly tell the CLI to bootstrap the app using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the app using pnpm

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a GitHub URL. The URL can use
    any branch and/or subdirectory

  --example-path <path-to-example>

    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar

 

수동 설정

1. 설치

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

 

2. package.json 파일 안에 scripts 설정

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

 

3. pages와 public 폴더 생성

 

scripts 설명

1. dev: 개발모드로 Next.js 실행
2. build: 프로덕션을 위해 어플리케이션 빌드
3. start: 프로덕션 서버를 시작
4. lint: Next.js 내장 ESLint 구성 설정

 

출처

1. https://nextjs.org/docs/getting-started

2. https://nextjs.org/docs/api-reference/create-next-app