Next.js 專案結構 (Next.js Project Structure)
此頁面概述 Next.js 應用程式的專案結構。它涵蓋了頂層檔案和資料夾、設定檔，以及 `app` 和 `pages` 目錄中的路由慣例。(This page provides an overview of the project structure of a Next.js application. It covers top-level files and folders, configuration files, and routing conventions within the app and pages directories.)
點擊檔案和資料夾名稱以進一步了解每個慣例。(Click the file and folder names to learn more about each convention.)
頂層資料夾
頂層資料夾用於組織應用程式的程式碼和靜態資源。(Top-level folders are used to organize your application's code and static assets.)
app (應用程式) | App Router (應用程式路由器) |
pages (頁面) | Pages Router (頁面路由器) |
public (公開) | 要提供的靜態資源 (Static assets to be served) |
src (程式碼) | 選用的應用程式程式碼資料夾 (Optional application source folder) |
頂層檔案
頂層檔案用於設定應用程式、管理依賴項、執行中介軟體、整合監控工具和定義環境變數。(Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.)
| Next.js (Next.js) | |
next.config.js (next.config.js) | Next.js 的設定檔 (Configuration file for Next.js) |
package.json (package.json) | 專案依賴項和指令碼 (Project dependencies and scripts) |
instrumentation.ts (instrumentation.ts) | OpenTelemetry 和 Instrumentation 檔案 (OpenTelemetry and Instrumentation file) |
middleware.ts (middleware.ts) | Next.js 請求中介軟體 (Next.js request middleware) |
.env (.env) | 環境變數 (Environment variables) |
.env.local (.env.local) | 本地環境變數 (Local environment variables) |
.env.production (.env.production) | 生產環境變數 (Production environment variables) |
.env.development (.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 | 佈局 |
page | .js .jsx .tsx | 頁面 |
loading | .js .jsx .tsx | 載入中 UI |
not-found | .js .jsx .tsx | 找不到頁面 UI |
error | .js .jsx .tsx | 錯誤 UI |
global-error | .js .jsx .tsx | 全域錯誤 UI |
route | .js .ts | API 端點 |
template | .js .jsx .tsx | 重新渲染的佈局 |
default | .js .jsx .tsx | 平行路由後備頁面 |
巢狀路由
folder | 路由區段 |
folder/folder | 巢狀路由區段 |