Next.js：如何美化getStaticPaths生成的动态URL以优化SEO

要将原动态URL转换为目标格式，需按以下核心步骤处理：

• 统一字符大小写：将城市名、标题全部转换为小写。比如把Austin转为austin，Dog Park转为dog park，可通过字符串的toLowerCase()方法实现（如JS中city.toLowerCase()）。

• 标题SEO化处理：

  • 先移除标题中的所有非字母数字、空格的特殊字符（包括原URL里残留的[city][date][title]这类占位符标记），用正则表达式title.replace(/[^a-z0-9\s]/gi, '')完成清理。
  • 再将标题中的空格（包括URL编码的%20）替换为连字符-，比如Dog%20Park转为dog-park，用正则title.replace(/\s+/g, '-')实现。

• 移除冗余后缀与占位符：彻底删除原URL末尾的.js后缀，以及[city][date][title]这类无用占位符，确保路径仅保留城市、日期、处理后的标题三个有效部分。

• 路由规则适配：在你的后端/前端路由系统中配置对应规则，匹配/:city/:date/:slug的路径结构。以Express为例：

  app.get('/:city/:date/:slug', (req, res) => {
    const { city, date, slug } = req.params;
    // 根据参数从数据库拉取对应数据并返回页面/内容
  });
  

• URL生成逻辑封装：从数据库拉取数据后，通过预处理函数生成符合要求的URL：

  function generateSeoUrl(city, date, title) {
    const seoCity = city.toLowerCase().trim();
    const seoSlug = title.toLowerCase()
      .replace(/[^a-z0-9\s]/g, '')
      .replace(/\s+/g, '-');
    return `http://localhost:3000/${seoCity}/${date}/${seoSlug}`;
  }
  

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