Next.js项目文件结构

1,373 阅读1分钟

Next.js有一套固定的文件结构,包括配置文件、资源文件、路由文件等。

根目录文件夹

appapp路由目录
pagespages路由目录
public静态资源目录
src备用资源目录

根目录文件

next.config.jsNext.js配置文件
package.json项目依赖
instrumentation.tsOpenTelemetry and Instrumentation file
middleware.ts中间件配置文件
.env环境变量
.env.local本地环境变量
.env.production生产环境变量
.env.development开发环境变量
.eslintrc.jsonESLint配置文件
.gitignoreGit忽略文件配置
next-env.d.tsTypeScript环境配置
tsconfig.jsonTypeScript默认配置
jsconfig.jsonJavaScript默认配置

app路由规则

路由文件

layout.js .jsx .tsx布局
page.js .jsx .tsx默认首页
loading.js .jsx .tsx默认加载页
not-found.js .jsx .tsx404页
error.js .jsx .tsx错误页
global-error.js .jsx .tsx全局错误页
route.js .tsAPI endpoint
template.js .jsx .tsx默认模板文件,功能与layout相似,但路由更新时template会重新加载。
default.js .jsx .tsx默认fallback

路由嵌套

folder根目录
folder/folder路由嵌套

动态路由

[folder]根目录
[...folder]匹配所有
[[...folder]]半匹配

路由组和私有路由

(folder)分组路由
_folder不参与路由