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