你好！作为一个每天都在和 React 打交道的开发者，我深知在构建 Web 应用时，处理页面跳转和路由重定向是多么重要的一环。Next.js 作为一个强大的全栈框架，为我们提供了多种灵活的方式来处理这些需求。无论是为了维护旧的 URL 结构，还是根据用户状态进行权限控制，你都需要掌握这些技巧。

在这篇文章中，我将带你深入了解 Next.js 中实现重定向的四种主要方法。我们不会只停留在表面代码的复制粘贴，而是会深入探讨每种方法背后的工作原理、最佳实践以及那些官方文档中可能不会详细提到的“坑”。准备好了吗？让我们开始吧！

我们将探索的核心方法

在深入代码之前，让我们先建立一个宏观的认知地图。根据不同的使用场景（服务器端、客户端、配置层），Next.js 提供了以下几种主要手段：

• 使用 redirect 函数：最直接的服务器端重定向，适用于服务器组件和 Server Actions。
• 使用 next.config.js 配置：定义静态的、全局的路径映射规则。
• 使用 router.push 方法：客户端编程式导航，适合响应用户的交互行为。
• 使用 NextResponse：在中间件层面进行请求拦截和重定向，适合处理鉴权等逻辑。

环境准备：搭建你的 Next.js 实验室

为了确保我们能顺利运行接下来的所有示例，你需要先搭建一个标准的 Next.js 开发环境。如果你已经有了项目，可以跳过这一步。

步骤 1：创建项目

打开你的终端，运行以下命令。这会启动一个交互式的创建向导。

npx create-next-app@latest my-redirect-app

在这个过程中，建议你开启 TypeScript 和 ESLint，这对保持代码质量非常有帮助。至于 App Router 还是 Pages Router，本文的示例将基于最新的 App Router 架构。

步骤 2：启动开发服务器

进入项目目录并启动它：

cd my-redirect-app
npm run dev
``

现在，浏览器访问 `http://localhost:3000`，你应该能看到默认的欢迎页面。

---

## 方法一：使用 `redirect` 函数实现服务器端重定向

这是 Next.js App Router 中最常用、也最推荐的服务器端重定向方式。`redirect` 函数的核心在于它**抛出一个错误**，从而中断当前的渲染过程并通知 Next.js 切换到新的路由。这一点非常关键，因为它意味着 `redirect` 之后的代码将永远不会被执行。

### 什么时候使用它？

- **表单提交后**：用户填写完注册表单，你希望他们跳转到仪表盘。
- **鉴权检查**：在服务器组件中检测用户未登录，直接踢回登录页。

### 实战案例：构建一个带交互的重定向表单

在这个例子中，我们将模拟一个用户登录的场景。我们将结合客户端组件和服务器动作来实现这一点。

首先，创建一个客户端组件作为入口：

javascript

// app/page.js

‘use client‘

// 导入我们的服务器动作

import { performLogin } from ‘./actions‘

export default function LoginPage() {

return (

)

}

接下来，编写服务器端逻辑。这里我们创建一个 Server Action 文件：

javascript

// app/actions.js

‘use server‘

// 从 next/navigation 导入 redirect

import { redirect } from ‘next/navigation‘

export async function performLogin(formData) {

// 模拟 API 调用延迟

await new Promise(resolve => setTimeout(resolve, 1000))

// 模拟简单的验证逻辑

const userIsValid = true

if (userIsValid) {

// 重定向到欢迎页

// 注意：redirect 只能传入绝对路径或相对路径，不能传入外部 URL

redirect(‘/dashboard‘)

}

// 注意：这里面的代码在 redirect 之后不会运行

console.log(‘这段文字永远不会被打印‘)

}

最后，别忘了创建目标页面：

javascript

// app/dashboard/page.js

export default function DashboardPage() {

return (

)

}

### 深入理解与避坑

**`redirect` vs `router.push`**：很多初学者会混淆这两者。记住，`redirect` 是服务器端的，它通常发生在数据获取或处理之后。而 `router.push` 是客户端的，由用户的浏览器触发。**你不能在 try/catch 块中捕获 `redirect` 的错误**，因为它是 Next.js 内部处理用来终止渲染的机制。

---

## 方法二：使用 `next.config.js` 配置静态重定向

