1.Top-level folders 顶级文件夹

Top-level folders are used to organize your application's code and static assets.

顶级文件夹用于组织应用程序的代码和静态资产。

app

App Router

pages

Pages Router

public

Static assets to be served

src

Optional application source folder

2.Top-level files 顶级文件

Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.

顶级文件用于配置应用程序、管理依赖项、运行中间件、集成监视工具以及定义环境变量。

next.config.js

Configuration file for Next.js
Next.js 的配置文件

package.json

Project dependencies and scripts
项目依赖和脚本

instrumentation.ts

OpenTelemetry and Instrumentation file
OpenTelemetry 和 Instrumentation 文件

middleware.ts

Next.js request middleware
Next.js 请求中间件

.env

Environment variables 环境变量

.env.local

Local environment variables
本地环境变量

.env.production

Production environment variables
生产环境变量

.env.development

Development environment variables
开发环境变量

.eslintrc.json

Configuration file for ESLint
ESLint 的配置文件

.gitignore

Git files and folders to ignore
要忽略的 Git 文件和文件夹

next-env.d.ts

TypeScript declaration file for Next.js
Next.js 的 TypeScript 声明文件

tsconfig.json

Configuration file for TypeScript
TypeScript 的配置文件

jsconfig.json

Configuration file for JavaScript
JavaScript 的配置文件

3.app Routing Conventions app 路由约定

The following file conventions are used to define routes and handle metadata in the app router.

以下文件约定用于定义路由并处理 app 路由器中的元数据。

a. Routing Files 路由文件

layout

.js .jsx .tsx

Layout 布局

page

.js .jsx .tsx

Page 页

loading

.js .jsx .tsx

Loading UI 加载用户界面

not-found

.js .jsx .tsx

Not found UI 未找到用户界面

error

.js .jsx .tsx

Error UI 错误用户界面

global-error

.js .jsx .tsx

Global error UI 全局错误用户界面

route

.js .ts

API endpoint API端点

template

.js .jsx .tsx

Re-rendered layout 重新渲染布局

default

.js .jsx .tsx

Parallel route fallback page
并行路由后备页面

b.Dynamic Routes 嵌套路由

folder

Route segment 航线段

folder/folder

Nested route segment 嵌套路由段

c.Route Groups and Private Folders 路由组和私人文件夹

(folder)

Group routes without affecting routing
对路由进行分组而不影响路由

_folder

Opt folder and all child segments out of routing
选择文件夹和所有子段不参与路由

d.Parallel and Intercepted Routes 并行和拦截的路线

@folder

Named slot 命名槽

(.)folder

Intercept same level 拦截同级

(..)folder

Intercept one level above
拦截上方一层

(..)(..)folder

Intercept two levels above
拦截上面两层

(...)folder

Intercept from root 从根拦截

e.Metadata File Conventions 元数据文件约定

  • App Icons

  • Open Graph and Twitter Images

  • SEO

4.pages Routing Conventions pages 路由约定

The following file conventions are used to define routes in the pages router.

以下文件约定用于定义 pages 路由器中的路由。

a.Special Files 特殊文件

_app

.js .jsx .tsx

Custom App 定制应用程序

_document

.js .jsx .tsx

Custom Document 定制文件

_error

.js .jsx .tsx

Custom Error Page 自定义错误页面

404

.js .jsx .tsx

404 Error Page 404错误页面

500

.js .jsx .tsx

500 Error Page 500 错误页面

b.Routes 路线

Folder convention 文件夹约定

index

.js .jsx .tsx

Home page 主页

folder/index

.js .jsx .tsx

Nested page 嵌套页面

File convention 文件约定

index

.js .jsx .tsx

Home page 主页

file

.js .jsx .tsx

Nested page 嵌套页面

c.Dynamic Routes 动态路线

Folder convention 文件夹约定

[folder]/index

.js .jsx .tsx

Dynamic route segment 动态路段

[...folder]/index

.js .jsx .tsx

Catch-all route segment 包罗万象的路线段

[[...folder]]/index

.js .jsx .tsx

Optional catch-all route segment
可选的包罗万象的路线段

File convention 文件约定

[file]

.js .jsx .tsx

Dynamic route segment 动态路段

[...file]

.js .jsx .tsx

Catch-all route segment 包罗万象的路线段

[[...file]]

.js .jsx .tsx

Optional catch-all route segment
可选的包罗万象的路线段