重定向
了解在Next.js中处理重定向的不同方法。本页面将介绍每个可用选项、用例以及如何管理大量的重定向。
useRouter() 钩子
## `next.config.js` 中的 `redirects`须知：
- 如果您不需要以编程方式导航用户，您应该使用
<Link>组件。
next.config.js 文件中的 redirects 选项允许您将传入的请求路径重定向到不同的目标路径。当您更改页面的URL结构或事先知道一系列重定向时，这非常有用。
redirects 支持 路径、标头、Cookie 和查询匹配，为您提供了根据传入请求重定向用户的灵活性。
要使用 redirects，请将其选项添加到您的 next.config.js 文件中：
module.exports = {
async redirects() {
return [
// 基本重定向
{
source: '/about',
destination: '/',
permanent: true,
},
// 通配符路径匹配
{
source: '/blog/:slug',
destination: '/news/:slug',
permanent: true,
},
]
}
}有关更多信息，请参见 redirects API 参考。
须知：
中间件中的 NextResponse.redirect
中间件允许您在请求完成之前运行代码。然后，根据传入的请求，使用 NextResponse.redirect 重定向到不同的 URL。如果您想根据条件（例如身份验证、会话管理等）重定向用户，或者有 大量重定向，这非常有用。
例如，如果用户未经身份验证，则将其重定向到 /login 页面：
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 示例：请参阅我们的 带有 Bloom 过滤器的中间件 示例，了解以下建议的实现。
创建和存储重定向映射
重定向映射是一个重定向列表，您可以将其存储在数据库中（通常是键值存储）或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()
}优化数据查找性能
对每个传入的请求读取大型数据集可能会很慢且成本高昂。您可以通过以下两种方式优化数据查找性能：
- 使用针对快速读取进行优化的数据库，例如Vercel Edge Config或Redis。
- 使用诸如布隆过滤器之类的数据查找策略，以高效地检查重定向是否存在，然后再读取较大的重定向文件或数据库。
考虑到前面的示例，您可以将生成的布隆过滤器文件导入到中间件中，然后，检查传入请求的路径名是否存在于布隆过滤器中。
如果存在，将请求转发到 ，它将检查实际文件并将用户重定向到适当的URL。这避免了将大型重定向文件导入中间件，这可能会减慢每个传入请求的速度。
须知：
- 要生成布隆过滤器，您可以使用像
bloom-filters这样的库。- 您应该验证对路由处理器发出的请求，以防止恶意请求。