Next.js项目部署后刷新页面，getServerSideProps的context参数为空问题求助

你碰到的这个问题在Next.js部署场景里挺常见的——开发环境一切正常，部署后刷新页面context.params就变成空对象，尤其是涉及动态路由参数（比如你的city参数）的时候。我给你梳理几个最可能的原因和对应的解决方案：

1. 先检查动态路由文件的命名 #

Next.js识别动态路由完全依赖页面文件的命名规则，比如你的city参数对应的页面文件必须是pages/[city].js（如果是嵌套路由就是pages/xxx/[city].js）。要是文件名没加[]，部署后Next.js根本没法解析路由里的参数，自然context.params就是空的。

2. 确认部署平台的路由配置 #

不同的部署平台对Next.js动态路由的支持方式不一样：

• Vercel：作为Next.js的官方平台，默认就能完美支持动态路由，只要你的项目结构是标准的Next.js结构，一般不用额外配置。
• Netlify：需要在项目根目录创建netlify.toml文件，添加路由重写规则，确保请求能正确传递到Next.js的服务器函数：

  [[redirects]]
    from = "/*"
    to = "/.netlify/functions/server"
    status = 200
  

  同时别忘了安装@netlify/plugin-nextjs插件，不然动态路由可能无法正常工作。
• 自建服务器：如果是自己搭的Node.js服务器，要确保你的服务器配置（比如Nginx）能把所有请求转发到Next.js的入口文件，并且完整保留路由参数。

3. 用context.query作为备选方案 #

有些部署场景下，context.params的解析可能会出问题，但context.query通常更稳定，因为它直接从URL的查询字符串里取参数。你可以修改你的makeParam函数，同时兼容params和query：

export async function getServerSideProps(context) {
  function makeParam() {
    // 优先用params，没有的话 fallback 到 query
    const source = context.params || context.query;
    let params = new URLSearchParams(source);
    let keysForDel = [];
    params.forEach((v, k) => {
      if (v === 'undefined' || v === undefined) keysForDel.push(k)
    });
    keysForDel.forEach(k => params.delete(k));
    return params.toString()
  }
  // 剩下的请求逻辑不变...
}

4. 加日志排查具体问题 #

部署后可以在getServerSideProps开头加一行日志，打印整个context对象，然后查看服务器的日志输出，确认请求进来时参数到底有没有被传递进来：

export async function getServerSideProps(context) {
  console.log('[Server] Received context:', JSON.stringify(context));
  // 剩下的代码...
}

通过日志你能明确是参数根本没传到服务器，还是你的处理逻辑有问题，这样排查起来更有针对性。

5. 检查环境变量配置 #

虽然这个和context.params为空的直接关联不大，但还是要确认部署平台上的baseAddress环境变量是否正确配置——如果环境变量错了，请求失败可能会让你误以为是参数的问题。

按照上面的步骤一步步排查，应该能解决你遇到的问题。

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