Skip to main content

create-next-app

开始使用 Next.js 的最简单方法是使用 create-next-app。该 CLI 工具使你能够快速开始构建新的 Next.js 应用，并为你做好一切设置。

¥The easiest way to get started with Next.js is by using create-next-app. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you.

你可以使用默认的 Next.js 模板或使用 官方 Next.js 示例.js 模板之一创建新应用。

¥You can create a new app using the default Next.js template, or by using one of the official Next.js examples.

交互的​

¥Interactive

你可以通过运行以下命令以交互方式创建新项目：

¥You can create a new project interactively by running:

npx create-next-app@latest
yarn create next-app
pnpm create next-app
bun create next-app

然后系统会询问你以下提示：

¥You will then be asked the following prompts:

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

回答完提示后，将根据你的答案使用正确的配置创建一个新项目。

¥Once you've answered the prompts, a new project will be created with the correct configuration depending on your answers.

非交互式​

¥Non-interactive

你还可以传递命令行参数以非交互方式设置新项目。

¥You can also pass command line arguments to set up a new project non-interactively.

此外，你可以通过在默认选项前添加 --no-（例如 --no-eslint）来否定默认选项。

¥Further, you can negate default options by prefixing them with --no- (e.g. --no-eslint).

参见 create-next-app --help：

¥See create-next-app --help:

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 的创建者正式维护，并具有许多优点：

¥create-next-app allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:

  • 互动体验：运行 npx create-next-app@latest（不带参数）会启动交互式体验，指导你完成项目设置。

    ¥Interactive Experience: Running npx create-next-app@latest (with no arguments) launches an interactive experience that guides you through setting up a project.

  • 零依赖：初始化项目仅需一秒。创建下一个应用具有零依赖。

    ¥Zero Dependencies: Initializing a project is as quick as one second. Create Next App has zero dependencies.

  • 离线支持：创建下一个应用将自动检测你是否离线并使用本地包缓存引导你的项目。

    ¥Offline Support: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.

  • 支持示例：创建 Next App 可以使用 Next.js 示例集合（例如 npx create-next-app --example api-routes）或任何公共 GitHub 存储库中的示例来引导你的应用。

    ¥Support for Examples: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. npx create-next-app --example api-routes) or any public GitHub repository.

  • 测试：该包是 Next.js monorepo 的一部分，并使用与 Next.js 本身相同的集成测试套件进行测试，确保它在每个版本中都能按预期工作。

    ¥Tested: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.