介紹/開始使用/專案結構

Next.js 專案結構

本頁提供 Next.js 專案的檔案與資料夾結構概覽，涵蓋頂層檔案與資料夾、設定檔，以及 app 和 pages 目錄中的路由慣例。

頂層資料夾


`app`	應用路由 (App Router)
`pages`	頁面路由 (Pages Router)
`public`	靜態資源檔案
`src`	可選的應用程式原始碼資料夾

頂層檔案


Next.js
`next.config.js`	Next.js 設定檔
`package.json`	專案依賴套件與腳本
`instrumentation.ts`	OpenTelemetry 與監測檔案
`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` 路由慣例

路由檔案


`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`	巢狀路由區段

動態路由


`[folder]`	動態路由區段
`[...folder]`	全捕捉路由區段
`[[...folder]]`	可選全捕捉路由區段

路由群組與私有資料夾


`(folder)`	不影響路由的群組路由
`_folder`	將資料夾及其子區段排除在路由外

平行與攔截路由


`@folder`	命名插槽
`(.)folder`	攔截同層級路由
`(..)folder`	攔截上一層級路由
`(..)(..)folder`	攔截上兩層級路由
`(...)folder`	從根目錄攔截路由

後設資料檔案慣例

應用圖示


`favicon`	`.ico`	網站圖示檔案
`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


`sitemap`	`.xml`	網站地圖檔案
`sitemap`	`.js` `.ts`	生成的網站地圖
`robots`	`.txt`	Robots 檔案
`robots`	`.js` `.ts`	生成的 Robots 檔案

`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`	動態路由區段
`[...folder]/index`	`.js` `.jsx` `.tsx`	全捕捉路由區段
`[[...folder]]/index`	`.js` `.jsx` `.tsx`	可選全捕捉路由區段
檔案慣例
`[file]`	`.js` `.jsx` `.tsx`	動態路由區段
`[...file]`	`.js` `.jsx` `.tsx`	全捕捉路由區段
`[[...file]]`	`.js` `.jsx` `.tsx`	可選全捕捉路由區段

安裝

使用 `create-next-app` 建立新的 Next.js 應用程式。設定 TypeScript、樣式並配置您的 `next.config.js` 檔案。

構建你的應用程式

學習如何使用 Next.js 功能來構建你的應用程式。