跳至内容
构建您的应用程序路由重定向

重定向

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

API用途位置状态码
useRouter执行客户端导航组件N/A
next.config.js 中的 redirects根据路径重定向传入请求next.config.js 文件307（临时）或 308（永久）
NextResponse.redirect根据条件重定向传入请求中间件任何位置

useRouter() 钩子

如果您需要在组件内部重定向，可以使用 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')}>
      Dashboard
    </button>
  )
}

值得注意:

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

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

next.config.js 中的 redirects

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

redirects 支持 路径、标头、Cookie 和查询匹配，使您能够根据传入请求灵活地重定向用户。

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

next.config.js
module.exports = {
  async redirects() {
    return [
      // Basic redirect
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // Wildcard path matching
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

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

值得注意:

  • redirects 可以使用 permanent 选项返回 307（临时重定向）或 308（永久重定向）状态码。
  • redirects 在某些平台上可能存在限制。例如，在 Vercel 上，重定向数量限制为 1024 个。要管理大量重定向（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 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*',
}

值得注意:

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

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

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

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

为此，您需要考虑

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

**Next.js 示例**：有关以下建议的实现，请参阅我们的 使用布隆过滤器的中间件 示例。

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)
  }
 
  // No redirect found, continue without redirecting
  return NextResponse.next()
}

2. 优化数据查找性能

对于每个传入请求都读取大型数据集可能会很慢且成本很高。您可以通过两种方式优化数据查找性能

  • 使用针对快速读取进行了优化的数据库，例如 Vercel Edge Config 或 Redis。
  • 使用数据查找策略，例如 布隆过滤器，以有效地检查重定向是否存在，**然后**读取更大的重定向文件或数据库。

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

如果存在，则将请求转发到 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
}
 
// Initialize bloom filter from a generated JSON file
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)
 
export async function middleware(request: NextRequest) {
  // Get the path for the incoming request
  const pathname = request.nextUrl.pathname
 
  // Check if the path is in the bloom filter
  if (bloomFilter.has(pathname)) {
    // Forward the pathname to the Route Handler
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )
 
    try {
      // Fetch redirect data from the Route Handler
      const redirectData = await fetch(api)
 
      if (redirectData.ok) {
        const redirectEntry: RedirectEntry | undefined =
          await redirectData.json()
 
        if (redirectEntry) {
          // Determine the status code
          const statusCode = redirectEntry.permanent ? 308 : 307
 
          // Redirect to the destination
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }
 
  // No redirect found, continue the request without redirecting
  return NextResponse.next()
}

然后，在 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' })
  }
 
  // Get the redirect entry from the redirects.json file
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]
 
  // Account for bloom filter false positives
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }
 
  // Return the redirect entry
  return res.json(redirect)
}

值得注意

  • 要生成布隆过滤器，您可以使用像 bloom-filters 这样的库。
  • 您应该验证对路由处理程序发出的请求，以防止恶意请求。