Menu

create-next-app

使用 create-next-app 是开始使用 Next.js 最简单的方法。这个命令行工具可以让你快速开始构建一个新的 Next.js 应用，所有配置都已为你设置好。

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

交互式

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

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

然后你将被问到以下问题：

终端
What is your project named? (你的项目名称是什么？) my-app
Would you like to use TypeScript? (你想使用 TypeScript 吗？) No / Yes
Would you like to use ESLint? (你想使用 ESLint 吗？) No / Yes
Would you like to use Tailwind CSS? (你想使用 Tailwind CSS 吗？) No / Yes
Would you like your code inside a `src/` directory? (你想将代码放在 `src/` 目录中吗？) No / Yes
Would you like to use App Router? (recommended) (你想使用 App 路由吗？（推荐）) No / Yes
Would you like to use Turbopack for `next dev`? (你想在 `next dev` 中使用 Turbopack 吗？) No / Yes
Would you like to customize the import alias (`@/*` by default)? (你想自定义导入别名吗？（默认为 `@/*`）) No / Yes

一旦你回答了这些问题，一个新项目将会根据你的回答进行正确的配置创建。

非交互式

你也可以通过传递命令行参数来非交互式地设置一个新项目。

此外，你可以通过在选项前加上 --no- 前缀来否定默认选项 (例如 --no-eslint)。

查看 create-next-app --help：

终端
用法: create-next-app [项目目录] [选项]
 
选项:
  -V, --version                        输出版本号
  --ts, --typescript
 
    初始化为 TypeScript 项目。(默认)
 
  --js, --javascript
 
    初始化为 JavaScript 项目。
 
  --tailwind
 
    初始化时包含 Tailwind CSS 配置。(默认)
 
  --eslint
 
    初始化时包含 ESLint 配置。
 
  --app
 
    初始化为 App 路由项目。
 
  --src-dir
 
    在 `src/` 目录内初始化。
 
  --turbo
 
    默认为开发环境启用 Turbopack。
 
  --import-alias <要配置的别名>
 
    指定要使用的导入别名 (默认为 "@/*")。
 
  --empty
 
    初始化一个空项目。
 
  --use-npm
 
    明确告诉 CLI 使用 npm 引导应用
 
  --use-pnpm
 
    明确告诉 CLI 使用 pnpm 引导应用
 
  --use-yarn
 
    明确告诉 CLI 使用 Yarn 引导应用
 
  --use-bun
 
    明确告诉 CLI 使用 Bun 引导应用
 
  -e, --example [名称]|[github-url]
 
    用于引导应用的示例。你可以使用官方 Next.js 仓库中的示例名称
    或公共 GitHub URL。URL 可以使用任何分支和/或子目录
 
  --example-path <示例路径>
 
    在极少数情况下，你的 GitHub URL 可能包含带斜杠的分支名
    (例如 bug/fix-1) 和示例路径 (例如 foo/bar)。
    在这种情况下，你必须单独指定示例路径：
    --example-path foo/bar
 
  --reset-preferences
 
    明确告诉 CLI 重置任何存储的偏好设置
 
  --skip-install
 
    明确告诉 CLI 跳过安装包
 
  -h, --help                           输出使用信息

为什么使用 Create Next App？

create-next-app 允许你在几秒钟内创建一个新的 Next.js 应用。它由 Next.js 的创建者官方维护，并包含许多好处：

  • 交互式体验：运行 npx create-next-app@latest (不带参数) 会启动一个交互式体验，指导你设置项目。
  • 零依赖：初始化项目只需一秒钟。Create Next App 没有任何依赖。
  • 离线支持：Create Next App 会自动检测你是否离线，并使用你的本地包缓存引导你的项目。
  • 支持示例：Create Next App 可以使用 Next.js 示例集合中的示例 (例如 npx create-next-app --example api-routes) 或任何公共 GitHub 仓库来引导你的应用。
  • 经过测试：该包是 Next.js 单一仓库的一部分，并使用与 Next.js 本身相同的集成测试套件进行测试，确保每次发布都能按预期工作。