Next.js路由导航完全指南

在前端框架（如 React、Vue 等）或移动端开发中，路由系统是实现页面 / 界面导航的核心机制。Next.js 采用 文件系统路由（File System Routing），即根据项目目录结构自动生成路由。

Next.js 目前有两套路由解决方案，Next.js 从 v13.0.0 版本开始引入 App Router，之前的方案称之为“Pages Router”，目前的方案称之为“App Router”，两套路由系统可以相互兼容，Next.js v14+ 默认启用，本文基于 next v15版本说明。

关键区别

四种导航方式

Next.js 提供了多种路由导航方式，每种方式都有其特定的使用场景和优势。

1. 组件

基础使用

import Link from 'next/link';

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>;
}

动态路由

import Link from 'next/link';

export default function Page() {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ];

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          <Link href={`/items/${item.id}`}>{item.name}</Link>
        </li>
      ))}
    </ul>
  );
}

获取当前路径名

import { usePathname } from 'next/navigation';

export default function Page() {
  const pathname = usePathname();

  return <div>Current Path: {pathname}</div>;
}

2. useRouter (客户端组件)

允许你以编程方式改变来自客户端组件的路由，这种方式适用于在事件处理函数或异步操作中进行导航。

'use client';

import { useRouter } from 'next/navigation';

export default function Page() {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  );
}

useRouter 的常用方法：

• push：在客户端将新地址添加到浏览器历史栈中。
• replace：在客户端导航时，将现在的访问地址替换成目标地址。
• refresh：刷新当前路由。
• prefetch：预获取提供的路由，加快客户端导航速度。
• back：向后导航到浏览器历史栈中的上一页。
• forward：向前导航到浏览器历史栈中的下一页。

3. redirect 功能（服务端组件）

redirect 函数用于在服务器组件中进行路由跳转。这种方式通常用于在服务器端根据某些条件重定向用户。

import { redirect } from 'next/navigation'

async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  if (!id) {
    redirect('/login')
  }

  const team = await fetchTeam(id)
  if (!team) {
    redirect('/join')
  }

  // ...
}

• redirect 默认返回 307（临时重定向）状态代码。当在服务器操作中使用时，它会返回 303（请参阅其他），通常用于由于 POST 请求而重定向到成功页面。
• 如果你想在渲染过程之前重定向，可以使用 next.config.js 或 中间件。

中间件

中间件允许你在请求完成之前运行代码。然后，根据传入的请求，你可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。

中间件在缓存内容和路由匹配之前运行。

常见应用场景

• 读取部分传入请求后快速重定向
• 根据A/B测试或实验重写到不同的页面
• 修改所有页面或部分页面的标题
• 拦截请求，实现鉴权、日志

中间件中的 NextResponse

• redirect 传入请求到不同的 URL
• rewrite 通过显示给定 URL 进行响应
• 设置 API 路由，getServerSideProps 和 rewrite 目标的请求标头。
• 设置响应 cookie
• 设置响应标头

中间件的重定向应用

1. 鉴权
中间件允许你在请求完成之前运行代码。然后，根据传入请求，使用 NextResponse.redirect 重定向到不同的 URL。如果你想根据条件（例如身份验证、会话管理等）重定向用户或有大量重定向（非登录页验证 token）。

例如，如果用户未通过身份验证，则将用户重定向到 /login 页面：
```
import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'

export function middleware(request: NextRequest) {
  const isAuthenticated = authenticate(request)

  // If the user is authenticated, continue as normal
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // Redirect to login page if not authenticated
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}
```
- 中间件在 redirects 之后、next.config.js 中、渲染之前运行。

2. 拦截请求

export function middleware(request) {
  if (!request.cookies.has('token')) {
    return Response.redirect(new URL('/login', request.url));
  }
}

4. 原生 history API

除了 Next.js 提供的路由功能外，你还可以使用浏览器的原生 History API 进行路由跳转。这种方式适用于需要更细粒度控制路由历史的情况，不会重新加载页面。

export default function Page() {
  return (
    <button type="button" onClick={() => window.history.pushState({}, '', '/dashboard')}>
      Dashboard
    </button>
  );
}

动态路由

Next.js 提供了强大的动态路由功能，允许开发者根据动态参数生成页面。

1. 概念

动态路由允许你根据动态参数生成页面。例如，一个博客网站可能需要为每篇文章生成一个单独的页面，而文章的 ID 是动态的。通过动态路由，你可以使用一个页面模板来处理所有这些动态页面。

2. 创建动态路由

在 Next.js 中，动态路由通过在页面文件名中使用方括号 [] 来定义。例如，如果你有一个页面文件名为 [id].js，那么这个页面将能够处理所有类似 /123、/456 的路径，其中 123 和 456 是动态参数。

pages/
├── posts/
│   └── [id].js
└── users/
    └── [username].js

获取动态参数

在动态路由页面中，你可以通过 useRouter 钩子或 getServerSideProps、getStaticProps 等方法来获取动态参数。

策略流程图

并行路由

（未完待续）