Skip to main content

项目结构

本页概述了 Next.js 项目的文件和文件夹结构. 内容包括顶层文件和文件夹, 配置文件, app 目录和 pages 目录的路由约定.

Top-level folders (顶层文件夹)

文件夹名	简述
app	App router
pages	Pages Router
public	静态资源
src	可选的应用程序源文件夹

Top-level files (顶层文件)

文件名	简述
next.config.js	Next.js 的配置文件
package.json	项目依赖和脚本
instrument.ts	OpenTelemetry and Instrumentation file
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` Routing Conventions (app Routing 协定)

Routing Files (路由文件)

文件名	后缀名	简述
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` \| `.jsx`	API 接口
template	`.js` \| `.jsx` \| `.tsx`	预渲染布局
default	`.js` \| `.jsx` \| `.tsx`	并行路由的 fallback page(应变页面)

Nested Routes (嵌套路由)

文件名	简述
folder	路由片段
folder/folder	嵌套的路由片段

Dynamic Routes (动态路由)

文件名	简述
[folder]	动态路由片段
[...folder]	捕获所有的路由段
[[...folder]]	选择性的捕获所有的路由段

Routes Groups and Private Folders (路由组和私有文件夹)

文件名	简述
(folder)	不影响路由的路由组
_folder	可选的文件夹, 所有的子文件/文件夹都被路由排除在外

Parallel and Intercepted Routes (平行路由和拦截路由)

文件名	简述
@folder	命名插槽
(.)folder	拦截同一水平路由
(..)folder	拦截上一级路由
(..)(..)folder	拦截上两级路由
(...)folder	由根路由开始拦截

Metadata File Convention (元文件协定)

App Icons (应用图标)

文件名	后缀名	简述
favicon	`.ico`	Favicon 文件
icon	`.ico` \| `.jpg` \| `.jpeg` \| `.png` \| `.svg`	App Icon 文件
icon	`.js` \| `.ts` \| `.tsx`	生成的 App Icon 文件
apple-icon	`.jpg` \| `.jpeg` \| `.png`	Apple App
apple-icon	`.js` \| `.ts` \| `.tsx`	生成的 Apple App Icon 文件

Open Graph and Twitter Images

文件名	后缀名	简述
opengraph-image	`.jpg` \| `.jpeg` \| `.png` \| `.gif`	Open Graph image file
opengraph-image	`.js` \| `.ts` \| `.tsx`	Generated Open Graph image
twitter-image	`.jpg` \| `.jpeg` \| `.png` \| `.gif`	Twitter 图片文件
twitter-image	`.js` \| `.ts` \| `.tsx`	生成的 Twitter 图片

SEO

文件名	后缀名	简述
sitemap	`.xml`	Sitemap file
sitemap	`.js` \| `.ts`	Generated Sitemap
robots	`.txt`	Robots file
robots	`.js` \| `.ts`	Generated Robots file

`pages` Routing Convention (pages Router 协定)

Special Files (特殊文件)

文件名	后缀名	简述
_app	`.js` \| `.ts` \| `.tsx`	自定义的 App 文件
_document	`.js` \| `.ts` \| `.tsx`	自定义的 Document 文件
_error	`.js` \| `.ts` \| `.tsx`	自定义的, 错误出现时页面
404	`.js` \| `.ts` \| `.tsx`	404 错误出现时的页面
500	`.js` \| `.ts` \| `.tsx`	500 错误出现时的页面

Routes (路由)

Folder convention (文件夹方式)

文件/文件夹名	后缀名	简述
index	`.js` \| `.ts` \| `.tsx`	主页
folder/index	`.js` \| `.ts` \| `.tsx`	嵌套页面

File convention(文件方式)

文件/文件夹名	后缀名	简述
index	`.js` \| `.ts` \| `.tsx`	主页
file	`.js` \| `.ts` \| `.tsx`	嵌套页面

Dynamic Routes (动态路由)

Folder convention (文件夹方式)

文件/文件夹	后缀名	简述
[folder]/index	`.js` \| `.ts` \| `.tsx`	动态路由片段
[...folder]/index	`.js` \| `.ts` \| `.tsx`	捕获所有的路由片段
[[...folder]]/index	`.js` \| `.ts` \| `.tsx`	可选的, 捕获所有的路由片段

File convention (文件方式)

文件/文件夹	后缀名	简述
[file]	`.js` \| `.ts` \| `.tsx`	动态路由片段
[...file]	`.js` \| `.ts` \| `.tsx`	捕获所有的路由片段
[[...file]]	`.js` \| `.ts` \| `.tsx`	可选的, 捕获所有的路由片段

Top-level folders (顶层文件夹)
Top-level files (顶层文件)
app Routing Conventions (app Routing 协定)
pages Routing Convention (pages Router 协定)