跳到內容
API 參考CLIcreate-next-app

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]