跳到主要内容

如何在 Next.js 中处理重定向

在 Next.js 中有几种处理重定向的方法。本页面将介绍每个可用的选项、用例以及如何管理大量重定向。

API目的位置状态码
redirect在变更或事件后重定向用户服务端组件、服务端操作、路由处理器307（临时）或 303（服务端操作）
permanentRedirect在变更或事件后重定向用户服务端组件、服务端操作、路由处理器308（永久）
useRouter执行客户端导航客户端组件中的事件处理器N/A
redirects in next.config.js基于路径重定向传入请求next.config.js 文件307（临时）或 308（永久）
NextResponse.redirect基于条件重定向传入请求中间件任意
API目的位置状态码
useRouter执行客户端导航组件N/A
redirects in next.config.js基于路径重定向传入请求next.config.js 文件307（临时）或 308（永久）
NextResponse.redirect基于条件重定向传入请求中间件任意

redirect 函数​

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

redirect 通常在变更或事件后使用。例如，创建帖子：

app/actions.ts
'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}`) // 导航到新帖子页面
}

提示：

  • redirect 默认返回 307（临时重定向）状态码。在服务端操作中使用时，它返回 303（参见其他），这通常用于将 POST 请求的结果重定向到成功页面。
  • redirect 会抛出错误，因此在使用 try/catch 语句时应该在 try 块外部调用。
  • redirect 可以在客户端组件的渲染过程中调用，但不能在事件处理器中调用。你可以改用 useRouter 钩子。
  • redirect 也接受绝对 URL，可用于重定向到外部链接。
  • 如果你想在渲染过程之前重定向，请使用 next.config.js 或中间件。

有关更多信息，请参阅 redirect API 参考。

permanentRedirect 函数​

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

permanentRedirect 通常在变更或事件后使用，这些变更或事件会改变实体的规范 URL，例如在用户更改用户名后更新用户资料 URL：

app/actions.ts
'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}`) // 导航到新用户资料
}

提示：

  • permanentRedirect 默认返回 308（永久重定向）状态码。
  • permanentRedirect 也接受绝对 URL，可用于重定向到外部链接。
  • 如果你想在渲染过程之前重定向，请使用 next.config.js 或中间件。

有关更多信息，请参阅 permanentRedirect API 参考。

useRouter() 钩子​

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

app/page.tsx
'use client'

import { useRouter } from 'next/navigation'

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

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

如果你需要在组件中重定向，可以使用 useRouter 钩子的 push 方法。例如：

app/page.tsx
import { useRouter } from 'next/router'

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

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

提示：

  • 如果你不需要以编程方式导航用户，应该使用 <Link> 组件。

有关更多信息，请参阅 useRouter API 参考。

有关更多信息，请参阅 useRouter API 参考。

next.config.js 中的 redirects​

next.config.js 文件中的 redirects 选项允许你将传入请求路径重定向到不同的目标路径。当你更改页面的 URL 结构或有一个已知的重定向列表时，这很有用。

redirects 支持路径、头、cookie 和查询匹配，为你提供了基于传入请求重定向用户的灵活性。

要使用 redirects，请将选项添加到你的 next.config.js 文件中：

next.config.ts
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

有关更多信息，请参阅 redirects API 参考。

提示：

  • redirects 可以使用 permanent 选项返回 307（临时重定向）或 308（永久重定向）状态码。
  • redirects 在平台上可能有限制。例如，在 Vercel 上，有 1,024 个重定向的限制。要管理大量重定向（1000+），请考虑使用中间件创建自定义解决方案。有关更多信息，请参阅大规模管理重定向（高级）。
  • redirects 在中间件之前运行。

中间件中的 NextResponse.redirect​

中间件允许你在请求完成之前运行代码。然后，基于传入请求，使用 NextResponse.redirect 重定向到不同的 URL。如果你想基于条件（例如身份验证、会话管理等）重定向用户，或者有大量重定向，这很有用。

例如，如果用户未通过身份验证，则将其重定向到 /login 页面：

middleware.ts
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*',
}

提示：

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

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

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

要管理大量重定向（1000+），你可以考虑使用中间件创建自定义解决方案。这允许你以编程方式处理重定向，而无需重新部署应用程序。

为此，你需要考虑：

  1. 创建和存储重定向映射。
  2. 优化数据查找性能。

Next.js 示例：请参阅我们的使用 Bloom 过滤器的中间件示例，了解下面建议的实现。

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

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

考虑以下数据结构：

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

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

middleware.ts
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()
}

2. 优化数据查找性能​

为每个传入请求读取大型数据集可能很慢且昂贵。你可以通过两种方式优化数据查找性能：

  • 使用针对快速读取优化的数据库
  • 使用 Bloom 过滤器等数据查找策略，在读取更大的重定向文件或数据库之前高效地检查重定向是否存在。

考虑前面的示例，你可以将生成的 bloom 过滤器文件导入到中间件中，然后检查传入请求的路径名是否存在于 bloom 过滤器中。

如果存在，将请求转发到路由处理器 API 路由，它将检查实际文件并将用户重定向到适当的 URL。这避免了将大型重定向文件导入到中间件中，这可能会减慢每个传入请求的速度。

middleware.ts
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 文件初始化 bloom 过滤器
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)

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

  // 检查路径是否在 bloom 过滤器中
  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()
}

然后，在路由处理器中：

app/api/redirects/route.ts
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]

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

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

然后，在 API 路由中：

pages/api/redirects.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import redirects from '@/app/redirects/redirects.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const pathname = req.query.pathname
  if (!pathname) {
    return res.status(400).json({ message: 'Bad Request' })
  }

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

  // 处理 bloom 过滤器误报
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }

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

提示：

  • 要生成 bloom 过滤器，你可以使用 bloom-filters 等库。
  • 你应该验证对路由处理器的请求，以防止恶意请求。
最后于 更新