create-next-app

Next.js를 시작하는 가장 쉬운 방법은 create-next-app을 사용하는 것입니다. 이 CLI 도구를 사용하면 모든 설정이 완료된 상태에서 새 Next.js 애플리케이션을 빠르게 구축할 수 있습니다.

기본 Next.js 템플릿을 사용하여 새 앱을 만들거나 공식 Next.js 예제 (opens in a new tab)를 사용할 수 있습니다.

Interactive

다음 명령어를 실행하여 대화형으로 새 프로젝트를 만들 수 있습니다:

Terminal

npx create-next-app@latest

Terminal

yarn create next-app

Terminal

pnpm create next-app

Terminal

bun create next-app

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

Terminal

What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like your code inside a `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)?  No / Yes

프롬프트에 응답하면 답변에 따라 올바르게 구성된 새 프로젝트가 생성됩니다.

Non-interactive

명령줄 인수를 전달하여 비대화형으로 새 프로젝트를 설정할 수도 있습니다.

기본 옵션을 부정하려면 옵션 앞에 --no-를 붙이면 됩니다 (예: --no-eslint).

create-next-app --help를 참조하십시오:

Terminal

Usage: 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.
 
  --tailwind
 
    Initialize with Tailwind CSS config. (default)
 
  --eslint
 
    Initialize with ESLint config.
 
  --app
 
    Initialize as an App Router project.
 
  --src-dir
 
    Initialize inside a `src/` directory.
 
  --turbo
 
    Enable Turbopack by default for development.
 
  --import-alias <alias-to-configure>
 
    Specify import alias to use (default "@/*").
 
  --empty
 
    Initialize an empty 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
 
  --use-yarn
 
    Explicitly tell the CLI to bootstrap the app using Yarn
 
  --use-bun
 
    Explicitly tell the CLI to bootstrap the app using Bun
 
  -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 public 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
 
  --reset-preferences
 
    Explicitly tell the CLI to reset any stored preferences
 
  --skip-install
 
    Explicitly tell the CLI to skip installing packages
 
  -h, --help                           output usage information

Why use Create Next App?

create-next-app을 사용하면 몇 초 만에 새로운 Next.js 앱을 만들 수 있습니다. Next.js 제작자에 의해 공식적으로 유지 관리되며, 다음과 같은 여러 이점이 있습니다:

대화형 경험: 인수를 사용하지 않고 npx create-next-app@latest를 실행하면 프로젝트 설정을 안내하는 대화형 경험이 시작됩니다.
의존성 없음: 프로젝트 초기화는 1초만에 완료될 수 있습니다. Create Next App에는 의존성이 없습니다.
오프라인 지원: Create Next App은 오프라인 상태를 자동으로 감지하고 로컬 패키지 캐시를 사용하여 프로젝트를 초기화합니다.
예제 지원: Create Next App은 Next.js 예제 모음에서 예제를 사용하여 애플리케이션을 부트스트랩하거나(예: npx create-next-app --example api-routes) 공개 GitHub 리포지토리를 사용할 수 있습니다.
테스트됨: 이 패키지는 Next.js 모노레포의 일부이며, Next.js 자체와 동일한 통합 테스트 스위트를 사용하여 테스트되어 매 릴리스마다 예상대로 작동하는지 확인됩니다.

webVitalsAttribution Edge Runtime