有些重定向规则是静态的、全局的，比如我们将网站从 `example.com/old-blog` 迁移到了 `example.com/new-blog`。为了保持 SEO 权重且不让用户看到 404 页面，最好的办法就是在配置文件中定义它。

这种方法的优点是**性能极高**，因为它不需要运行任何 React 代码，甚至在 Next.js 服务器完全启动之前，重定向规则就已经生效了。

### 实战案例：全站流量重定向

假设我们想将所有访问根路径 `/` 的用户自动重定向到 `/home` 页面。

修改你的 `next.config.mjs` 文件（注意：新版项目通常使用 `.mjs` 扩展名）：

javascript

// next.config.mjs

/ @type {import(‘next‘).NextConfig} */

const nextConfig = {

async redirects() {

return [

{

source: ‘/‘, // 用户访问的路径

destination: ‘/home‘, // 实际跳转的目标路径

permanent: false, // 是否永久重定向（301 vs 302）

},

]

},

};

export default nextConfig;

创建目标页面：

javascript

// app/home/page.js

export default function Home() {

return (

这是新的首页

你从根路径被自动重定向到了这里。

)

}

### 高级技巧：通配符路径匹配

如果你想重定向所有以 `/blog` 开头的路径到 `/news`，可以使用通配符语法：

javascript

// next.config.mjs 片段

async redirects() {

return [

{

source: ‘/blog/:path‘, // :path 会匹配 /blog 后面的所有内容

destination: ‘/news/:path‘, // :path 会被复用到这里

permanent: false,

},

]

}

**参数说明**：
- `permanent: true`：返回 301 状态码（永久移动），搜索引擎会更新索引。适用于确信的路径变更。
- `permanent: false`：返回 307 状态码（临时重定向），适用于临时维护或 A/B 测试。

**注意**：修改配置文件后，你需要重启开发服务器 (`Ctrl+C` 然后再次 `npm run dev`) 才能看到效果。

---

## 方法三：使用 `router.push` 进行客户端导航

当你在编写交互组件时，很多时候重定向不是自动发生的，而是需要用户先做点什么——比如点击按钮、倒计时结束或选择一个选项。这时候，我们就需要客户端的 `useRouter` Hook。

### 实战案例：带倒计时的自动跳转页面

让我们做一个“5秒后自动跳转”的页面，这种场景常见于“支付成功正在跳转...”或“下载链接生成中...”。

javascript

// app/countdown/page.js

‘use client‘

import { useRouter } from ‘next/navigation‘

import { useState, useEffect } from ‘react‘

export default function CountdownRedirect() {

const router = useRouter()

const [timeLeft, setTimeLeft] = useState(5)

useEffect(() => {

// 如果倒计时结束，执行跳转

if (timeLeft === 0) {

router.push(‘/destination‘)

return // 防止继续执行

}

// 设置定时器

const timerId = setInterval(() => {

setTimeLeft(timeLeft – 1)

}, 1000)

// 清理函数：组件卸载时清除定时器，防止内存泄漏

return () => clearInterval(timerId)

}, [timeLeft, router])

return (

)

}

目标页面：

javascript

// app/destination/page.js

export default function Destination() {

return

你已成功到达目的地！

}

### 性能与体验优化

使用 `router.push` 时，Next.js 默认会使用**客户端导航**。这意味着浏览器不会刷新整个页面，只是置换了组件，速度极快。但要注意，如果你重定向到外部网站（如 `https://google.com`），必须使用 `window.location.href` 或 `` 标签，而不能使用 `router.push`。

---

## 方法四：使用 `NextResponse` 与中间件进行鉴权重定向

这是最强大也是最复杂的重定向方式。中间件允许你在请求完成**之前**拦截它。这意味着你可以在页面甚至开始渲染之前，就根据 Cookie、请求头或数据库查询结果来决定是否重定向。

### 什么时候使用中间件？

- **全局鉴权**：保护 `/admin` 路径下的所有页面。
- **A/B 测试**：根据用户特征重定向到不同版本的站点。
- **国际化**：根据用户的 IP 语言自动重定向到 `/zh-cn` 或 `/en-us`。

### 实战案例：保护管理员页面

假设我们想保护 `/admin` 路径，只有携带了特定 Cookie 的用户才能访问，否则重定向到登录页。

首先，在项目根目录（`app` 文件夹外面）或 `src` 文件夹内创建 `middleware.ts`：

创建登录页面和受保护的管理页面：