NextJS 13 App Router中301重定向实现及缓存管理方案问询

你当前用的next/navigation里的redirect函数默认返回307临时重定向，要改成301，得换用next/server提供的NextResponse.redirect方法，它支持指定状态码。

修改page.js的代码：

1. 先导入NextResponse：

import { NextResponse } from 'next/server';

2. 把原来的redirect(...)替换成以下逻辑，同时确保page组件接收request参数：

export default async function Page({ params, searchParams, request }) {
  // 你的现有代码：生成generatedSlug、compareSlug...
  
  if (generatedSlug !== compareSlug) {
    const searchParamString = searchParams && Object.keys(searchParams).length
      ? '?' + new URLSearchParams(searchParams).toString()
      : '';
    const targetUrl = `/${generatedSlug}${searchParamString}`;
    return NextResponse.redirect(new URL(targetUrl, request.url), 301);
  }

  // 渲染页面逻辑...
}

这样就能返回301状态码的永久重定向了。

针对middleware里无法高效缓存品牌/分类数据的问题，给你两个可行的替代方案：

方案一：用ISR生成静态重定向映射文件 #

1. 新建一个API路由，定期生成包含所有品牌/分类slug映射的JSON文件，利用ISR自动更新：

// app/api/generate-redirect-map/route.js
import { writeFile } from 'fs/promises';
import { NextResponse } from 'next/server';

export async function GET() {
  // 从接口获取最新的品牌和分类数据
  const entityResult = await fetch('你的业务接口地址').then(res => res.json());
  
  // 构建旧slug到正确slug的映射（根据你的业务逻辑调整）
  const redirectMap = {};
  const correctSlug = [entityResult.category?.slug, ...entityResult.brands.map(x => x.slug)]
    .map(x => x?.replace(/\//g, ''))
    .filter(Boolean)
    .join('/');
  
  // 这里需要根据实际场景，把所有可能的旧slug映射到正确slug
  // 示例：假设单个品牌/分类slug需要跳转到组合后的正确路径
  [entityResult.category?.slug, ...entityResult.brands.map(x => x.slug)]
    .filter(Boolean)
    .forEach(oldSlug => {
      redirectMap[oldSlug.replace(/\//g, '')] = correctSlug;
    });

  // 写入public目录，生成静态映射文件
  await writeFile(process.cwd() + '/public/redirect-maps.json', JSON.stringify(redirectMap));
  return NextResponse.json({ status: 'success' });
}

// 每小时重新生成一次，或按需手动触发重新验证
export const revalidate = 3600;

2. 在middleware里读取这个静态JSON文件（Next.js会自动缓存静态资源）：

// middleware.js
import { NextResponse } from 'next/server';
import redirectMap from '../public/redirect-maps.json';

export function middleware(request) {
  const pathname = request.nextUrl.pathname.slice(1); // 去掉开头的/
  const correctSlug = redirectMap[pathname];
  
  if (correctSlug) {
    const targetUrl = `/${correctSlug}${request.nextUrl.search}`;
    return NextResponse.redirect(new URL(targetUrl, request.url), 301);
  }
  
  return NextResponse.next();
}

// 指定要匹配的动态路径
export const config = {
  matcher: ['/:slug*'],
};

优点：无需额外依赖，利用Next.js原生能力实现缓存和更新；缺点：映射更新有延迟，取决于revalidate设置的时间。

方案二：用Redis缓存实时映射数据 #

如果需要更实时的缓存更新，可以用Redis存储slug映射：

1. 在品牌/分类数据更新的业务逻辑中，主动更新Redis里的映射关系。
2. 在middleware中配置Node.js runtime，从Redis读取数据：

// middleware.js
import { NextResponse } from 'next/server';
import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

export async function middleware(request) {
  const pathname = request.nextUrl.pathname.slice(1);
  const correctSlug = await redis.get(`redirect:${pathname}`);
  
  if (correctSlug) {
    const targetUrl = `/${correctSlug}${request.nextUrl.search}`;
    return NextResponse.redirect(new URL(targetUrl, request.url), 301);
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/:slug*'],
  runtime: 'nodejs', // 指定Node.js runtime，支持Redis依赖
};

优点：缓存更新实时，可灵活控制过期时间；缺点：需要额外部署Redis服务，增加运维成本。

另外，如果你不想用middleware，也可以继续在page.js里处理重定向，同时给接口请求加上缓存策略优化性能：

const entityResult = await fetch('你的接口地址', {
  next: { revalidate: 3600 }, // 每小时重新验证一次数据
});

内容的提问来源于stack exchange，提问作者T. Cem Yılmaz