Next.js 中的重定向处理指南

Next.js 提供了多种处理重定向的方式。本文将介绍每种可用选项、适用场景以及如何管理大量重定向规则。

API	用途	使用场景	状态码
`redirect`	在数据变更或事件后重定向用户	服务端组件 (Server Components)、服务端操作 (Server Actions)、路由处理器 (Route Handlers)	307 (临时) 或 303 (服务端操作)
`permanentRedirect`	在数据变更或事件后永久重定向用户	服务端组件、服务端操作、路由处理器	308 (永久)
`useRouter`	执行客户端导航	客户端组件 (Client Components) 的事件处理器	不适用
`redirects` in `next.config.js`	基于路径重定向传入请求	`next.config.js` 配置文件	307 (临时) 或 308 (永久)
`NextResponse.redirect`	基于条件重定向传入请求	中间件 (Middleware)	任意状态码

`redirect` 函数

redirect 函数允许你将用户重定向到另一个 URL。可以在服务端组件、路由处理器和服务端操作中调用此函数。

redirect 通常用于数据变更或事件后。例如创建文章后：

'use server'

import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

export async function createPost(id: string) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }

  revalidatePath('/posts') // 更新缓存文章
  redirect(`/post/${id}`) // 跳转到新文章页
}

'use server'

import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

export async function createPost(id) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }

  revalidatePath('/posts') // 更新缓存文章
  redirect(`/post/${id}`) // 跳转到新文章页
}

须知:

redirect 默认返回 307 (临时重定向) 状态码。在服务端操作中使用时返回 303 (参见其他)，通常用于 POST 请求后跳转到成功页面。

redirect 内部会抛出错误，因此应在 try/catch 块外部调用。

redirect 可在客户端组件渲染过程中调用，但不能在事件处理器中使用。此时应改用 useRouter 钩子。

redirect 也接受绝对 URL，可用于跳转到外部链接。

如需在渲染前重定向，请使用 next.config.js 或中间件。

更多信息请参阅 redirect API 参考文档。

`permanentRedirect` 函数

permanentRedirect 函数允许你将用户永久重定向到另一个 URL。可在服务端组件、路由处理器和服务端操作中调用。

permanentRedirect 通常用于实体规范 URL 变更的场景，例如用户修改用户名后更新个人主页 URL：

'use server'

import { permanentRedirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'

export async function updateUsername(username: string, formData: FormData) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }

  revalidateTag('username') // 更新所有用户名引用
  permanentRedirect(`/profile/${username}`) // 跳转到新用户主页
}

'use server'

import { permanentRedirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'

export async function updateUsername(username, formData) {
  try {
    // 调用数据库
  } catch (error) {
    // 处理错误
  }

  revalidateTag('username') // 更新所有用户名引用
  permanentRedirect(`/profile/${username}`) // 跳转到新用户主页
}

须知:

permanentRedirect 默认返回 308 (永久重定向) 状态码。

该函数也接受绝对 URL，可用于跳转到外部链接。

如需在渲染前重定向，请使用 next.config.js 或中间件。

更多信息请参阅 permanentRedirect API 参考文档。

`useRouter()` 钩子

如果需要在客户端组件的事件处理器中重定向，可以使用 useRouter 钩子的 push 方法。例如：

'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      仪表盘
    </button>
  )
}

'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      仪表盘
    </button>
  )
}

须知:

如果不需要编程式导航，应使用 <Link> 组件。

更多信息请参阅 useRouter API 参考文档。

`next.config.js` 中的 `redirects` 配置

next.config.js 文件中的 redirects 选项允许你将传入请求路径重定向到不同目标路径。这在修改页面 URL 结构或需要预定义重定向列表时非常有用。

redirects 支持路径匹配、请求头、Cookie 和查询参数匹配，可根据传入请求灵活重定向用户。

