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 本身相同的整合測試套件進行測試,確保它在每次發行時都能正常運作。
這有幫助嗎?