Skip to main content

Next.js工程结构

此页面概述了 Next.js 项目的文件和文件夹结构。 它涵盖了apppages目录中的顶级文件和文件夹配置文件以及路由约定

顶级文件夹

app应用路由器
pages页面路由器
public提供服务的公共静态资产
src可选的应用程序源文件目录

顶级文件

next.config.jsNext.js 的配置文件
package.json项目依赖和脚本
instrumentation.tsOpenTelemetry 和 Instrumentation 文件
middleware.tsNext.js 请求中间件
.env环境变量
.env.local本地环境变量
.env.production生产环境变量
.env.development开发环境变量
.eslintrc.jsonESLint 的配置文件
.gitignoreGit需要忽略的文件和文件夹
next-env.d.tsNext.js 的 TypeScript 声明文件
tsconfig.jsonTypeScript 的配置文件
jsconfig.jsonJavaScript 的配置文件

app路由约定

layout.js .jsx .tsx布局
page.js .jsx .tsx页面
loading.js .jsx .tsx加载用户界面
not-found.js .jsx .tsx未找到用户界面
error.js .jsx .tsx错误用户界面
global-error.js .jsx .tsx全局错误用户界面
route.js .tsAPI 端点
template.js .jsx .tsx重新渲染布局
default.js .jsx .tsx并行路由后备页面

嵌套路由

folder路由段
folder/folder嵌套路由段

动态路由

[folder]动态路由段
[...folder]捕获所有的路由段
[[...folder]]可选捕获所有的路由段

路由组和私有文件夹

(folder)对路由进行分组而不影响路由
_folder选择文件夹和所有子段不参与路由

并行和拦截的路由

@folder命名槽
(.)folder拦截同级
(..)folder拦截上面一层
(..)(..)folder拦截上面两层
(...)folder从根拦截

元数据文件约定

App Icons

favicon.ico网站图标文件
icon.ico .jpg .jpeg .png .svg应用程序图标
icon.js .ts .tsx生成的应用程序图标
apple-icon.jpg .jpeg, .png苹果应用程序图标
apple-icon.js .ts .tsx生成的苹果应用程序图标

打开图谱和 Twitter 图片

opengraph-image.jpg .jpeg .png .gif开放的图形图像文件
opengraph-image.js .ts .tsx生成开放式图形图像
twitter-image.jpg .jpeg .png .gifTwitter的图像文件
twitter-image.js .ts .tsx生成的Twitter图像文件

SEO

sitemap.xml站点文件
sitemap.js .ts生成的站点地图
robots.txt机器人文件
robots.js .ts生成的机器人文件

pages路由约定

特殊文件

_app.js .jsx .tsx自定义应用
_document.js .jsx .tsx自定义文档
_error.js .jsx .tsx自定义错误页面
404.js .jsx .tsx404 错误页面
500.js .jsx .tsx500 错误页面

路由

文件夹约定

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可选的捕获所有的路由段