建立 2026-09-16 更新 2026-09-16

安裝與專案結構

Next.js 官方提供 create-next-app 鷹架工具，一個指令就能建立好一個設定齊全的專案。這一頁說明安裝需求、建立專案時的選項，以及專案裡每個資料夾、檔案的用途，讓你在動手改程式碼之前先看懂全貌。

安裝需求

Node.js 18.18 以上（建議使用長期支援版）。
macOS、Windows、Linux 皆可；本機需要能執行 npm、pnpm 或 yarn 任一套件管理工具。
編輯器建議使用 VS Code，官方對 TypeScript 與 Next.js 的支援最完整。

建立專案

npx create-next-app@latest my-app

執行後會依序詢問幾個問題，決定專案的預設設定：

問題	建議選擇	說明
TypeScript？	是	型別檢查能提早抓到錯誤，官方文件範例也以 TypeScript 為主。
ESLint？	是	內建 Next.js 專用規則，及早抓出常見寫法問題。
Tailwind CSS？	依需求	想直接用 utility class 寫樣式就選是，詳見樣式設計。
`src/` 目錄？	依喜好	選是的話原始碼會放在 `src/app`，讓專案根目錄更乾淨。
App Router？	是	本站教學以 App Router 為主，務必選是（而不是舊版 Pages Router）。
自訂 import alias？	依喜好	預設 `@/*` 已經很好用，通常直接接受即可。

建立完成後進入專案並啟動開發伺服器：

cd my-app
npm run dev

瀏覽器開啟 http://localhost:3000，看到 Next.js 歡迎畫面就代表安裝成功。

專案結構

以下是選擇 App Router、src/ 目錄後的典型結構：

my-app/
├── src/
│   └── app/
│       ├── layout.tsx      # 根 Layout，所有頁面共用的外框
│       ├── page.tsx        # 首頁（對應網址 /）
│       ├── globals.css     # 全域樣式
│       └── favicon.ico
├── public/                 # 靜態檔案，原樣提供，例如 /logo.png
├── next.config.ts          # Next.js 設定檔
├── package.json
└── tsconfig.json

重點說明：

app/ 資料夾　路徑結構即網址結構，細節見 App Router 基礎。
public/ 資料夾　放圖片、字型等靜態資源，檔案會直接對應到網址根目錄，例如 public/logo.png 可用 /logo.png 存取。
next.config.ts　調整圖片網域、redirect、環境變數暴露範圍等專案層級設定。
package.json　除了套件清單，也定義了下方會用到的指令。

常用指令

npm run dev     # 啟動開發伺服器，支援熱更新
npm run build   # 產出正式環境的最佳化版本
npm run start   # 以正式環境模式啟動（需先 build）
npm run lint    # 執行 ESLint 檢查

開發階段幾乎只會用到 npm run dev；build 與 start 通常留到部署上線時才需要手動確認。

下一步

專案建立好之後，接著了解 Next.js 最核心的機制：檔案系統路由。請看路由與導覽。