Next.js工程结构
此页面概述了 Next.js 项目的文件和文件夹结构。
它涵盖了app
和pages
目录中的顶级文件和文件夹、配置文件以及路由约定。
app | 应用路由器 |
---|
pages | 页面路由器 |
public | 提供服务的公共静态资产 |
src | 可选的应用程序源文件目录 |
next.config.js | Next.js 的配置文件 |
---|
package.json | 项目依赖和脚本 |
instrumentation.ts | OpenTelemetry 和 Instrumentation 文件 |
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 的配置文件 |
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 .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-icon | .js .ts .tsx | 生成的苹果应用程序图标 |
opengraph-image | .jpg .jpeg .png .gif | 开放的图形图像文件 |
---|
opengraph-image | .js .ts .tsx | 生成开放式图形图像 |
twitter-image | .jpg .jpeg .png .gif | Twitter的图像文件 |
twitter-image | .js .ts .tsx | 生成的Twitter图像文件 |
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 .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 | 可选的捕获所有的路由段 |