Next.js 项目结构 |
您所在的位置：网站首页 › nodejs架构设计 › Next.js 项目结构 |
Next.js 项目结构
|
Next.js 项目结构
此页面概述了 Next.js 应用的项目结构。它涵盖了 app 和 pages 目录中的顶层文件和文件夹、配置文件以及路由约定。 ¥This page provides an overview of the project structure of a Next.js application. It covers top-level files and folders, configuration files, and routing conventions within the app and pages directories. 单击文件和文件夹名称以了解有关每个约定的更多信息。 ¥Click the file and folder names to learn more about each convention. 顶层文件夹¥Top-level folders 顶层文件夹用于组织应用的代码和静态资源。 ¥Top-level folders are used to organize your application's code and static assets. 
app应用路由pages页面路由public要提供的静态资源src可选的应用源文件夹
顶层文件
¥Top-level files 顶层文件用于配置应用、管理依赖、运行中间件、集成监视工具以及定义环境变量。 ¥Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables. Next.jsnext.config.jsNext.js 的配置文件package.json项目依赖和脚本instrumentation.tsOpenTelemetry 和 Instrumentation 文件middleware.tsNext.js 请求中间件.env环境变量.env.local本地环境变量.env.production生产环境变量.env.development开发环境变量.eslintrc.jsonESLint 的配置文件.gitignore要忽略的 Git 文件和文件夹next-env.d.tsNext.js 的 TypeScript 声明文件tsconfig.jsonTypeScript 的配置文件jsconfig.jsonJavaScript 的配置文件 app 路由约定¥app Routing Conventions 以下文件约定用于定义路由并处理 app 路由 文件中的元数据。 ¥The following file conventions are used to define routes and handle metadata in the app router. 路由文件¥Routing Files 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并行路由后备页面 嵌套路由¥Nested Routes folder路由段folder/folder嵌套路由段 动态路由¥Dynamic Routes [folder]动态路段[...folder]包罗万象的路由段[[...folder]]可选的包罗万象的路由段 路由组和私有文件夹¥Route Groups and Private Folders (folder)对路由进行分组而不影响路由_folder选择文件夹和所有子段不参与路由 并行和拦截的路由¥Parallel and Intercepted Routes @folder命名槽(.)folder拦截同级(..)folder拦截上方一层(..)(..)folder拦截上面两层(...)folder从根拦截 元数据文件约定¥Metadata File Conventions 应用图标¥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 图片¥Open Graph and Twitter Images 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 Routing Conventions 以下文件约定用于定义 pages 路由.conf 中的路由。 ¥The following file conventions are used to define routes in the pages router. 特殊文件¥Special Files _app.js .jsx .tsx自定义应用_document.js .jsx .tsx自定义文件_error.js .jsx .tsx自定义错误页面404.js .jsx .tsx404 错误页面500.js .jsx .tsx500 错误页面 路由¥Routes 文件夹约定index.js .jsx .tsx主页folder/index.js .jsx .tsx嵌套页面文件约定index.js .jsx .tsx主页file.js .jsx .tsx嵌套页面 动态路由¥Dynamic Routes 文件夹约定[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可选的包罗万象的路由段 |
【本文地址】