Next.js如何实现page/[id]/[slug]格式URL并保留原[ id ]页面数据

该需求完全可以实现，核心逻辑是调整路由结构后，仍使用id作为数据查询的唯一依据，slug仅作为URL的展示/SEO字段，不参与数据查询逻辑，原有数据获取代码基本不需要改动。

根据你使用的Next.js路由模式，具体操作如下：

针对 Pages Router （旧版路由） #

• 调整页面文件结构
  把原pages/[id].js/pages/[id].tsx的代码，复制到新建的pages/page/[id]/[slug].js/pages/page/[id]/[slug].tsx文件中。
• 保留原有数据获取逻辑
  无论是使用getServerSideProps还是getStaticProps，只需要从入参中提取id参数即可，slug参数可以直接忽略，原有数据查询代码不需要做任何修改：

  // 示例：getServerSideProps逻辑
  export async function getServerSideProps(context) {
    // 仅提取id参数，和原有逻辑完全一致
    const { id } = context.params;
    // 复制原有的数据查询代码即可
    const res = await fetch(`你的接口地址/${id}`);
    const pageData = await res.json();
    return { props: { pageData } };
  }
  

• （可选）配置原路由重定向
  如果需要原有/[id]路径自动跳转到新的URL格式，可以在next.config.js中添加重定向规则：

  module.exports = {
    async redirects() {
      return [
        {
          source: '/:id',
          destination: '/page/:id/default-slug', // 可根据实际需求替换为动态查询到的slug
          permanent: true,
        },
      ]
    }
  }
  

针对 App Router （Next.js 13+ 新版路由） #

• 调整路由文件夹结构
  把原app/[id]/page.js/app/[id]/page.tsx的代码，复制到新建的app/page/[id]/[slug]/page.js/app/page/[id]/[slug]/page.tsx文件中。
• 保留原有数据获取逻辑
  页面组件默认接收params属性，仅提取其中的id参数即可，slug参数可直接忽略，原有数据查询逻辑不需要修改：

  // app/page/[id]/[slug]/page.js 示例
  async function DetailPage({ params }) {
    // 仅提取id参数，和原有逻辑完全一致
    const { id } = params;
    // 复制原有的数据查询代码即可
    const res = await fetch(`你的接口地址/${id}`);
    const pageData = await res.json();
    return <main>{/* 原有页面渲染逻辑 */}</main>
  }
  export default DetailPage;
  

• （可选）配置原路由重定向
  直接在原app/[id]/page.js中添加重定向逻辑即可：

  import { redirect } from 'next/navigation';
  async function OldDetailPage({ params }) {
    const { id } = params;
    // 可查询对应内容的slug替换下方默认值
    const slug = 'default-slug';
    redirect(`/page/${id}/${slug}`);
  }
  export default OldDetailPage;
  

可选优化点 #

如果需要避免不同slug对应同一内容的重复收录问题，可以在拿到数据后，校验URL中的slug和数据返回的slug是否一致，不一致时返回404或者自动重定向到正确的URL即可，该逻辑不会影响原有数据获取逻辑。

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