Vercel部署Next.js时getServerSideProps引发504超时问题的解决

先排查getServerSideProps代码逻辑 #

虽然你提到函数内无API请求，但仍需确认以下点：

• 检查是否存在无限循环、死逻辑：比如误写的while(true)或阻塞代码，本地环境可能因资源限制未触发，但Vercel的serverless函数执行环境会因超时终止。
• 核对query处理逻辑：是否对context.query有不当操作（比如解构错误、非预期格式的类型判断），本地与Vercel的请求上下文可能存在细微差异，导致代码卡住。

推荐极简的getServerSideProps写法（确保逻辑无冗余）：

export async function getServerSideProps(context) {
  return {
    props: {
      query: context.query || {}
    }
  };
}

用轻量方案替代getServerSideProps（避免serverless超时） #

如果仅为了刷新时保留query值，可采用客户端处理方案，完全规避服务器端函数：

方案1：客户端通过useRouter获取query #

直接在组件内用Next.js的useRouter钩子获取，刷新时依然能拿到URL参数：

import { useRouter } from 'next/router';

function MyPage() {
  const router = useRouter();
  const { yourQueryKey } = router.query;

  // 为空时设置默认值，避免undefined
  const safeQueryValue = yourQueryKey || 'default_value';

  return <div>当前Query值：{safeQueryValue}</div>;
}

export default MyPage;

方案2：使用getInitialProps（仅Next.js 13 Pages Router适用） #

若项目基于Next.js 13之前的Pages Router，可尝试用getInitialProps替代，其在Vercel环境的执行稳定性更高：

MyPage.getInitialProps = async (context) => {
  return {
    query: context.query || {}
  };
};

export default MyPage;

Vercel部署配置调整 #

• 调整函数超时时间：在项目根目录创建vercel.json，按需延长serverless函数超时（注意：免费版最大10秒，Pro版最大30秒）：

{
  "functions": {
    "pages/**/*.js": {
      "maxDuration": 10
    }
  }
}

• 清理部署缓存：在Vercel控制台重新部署时，勾选"Clear build cache"，避免旧缓存导致异常。

查看Vercel函数日志定位问题 #

部署后，在Vercel项目的「Functions」标签下，找到对应页面的函数日志，查看是否有未捕获的异常或执行阻塞信息，这是定位问题的关键。

内容的提问来源于stack exchange，提问作者Rabeya Aktar Ety