create-next-app
create-next-app CLI 允许您使用默认模板或来自公共 GitHub 仓库的示例创建新的 Next.js 应用程序。这是开始使用 Next.js 最简单的方式。
基本用法
终端
npx create-next-app@latest [project-name] [options]参考
以下选项可用
| 选项 | 描述 |
|---|---|
-h 或 --help | 显示所有可用选项 |
-v 或 --version | 输出版本号 |
--no-* | 否定默认选项。例如：--no-ts |
--ts 或 --typescript | 初始化为 TypeScript 项目（默认） |
--js 或 --javascript | 初始化为 JavaScript 项目 |
--tailwind | 使用 Tailwind CSS 配置进行初始化（默认） |
--react-compiler | 初始化并启用 React 编译器 |
--eslint | 使用 ESLint 配置进行初始化 |
--biome | 使用 Biome 配置进行初始化 |
--no-linter | 跳过 linter 配置 |
--app | 初始化为 App Router 项目 |
--api | 仅使用路由处理程序初始化项目 |
--src-dir | 在 src/ 目录中初始化 |
--turbopack | 强制在生成的 package.json 中启用 Turbopack（默认启用） |
--webpack | 强制在生成的 package.json 中启用 Webpack |
--import-alias <alias-to-configure> | 指定要使用的导入别名（默认 "@/*"） |
--empty | 初始化一个空项目 |
--use-npm | 明确告知 CLI 使用 npm 启动应用程序 |
--use-pnpm | 明确告知 CLI 使用 pnpm 启动应用程序 |
--use-yarn | 明确告知 CLI 使用 Yarn 启动应用程序 |
--use-bun | 明确告知 CLI 使用 Bun 启动应用程序 |
-e 或 --example [名称] [github-url] | 用于启动应用程序的示例 |
--example-path <示例路径> | 单独指定示例的路径 |
--reset-preferences | 明确告知 CLI 重置所有存储的偏好设置 |
--skip-install | 明确告知 CLI 跳过安装软件包 |
--disable-git | 明确告知 CLI 禁用 Git 初始化 |
--yes | 对所有选项使用以前的偏好设置或默认值 |
示例
使用默认模板
要使用默认模板创建新应用程序，请在您的终端中运行以下命令
终端
npx create-next-app@latest安装时，您将看到以下提示
终端
What is your project named? my-app
Would you like to use the recommended Next.js defaults?
Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
No, reuse previous settings
No, customize settings - Choose your own preferences如果您选择 customize settings（自定义设置），您将看到以下提示
终端
Would you like to use TypeScript? No / Yes
Which linter would you like to use? ESLint / Biome / None
Would you like to use React Compiler? 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? (recommended) No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*在回答提示后，create-next-app 将创建一个包含您的项目名称的文件夹并安装所需的依赖项。
Linter 选项
ESLint：传统且最流行的 JavaScript linter。包含来自 @next/eslint-plugin-next 的 Next.js 特定规则。
Biome：一款快速、现代的 linter 和格式化工具，结合了 ESLint 和 Prettier 的功能。包含内置的 Next.js 和 React 领域支持，以获得最佳性能。
无：完全跳过 linter 配置。您可以稍后随时添加 linter。
一旦您回答了提示，一个新项目将使用您选择的配置创建。
使用官方 Next.js 示例
要使用官方 Next.js 示例创建新应用程序，请使用 --example 标志。例如
终端
npx create-next-app@latest --example [example-name] [your-project-name]您可以在 Next.js 仓库中查看所有可用示例以及设置说明。
使用任何公共 GitHub 示例
要使用任何公共 GitHub 示例创建新应用程序，请将 --example 选项与 GitHub 仓库的 URL 一起使用。例如
终端
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]这有帮助吗？