Next.js部署Netlify/Vercel报Task timed out after 10.02秒错误

架构老林

2026-8-30

问题根因

出现10秒超时且没有你代码里打印的耗时日志，说明函数根本没执行到你写的axios请求逻辑，常见诱因有3个：

顶层引入的模块包含浏览器专属依赖：这类依赖直接操作window/document对象，在Node.js环境的Serverless函数中加载时会直接卡住，甚至抛出未捕获的异常阻断执行。本地开发环境不会严格隔离服务端/客户端的依赖打包，所以不会触发这个问题，只有生产构建部署到Serverless环境才会复现，这也是绝大多数同类问题的核心原因。
请求地址写法错误：本地开发时Next.js会自动补全请求的域名，如果你在getServerSideProps里写了相对路径的接口地址，部署到Vercel/Netlify的Serverless环境后，没有上下文可以补全域名，请求会一直挂起直到超时。
接口访问限制：你调用的API设置了IP白名单，本地开发的IP可以正常访问，Vercel/Netlify的Serverless出口IP被拦截，请求无法得到响应直到超时。

排查&修复步骤

第一步先确认执行卡点
在getServerSideProps最顶部（所有逻辑之前）加一行日志console.log('服务端函数开始执行')，重新部署后看日志：
- 如果连这行日志都打不出来，直接走第二步排查依赖问题
- 如果这行日志能打印，但是打不出接口耗时日志，走第三步排查请求问题

修复依赖引入问题
检查页面顶部所有import引入的模块，把所有只在浏览器端运行的依赖（比如DOM操作库、前端特效库、依赖window对象的工具包）全部从顶层import移除，挪到客户端侧的useEffect里动态加载，避免被打包进服务端函数的执行包，示例写法：

// ❌ 错误：顶层引入浏览器专属依赖，会被打包进服务端代码
// import browserLib from 'only-run-in-browser'
import { useEffect } from 'react'

export default function SearchPage({ searchResulf }) {
  useEffect(() => {
    // ✅ 正确：在客户端useEffect里动态引入，不会进入服务端执行逻辑
    import('only-run-in-browser').then(browserLib => {
      browserLib.init()
    })
  }, [])

  return <div>/* 页面逻辑 */</div>
}

修复接口请求问题
- 不要在getServerSideProps里用相对路径写接口地址，必须写完整带协议、域名的绝对路径，比如https://your-api-domain.com/search?keyword=test
- 如果你调用的是同项目下的Next.js API路由，不要走axios发HTTP请求，把API路由里的核心逻辑抽成公共工具函数，在getServerSideProps里直接调用这个函数即可，省去HTTP请求的开销，也能避免路径错误。
- 给axios请求加上明确的超时时间，避免无意义等待：
```
const searchResulf = await axios.get(url, { timeout: 5000 });
```
- 如果换了绝对路径还是卡，把请求地址换成公开可访问的测试接口重新部署测试，如果测试接口能正常返回，说明原接口拦截了部署平台的出口IP，需要给对应IP段加白名单。
超时配置说明
Vercel、Netlify的免费版Serverless函数默认执行超时就是10秒，就算接口正常，如果请求耗时超过10秒也会触发超时，无法通过代码修改延长这个时间，付费版可以调整到最长60秒（Vercel Pro）/26秒（Netlify付费版）。

内容的提问来源于stack exchange，提问作者Nguyễn Tuấn Kiệt