使用示例：

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  async redirects() {
    return [
      // 基础重定向
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // 通配符路径匹配
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

export default nextConfig

module.exports = {
  async redirects() {
    return [
      // 基础重定向
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // 通配符路径匹配
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

更多信息请参阅 redirects API 参考文档。

须知:

通过 permanent 选项可返回 307 (临时重定向) 或 308 (永久重定向) 状态码。

某些平台可能限制重定向数量（如 Vercel 限制 1024 条）。如需管理大量重定向（1000+），建议使用中间件创建自定义方案。详见大规模重定向管理。

redirects 会在中间件之前执行。

中间件中的 `NextResponse.redirect`

中间件允许你在请求完成前运行代码，然后根据传入请求使用 NextResponse.redirect 重定向到不同 URL。这适用于基于条件（如认证、会话管理等）重定向用户或需要管理大量重定向的场景。

例如，用户未认证时跳转到登录页：

import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'

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

  // 用户已认证则继续
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // 未认证则跳转到登录页
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}

import { NextResponse } from 'next/server'
import { authenticate } from 'auth-provider'

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

  // 用户已认证则继续
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // 未认证则跳转到登录页
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}

须知:

中间件在 next.config.js 的 redirects 之后执行，在页面渲染之前运行。

更多信息请参阅中间件文档。

大规模重定向管理（高级）

要管理大量重定向（1000+），可考虑使用中间件创建自定义方案，无需重新部署应用即可编程式处理重定向。

实现时需考虑：

创建并存储重定向映射表
优化数据查询性能

Next.js 示例：参考我们的布隆过滤器中间件示例实现以下建议。

1. 创建和存储重定向映射表

重定向映射表是可以存储在数据库（通常是键值存储）或 JSON 文件中的重定向列表。

数据结构示例：

{
  "/old": {
    "destination": "/new",
    "permanent": true
  },
  "/blog/post-old": {
    "destination": "/blog/post-new",
    "permanent": true
  }
}

在中间件中，可以从 Vercel 的 Edge Config 或 Redis 等数据库读取数据，并根据请求重定向用户：

import { NextResponse, NextRequest } from 'next/server'
import { get } from '@vercel/edge-config'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname
  const redirectData = await get(pathname)

  if (redirectData && typeof redirectData === 'string') {
    const redirectEntry: RedirectEntry = JSON.parse(redirectData)
    const statusCode = redirectEntry.permanent ? 308 : 307
    return NextResponse.redirect(redirectEntry.destination, statusCode)
  }

  // 未找到重定向规则，继续处理
  return NextResponse.next()
}

import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config'

export async function middleware(request) {
  const pathname = request.nextUrl.pathname
  const redirectData = await get(pathname)

  if (redirectData) {
    const redirectEntry = JSON.parse(redirectData)
    const statusCode = redirectEntry.permanent ? 308 : 307
    return NextResponse.redirect(redirectEntry.destination, statusCode)
  }

  // 未找到重定向规则，继续处理
  return NextResponse.next()
}

2. 优化数据查询性能

为每个传入请求读取大型数据集可能会很慢且成本高昂。您可以通过以下两种方式优化数据查询性能：

使用针对快速读取优化的数据库
采用布隆过滤器 (Bloom filter) 等数据查询策略，在读取大型重定向文件或数据库之前高效检查重定向是否存在

参考前文示例，您可以将生成的布隆过滤器文件导入中间件 (Middleware)，然后检查传入请求路径是否存在于布隆过滤器中。

如果存在，则将请求转发至路由处理器 (Route Handler) ，该处理器将检查实际文件并将用户重定向到相应 URL。这样可以避免将大型重定向文件导入中间件，从而避免拖慢每个传入请求。

import { NextResponse, NextRequest } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

// 从生成的 JSON 文件初始化布隆过滤器
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)

export async function middleware(request: NextRequest) {
  // 获取传入请求的路径
  const pathname = request.nextUrl.pathname

  // 检查路径是否在布隆过滤器中
  if (bloomFilter.has(pathname)) {
    // 将路径转发给路由处理器
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // 从路由处理器获取重定向数据
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry: RedirectEntry | undefined =
          await redirectData.json()

        if (redirectEntry) {
          // 确定状态码
          const statusCode = redirectEntry.permanent ? 308 : 307

          // 重定向到目标地址
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 未找到重定向，继续处理请求
  return NextResponse.next()
}

import { NextResponse } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

// 从生成的 JSON 文件初始化布隆过滤器
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter)

export async function middleware(request) {
  // 获取传入请求的路径
  const pathname = request.nextUrl.pathname

  // 检查路径是否在布隆过滤器中
  if (bloomFilter.has(pathname)) {
    // 将路径转发给路由处理器
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // 从路由处理器获取重定向数据
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry = await redirectData.json()

        if (redirectEntry) {
          // 确定状态码
          const statusCode = redirectEntry.permanent ? 308 : 307

          // 重定向到目标地址
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 未找到重定向，继续处理请求
  return NextResponse.next()
}

然后在路由处理器中：

import { NextRequest, NextResponse } from 'next/server'
import redirects from '@/app/redirects/redirects.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export function GET(request: NextRequest) {
  const pathname = request.nextUrl.searchParams.get('pathname')
  if (!pathname) {
    return new Response('Bad Request', { status: 400 })
  }

  // 从 redirects.json 文件获取重定向条目
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]

  // 处理布隆过滤器的误报情况
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

  // 返回重定向条目
  return NextResponse.json(redirect)
}

import { NextResponse } from 'next/server'
import redirects from '@/app/redirects/redirects.json'

export function GET(request) {
  const pathname = request.nextUrl.searchParams.get('pathname')
  if (!pathname) {
    return new Response('Bad Request', { status: 400 })
  }

  // 从 redirects.json 文件获取重定向条目
  const redirect = redirects[pathname]

  // 处理布隆过滤器的误报情况
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

  // 返回重定向条目
  return NextResponse.json(redirect)
}

须知：

要生成布隆过滤器，可以使用 bloom-filters 等库

应验证对路由处理器的请求以防止恶意请求

Next.js 中的重定向处理指南

redirect 重定向函数

permanentRedirect

中间件 (Middleware)

重定向

On this page