create-next-app

開始使用 Next.js 最簡單的方式是使用 create-next-app。這個 CLI 工具能讓您快速開始建構新的 Next.js 應用程式，所有設定都已為您準備好。

您可以使用預設的 Next.js 範本建立新應用程式，或是使用官方 Next.js 範例其中之一。

互動式建立

您可以透過執行以下指令以互動方式建立新專案：

終端機

npx create-next-app@latest

終端機

yarn create next-app

終端機

pnpm create next-app

終端機

bunx create-next-app

接著系統會詢問以下問題：

終端機

您的專案名稱是什麼？ my-app
是否要使用 TypeScript？ 否 / 是
是否要使用 ESLint？ 否 / 是
是否要使用 Tailwind CSS？ 否 / 是
是否要使用 `src/` 目錄？ 否 / 是
是否要使用 App 路由？（推薦） 否 / 是
是否要自訂預設的導入別名 (@/*)？ 否 / 是

回答完問題後，系統將根據您的回答建立一個配置正確的新專案。

非互動式建立

您也可以透過傳遞命令列參數來非互動式地建立新專案。

此外，您可以在預設選項前加上 --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/` 目錄內初始化。

  --import-alias <要配置的別名>

    指定要使用的導入別名（預設 "@/*"）。

  --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 重置所有儲存的偏好設定

  -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 相同的整合測試套件進行測試，確保每個版本都能如預期運作。

互動式建立

非互動式建立

為何使用 Create Next App？

On this page