Next.js项目启动报ApolloError仅支持绝对URL错误如何解决？

问题根因 #

报错Error: Only absolute URLs are supported来自Apollo Client，核心原因是你接手的项目缺少原项目的环境变量配置，Apollo Client初始化时传入的GraphQL接口地址为相对路径、空值或者不完整的URL，Next.js在生产构建阶段执行服务端侧的GraphQL请求时，无法解析非绝对路径的接口地址。

解决步骤 #

• 首先找到项目中Apollo Client的初始化代码，通常存放在src/apollo/client.js、lib/apollo.js这类路径下，确认接口地址的取值来源，一般为读取环境变量，比如process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT。
• 在项目根目录新建.env.local文件，补全所有缺失的环境变量，其中GraphQL接口地址必须填写带http://或https://前缀的完整绝对路径，示例：

  NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://你的后端域名/graphql
  # 同时补全其他项目依赖的环境变量，比如Stripe密钥、WooCommerce API密钥、Firebase配置等
  

• 不要直接执行npm start，Next.js的start命令是用来启动已构建完成的生产版本服务，需要先完成构建流程。正确执行顺序为：
  1. 执行npm run dev启动开发环境，确认配置无误、项目可以正常运行
  2. 开发环境验证通过后，执行npm run build完成生产构建
  3. 构建成功无报错后，再执行npm start启动生产服务

其他注意事项 #

• 如果暂时没有可用的后端接口，可以先注释掉页面中getStaticProps/getServerSideProps等服务端执行方法里的GraphQL请求，先验证项目构建流程正常，再对接后端接口。
• 排查时可以在Apollo初始化代码中打印接口地址的取值，确认环境变量是否正确加载。

内容的提问来源于stack exchange，提问作者Rajvir Ahmed Shv