Next.js应用兼容旧版URL的路由实现方案咨询

针对你的需求（兼容/foo/bar/slug这类旧URL，且不能用301重定向），这里有两种靠谱的解决方案，你可以根据自己的场景选择：

方案一：复用现有页面，创建嵌套路由文件 #

你提到的创建pages/foo/bar/[slug].js的思路是完全可行的，而且非常直观。不需要重写任何页面逻辑，只需要在这个新文件里导入并复用现有的pages/bar/[slug].js组件即可：

// pages/foo/bar/[slug].js
// 导入现有页面组件
import BarSlugPage from '../../bar/[slug]';

// 直接导出现有组件作为当前页面的默认组件
export default BarSlugPage;

// 如果你的现有页面使用了getStaticProps/getServerSideProps/getStaticPaths，也要同步导出这些方法
export async function getStaticProps(context) {
  return await BarSlugPage.getStaticProps(context);
}

export async function getStaticPaths() {
  return await BarSlugPage.getStaticPaths();
}

这种方式利用Next.js的自动路由机制，当用户访问/foo/bar/slug时，会加载这个嵌套页面，而它本质上是完全复用了现有页面的逻辑，没有冗余代码。适合只有少量旧URL需要兼容的场景。

方案二：使用Next.js Rewrites功能（更适合多旧路径场景） #

如果之后可能有更多类似的旧URL需要兼容，或者不想创建额外的嵌套文件夹，推荐使用Next.js的rewrites功能。这个功能可以在服务器端将旧路径转发到现有路径，浏览器地址栏会保持旧URL（完全符合你不能用301的要求）。

在项目根目录的next.config.js中添加如下配置：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/foo/bar/:slug', // 匹配旧URL的路径规则
        destination: '/bar/:slug', // 转发到现有页面的路径
      },
      // 以后如果有其他旧路径，可以在这里继续添加规则
    ];
  },
};

配置完成后，用户访问/foo/bar/slug时，服务器会自动渲染/bar/slug对应的页面，但浏览器地址栏仍然显示旧URL。这种方案的优势是集中管理所有路由映射，不需要创建额外的页面文件，维护成本更低。

两种方案的对比 #

• 方案一：适合少量旧URL，实现简单，无需配置项目文件；缺点是如果旧路径较多，会产生大量重复的页面文件。
• 方案二：适合多旧URL场景，集中管理，无冗余文件；缺点是需要修改next.config.js，且要注意规则的匹配顺序（先定义的规则会优先匹配）。

根据你的当前需求，两种方案都能完美解决问题，你可以根据自己的后续扩展需求来选择~

内容的提问来源于stack exchange，提问作者Dan