Next.js中的App Router到底有多好用

路由（Router）是 Next.js 应用的重要组成部分。在 Next.js 中，路由决定了一个页面如何渲染或者一个请求该如何返回。

Next.js 有两套路由解决方案，之前的方案称之为"Pages Router"，目前的方案称之为"App Router"，两套方案目前是兼容的，都可以在 Next.js 中使用。

从 v13.4 起，App Router 已成为默认的路由方案，新的 Next.js 项目建议使用 App Router。

1. 基于文件系统的路由定义

Next.js 的路由基于文件系统，这意味着一个文件就可以是一个路由。在 App Router 中，文件夹被用来定义路由，每个文件夹都代表一个对应到 URL 片段的路由片段。创建嵌套的路由，只需要创建嵌套的文件夹。例如，app/dashboard/settings目录对应的路由地址就是/dashboard/settings。

同时，要保证这个路由可以被访问，需要创建一个特殊的名为page.js的文件。app/page.js对应路由/，app/dashboard/page.js对应路由/dashboard，以此类推。而且，Next.js 默认支持 React、TypeScript，所以.js、.jsx、.tsx都是可以的。这种基于文件系统的路由定义方式，使得代码的组织和管理更加直观和方便。

javascript 复制代码

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

2. 从 Pages Router 到 App Router 的升级

在 Next.js v13 之前，使用的是 Pages Router，开发者只需在pages目录下创建一个文件就可以声明一个路由。然而，这种方式存在弊端，pages目录的所有 js 文件都会被当成路由文件，导致组件不能写在pages目录下，不符合开发者的使用习惯。

升级为新的 App Router 后，目录结构更加清晰和灵活。现在的目录结构类似于：

arduino 复制代码

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

3. 丰富的特殊文件功能

3.1 布局（Layouts）

布局是指多个页面共享的 UI。在导航的时候，布局会保留状态、保持可交互性并且不会重新渲染，比如用来实现后台管理系统的侧边导航栏。定义一个布局，需要新建一个名为layout.js的文件，该文件默认导出一个 React 组件，该组件应接收一个children prop，children表示子布局（如果有的话）或者子页面。

javascript 复制代码

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

3.2 模板（Templates）

模板类似于布局，它也会传入每个子布局或者页面，但不会像布局那样维持状态。模板在路由切换时会为每一个children创建一个实例，这就意味着当用户在共享一个模板的路由间跳转的时候，将会重新挂载组件实例，重新创建 DOM 元素，不保留状态。某些情况下，模板会比布局更适合，比如依赖于useEffect和useState的功能，或者更改框架的默认行为。

javascript 复制代码

// app/template.js
export default function Template({ children }) {
  return <div>{children}</div>
}

3.3 加载界面（Loading UI）

App Router 提供了用于展示加载界面的loading.js。这个功能的实现借助了 React 的Suspense API，当发生路由变化的时候，立刻展示 fallback UI，等加载完成后，展示数据。

javascript 复制代码

// app/dashboard/loading.js
export default function DashboardLoading() {
  return <>Loading dashboard...</>
}

3.4 错误处理（Error Handling）

error.js用来创建发生错误时的展示 UI。其实现借助了 React 的 Error Boundary 功能，给page.js和children包了一层ErrorBoundary。

javascript 复制代码

'use client' // 错误组件必须是客户端组件
// dashboard/error.js
import { useEffect } from 'react'
 
export default function Error({ error, reset }) {
  useEffect(() => {
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // 尝试恢复
          () => reset()
        }
      >
        Try again

4. 根布局（Root Layout）的重要性

布局支持嵌套，最顶层的布局我们称之为根布局（Root Layout），也就是app/layout.js。它会应用于所有的路由。app目录必须包含根布局，根布局必须包含html和body标签，其他布局不能包含这些标签。默认根布局是服务端组件，且不能设置为客户端组件。

javascript 复制代码

// app/layout.js
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Next.js 中的 App Router 通过基于文件系统的路由定义、从 Pages Router 到 App Router 的升级、丰富的特殊文件功能以及重要的根布局等特性，为开发者提供了强大而便捷的路由解决方案。它使得代码的组织和管理更加高效，开发体验更加流畅，是 Next.js 项目中不可或缺的一部分。如果你还没有尝试过 App Router，不妨在新的 Next.js 项目中使用它，体验它带来的便捷和高效。