專案結構與組織
本頁面提供 Next.js 中所有資料夾與檔案慣例的概述，以及組織專案的建議。
資料夾與檔案慣例
頂層資料夾
頂層資料夾用於組織應用程式的程式碼與靜態資源。
頂層檔案
頂層檔案用於配置應用程式、管理依賴項、執行中介軟體、整合監控工具以及定義環境變數。
| Next.js | |
next.config.js | Next.js 設定檔 |
package.json | 專案依賴項與腳本 |
instrumentation.ts | OpenTelemetry 與 Instrumentation 檔案 |
middleware.ts | Next.js 請求中介軟體 |
.env | 環境變數 |
.env.local | 本地環境變數 |
.env.production | 生產環境變數 |
.env.development | 開發環境變數 |
.eslintrc.json | ESLint 設定檔 |
.gitignore | Git 忽略檔案與資料夾 |
next-env.d.ts | Next.js 的 TypeScript 宣告檔案 |
tsconfig.json | TypeScript 設定檔 |
jsconfig.json | JavaScript 設定檔 |
檔案慣例
_app | .js .jsx .tsx | 自訂 App |
_document | .js .jsx .tsx | 自訂 Document |
_error | .js .jsx .tsx | 自訂錯誤頁面 |
404 | .js .jsx .tsx | 404 錯誤頁面 |
500 | .js .jsx .tsx | 500 錯誤頁面 |
路由
| 資料夾慣例 | ||
index | .js .jsx .tsx | 首頁 |
folder/index | .js .jsx .tsx | 巢狀頁面 |
| 檔案慣例 | ||
index | .js .jsx .tsx | 首頁 |
file | .js .jsx .tsx | 巢狀頁面 |
動態路由
| 資料夾慣例 | ||
[folder]/index | .js .jsx .tsx | 動態路由區段 |
[...folder]/index | .js .jsx .tsx | 全捕捉路由區段 |
[[...folder]]/index | .js .jsx .tsx | 可選全捕捉路由區段 |
| 檔案慣例 | ||
[file] | .js .jsx .tsx | 動態路由區段 |
[...file] | .js .jsx .tsx | 全捕捉路由區段 |
[[...file]] | .js .jsx .tsx | 可選全捕捉路由區段 |