跳到內容
頁面路由器API 參考建立下一個應用程式

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

然後系統會詢問你以下提示

終端機
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 to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

回答提示後,會根據你的回答建立新的專案,並採用正確的設定。

非互動式

你也可以傳遞命令列參數來非互動式地設定新的專案。

此外,你可以透過在預設選項前加上 --no- 來否定它們(例如 --no-eslint)。

請參閱 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.
 
  --import-alias <alias-to-configure>
 
    Specify import alias to use (default "@/*").
 
  --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
 
  -h, --help                           output usage information

為什麼要使用 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 本身相同的整合測試套件進行測試,確保它在每次發行時都能正常運作。