Next.js App Router入门指南：路由、布局与模板详解

Next.js App Router入门指南：路由、布局与模板详解

引用

CSDN

1.

https://m.blog.csdn.net/qq_29689343/article/details/144789695

Next.js的App Router是v13.4版本引入的默认路由解决方案，相比之前的Pages Router，它提供了更完善的规范和更好的性能。本文将详细介绍App Router的核心概念和使用方法，包括路由定义、页面、布局、模板、加载界面和错误处理等关键功能。

一、前言

路由（Router）是Next.js应用的重要组成部分，决定了页面如何渲染或请求如何返回。Next.js目前支持两套路由解决方案：Pages Router和App Router。从v13.4起，App Router已成为默认的路由方案，建议在新的Next.js项目中使用。

二、文件系统路由

Next.js的路由基于文件系统，一个文件可以映射为一个路由。例如，在pages目录下创建index.js文件会映射到/路由，创建about.js文件会映射到/about路由。

三、从Pages Router到App Router

Next.js从v13版本开始使用新的App Router，之前的Pages Router仍然保留以保持兼容性。App Router通过更完善的规范和更灵活的代码组织方式，提供了更好的开发体验和性能。

App Router的目录结构

使用App Router时，项目结构类似于：

src/
└── app
    ├── page.js
    ├── layout.js
    ├── template.js
    ├── loading.js
    ├── error.js
    └── not-found.js
    ├── about
    │   └── page.js
    └── more
        └── page.js

这些特殊文件名对应不同的功能，如布局（layout.js）、模板（template.js）、加载状态（loading.js）、错误处理（error.js）和404页面（not-found.js）。

四、使用App Router

1. 定义路由

在App Router中，文件夹被用来定义路由。每个文件夹都代表一个对应到URL片段的路由片段。创建嵌套的路由，只需要创建嵌套的文件夹。例如：

2. 定义页面（Pages）

在每个路由目录下创建一个名为page.js的文件，用于定义该路由的页面内容。例如：

// app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

3. 定义布局（Layouts）

布局用于实现多个页面共享的UI组件。在导航时，布局会保留状态、保持可交互性并且不会重新渲染。定义布局需要创建一个名为layout.js的文件，该文件默认导出一个React组件，组件应接收一个children prop。

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>nav</nav>
      {children}
    </section>
  )
}

4. 定义模板（Templates）

模板类似于布局，但它不会像布局那样维持状态。模板在路由切换时会为每一个子布局或者页面创建一个实例。定义模板需要创建一个名为template.js的文件，该文件默认导出一个React组件，组件接收一个children prop。

5. 布局 vs 模板

• 状态保持：
• 布局：在路由切换时会保持状态
• 模板：在路由切换时不会保持状态
• 渲染行为：
• 布局：只在首次加载时渲染一次
• 模板：每次路由切换都会重新渲染
• 使用场景：
• 布局适合：网站的通用结构（导航栏、页脚等）
• 模板适合：依赖useEffect和useState的功能

6. 定义加载界面（Loading UI）

App Router提供了用于展示加载界面的loading.js。这个功能的实现借助了React的Suspense API。当组件在加载数据时，会抛出一个Promise对象，Suspense会捕获这个Promise并为其添加一个then回调函数，从而实现加载完成后的UI切换。

7. 定义错误处理（Error Handling）

error.js用于创建发生错误时的展示UI，其实现借助了React的Error Boundary功能。如果需要处理根布局中的错误，可以使用global-error.js文件。

8. 定义404页面

当路由不存在时，可以使用not-found.js来定义自定义的404页面。

参考链接

1. Routers - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
2. Building Your Application: Routing
3. Routing: Defining Routes
4. Routing: Pages and Layouts
5. Routing: Loading UI and Streaming
6. Routing: Error Handling
7. File Conventions: not-found.js
8. Functions: notFound