Next.js 应用程序项目结构概述 -- 知识铺
此页面概述了 Next.js 应用程序的项目结构。它涵盖 app
和 pages
目录中的顶级文件和文件夹、配置文件以及路由约定。
单击文件和文件夹名称以了解有关每个约定的更多信息。
顶级文件夹
顶级文件夹用于组织应用程序的代码和静态资产。
app |
应用路由器 |
pages |
页面路由器 |
public |
要提供的静态资产 |
src |
可选的应用程序源文件夹 |
顶级文件
顶级文件用于配置应用程序、管理依赖项、运行中间件、集成监视工具以及定义环境变量。
Next.js | |
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 的配置文件 |
app
路由约定
以下文件约定用于定义路由并处理 app
路由器中的元数据。
路由文件
layout |
.js .jsx .tsx |
Layout |
page |
.js .jsx .tsx |
Page |
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 |
生成的苹果应用程序图标 |
打开图谱和 Twitter 图片
opengraph-image |
.jpg .jpeg .png .gif |
打开图形图像文件 |
opengraph-image |
.js .ts .tsx |
生成的 Open Graph 图像 |
twitter-image |
.jpg .jpeg .png .gif |
推特图像文件 |
twitter-image |
.js .ts .tsx |
生成的 Twitter 图片 |
SEO
sitemap |
.xml |
站点地图文件 |
sitemap |
.js .ts |
生成的站点地图 |
robots |
.txt |
机器人文件 |
robots |
.js .ts |
生成的机器人文件 |
pages
路由约定
以下文件约定用于定义 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 |
可选的包罗万象的路线段 |
- 原文作者:知识铺
- 原文链接:https://index.zshipu.com/geek001/post/20240507/Next.js-%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E6%A6%82%E8%BF%B0--%E7%9F%A5%E8%AF%86%E9%93%BA/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com