Next.js 專案結構
本頁提供 Next.js 應用程式的專案結構概覽，涵蓋頂層檔案與資料夾、設定檔，以及 app 和 pages 目錄中的路由慣例。
點擊檔案與資料夾名稱以深入了解各項慣例。
頂層資料夾
頂層資料夾用於組織應用程式的程式碼與靜態資源。
頂層檔案
頂層檔案用於設定應用程式、管理依賴項、執行中介軟體、整合監控工具，以及定義環境變數。
| 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 路由慣例
以下檔案慣例用於在 app 路由器 中定義路由與處理元資料。
路由檔案
layout | .js .jsx .tsx | 版面配置 (Layout) |
page | .js .jsx .tsx | 頁面 (Page) |
loading | .js .jsx .tsx | 載入 UI (Loading UI) |
not-found | .js .jsx .tsx | 找不到頁面 UI (Not found UI) |
error | .js .jsx .tsx | 錯誤 UI (Error UI) |
global-error | .js .jsx .tsx | 全域錯誤 UI (Global error UI) |
route | .js .ts | API 端點 (API endpoint) |
template | .js .jsx .tsx | 重新渲染的版面配置 |
default | .js .jsx .tsx | 平行路由後備頁面 |
巢狀路由
folder | 路由區段 (Route segment) |
folder/folder | 巢狀路由區段 (Nested route segment) |
動態路由
[folder] | 動態路由區段 (Dynamic route segment) |
[...folder] | 全捕捉路由區段 (Catch-all route segment) |
[[...folder]] | 可選全捕捉路由區段 (Optional catch-all route segment) |
路由群組與私有資料夾
平行與攔截路由
@folder | 命名插槽 (Named slot) |
(.)folder | 攔截同層級路由 |
(..)folder | 攔截上一層級路由 |
(..)(..)folder | 攔截上兩層級路由 |
(...)folder | 從根層級攔截路由 |
元資料檔案慣例
應用圖示
favicon | .ico | 網站圖示檔案 (Favicon) |
icon | .ico .jpg .jpeg .png .svg | 應用圖示檔案 |
icon | .js .ts .tsx | 生成的應用圖示 |
apple-icon | .jpg .jpeg, .png | Apple 應用圖示檔案 |
apple-icon | .js .ts .tsx | 生成的 Apple 應用圖示 |
Open Graph 與 Twitter 圖片
opengraph-image | .jpg .jpeg .png .gif | Open Graph 圖片檔案 |
opengraph-image | .js .ts .tsx | 生成的 Open Graph 圖片 |
twitter-image | .jpg .jpeg .png .gif | Twitter 圖片檔案 |
twitter-image | .js .ts .tsx | 生成的 Twitter 圖片 |
SEO
pages 路由慣例
以下檔案慣例用於在 pages 路由器 中定義路由。
特殊檔案
_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 | 動態路由區段 (Dynamic route segment) |
[...folder]/index | .js .jsx .tsx | 全捕捉路由區段 (Catch-all route segment) |
[[...folder]]/index | .js .jsx .tsx | 可選全捕捉路由區段 (Optional catch-all route segment) |
| 檔案慣例 | ||
[file] | .js .jsx .tsx | 動態路由區段 (Dynamic route segment) |
[...file] | .js .jsx .tsx | 全捕捉路由區段 (Catch-all route segment) |
[[...file]] | .js .jsx .tsx | 可選全捕捉路由區段 (Optional catch-all route segment) |