Next.js中getServerSideProps获取的slug异常显示为wow如何解决？

先修正getServerSideProps的返回逻辑 #

你当前代码硬编码返回了固定slug值，这会覆盖URL中的实际参数。先改成直接传递query里的真实slug：

export async function getServerSideProps({ query }) {
  console.log('request query:', query); // 先确认控制台输出的query内容
  // 直接使用URL中的slug参数，不要硬编码
  return {
    props: {
      slug: query.slug,
    },
  };
}

排查核心问题（为什么query.slug是'wow'） #

1. 检查路由优先级冲突 #

确认pages/detail目录下没有静态页面文件（比如wow.tsx），静态页面的匹配优先级高于动态路由[slug].tsx，如果存在wow.tsx，访问/detail/samsung-s23会被错误匹配到静态页面，导致query异常。

2. 清除开发服务器缓存 #

Next.js开发服务器可能缓存旧路由数据，直接重启服务器：

npm run dev # 重新启动开发服务

同时用浏览器无痕模式打开页面，避免客户端缓存干扰。

3. 检查next.config.js的路由规则 #

查看项目根目录的next.config.js，确认是否存在rewrites或redirects规则，有没有把/detail/:slug的请求重写到固定的wow路径：

// 示例错误重写规则，需要删除或修改
module.exports = {
  async rewrites() {
    return [
      {
        source: '/detail/:slug',
        destination: '/detail/wow', // 这种规则会强制替换slug为wow
      },
    ];
  },
};

4. 确认动态路由文件命名 #

确保动态路由文件命名是[slug].tsx，不要有拼写错误（比如写成[slugs].tsx或[slug].ts），否则无法正确匹配URL参数。

验证结果 #

修改完成后，访问localhost:3000/detail/samsung-s23?variant=black，查看控制台的request query输出，应该能看到：

query:{
  slug:'samsung-s23',
  variant:'black'
}

同时组件中console.log(slug)会输出samsung-s23。

内容的提问来源于stack exchange，提问作者am i a cat