Next.js 13.5.2页面目录下如何为URL添加.html后缀？

完全可行，你之前的方案问题出在配置逻辑和文件命名上，以下是正确的实现步骤：

1. 保留原页面文件结构 #

不要修改页面文件名，保持news/[slug].tsx的结构，正常编写页面组件和数据获取逻辑（比如getStaticProps/getServerSideProps）。

2. 配置next.config.js #

通过rewrites和redirects配合，实现URL后缀的添加和页面映射：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 将带.html的请求映射到对应的页面组件
      {
        source: '/news/:slug.html',
        destination: '/news/:slug',
      },
    ];
  },
  async redirects() {
    return [
      // 将不带.html的URL永久重定向到带后缀的版本，满足SEO需求
      {
        source: '/news/:slug',
        destination: '/news/:slug.html',
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

3. 为什么之前的方案无效 #

• 文件名改为[slug].html.tsx：Next.js Pages路由会将文件名直接作为路由片段，导致实际路由变为/news/[slug].html，无法正确匹配动态参数。
• 原rewrites配置方向错误：你之前的配置是将不带后缀的URL指向不存在的.html路由，正确逻辑应该是让带后缀的请求映射到已存在的页面路由。

静态生成场景补充 #

如果使用getStaticPaths生成静态页面，无需修改路径生成逻辑，保持返回slug参数即可，rewrites会自动处理带.html的URL映射：

export async function getStaticPaths() {
  const slugs = ['123', '456']; // 替换为实际的slug列表
  return {
    paths: slugs.map(slug => ({ params: { slug } })),
    fallback: false,
  };
}

配置完成后，用户访问www.test.com/news/123会自动跳转到www.test.com/news/123.html，页面正常渲染，同时百度搜索引擎能抓取到符合需求的带后缀URL。

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