Next.js生产环境构建后.env变量未生效，API请求报500错误

问题根源 #

构建后的Next.js产物中，getServerSideProps里的process.env.baseUrl未被正确替换为生产环境地址，反而变成了硬编码的http:localhost:3000（还缺失了双斜杠）。在cPanel服务器上请求localhost:3000会返回500错误页面（HTML格式），而非预期的JSON数据，因此触发FetchError: invalid json response body... Unexpected token <错误。

解决方案 #

1. 正确配置next.config.js
   确保在next.config.js中显式暴露环境变量，让Next.js在构建时能正确注入：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     env: {
       baseUrl: process.env.baseUrl,
     },
   };
   
   module.exports = nextConfig;
   

2. 构建时加载正确的环境变量

   • 本地构建前，确保baseUrl变量已正确设置：
     • 方式一：使用.env.production文件，添加内容：baseUrl=https://你的生产域名.com
     • 方式二：构建命令前直接注入变量：baseUrl=https://你的生产域名.com npm run build
   • 只有构建时能读取到baseUrl，Next.js才会将代码中的process.env.baseUrl替换为实际值。

3. 修正服务器端请求逻辑

   • 避免硬编码地址，直接使用环境变量：

     export async function getServerSideProps() {
       const response = await fetch(`${process.env.baseUrl}/api/home`);
       // 建议添加错误处理，避免请求失败导致页面崩溃
       if (!response.ok) {
         return { props: { data: null, error: '请求失败' } };
       }
       const data = await response.json();
       return { props: { data } };
     }
     

   • 更优方案：服务器端请求自身API时，直接调用API路由的函数，无需走HTTP请求，既高效又避免环境变量问题：

     import homeApiHandler from '../pages/api/home';
     
     export async function getServerSideProps(context) {
       let data = null;
       try {
         // 模拟请求响应对象
         const mockRes = {
           json: (result) => { data = result; },
         };
         await homeApiHandler(context.req, mockRes);
       } catch (err) {
         console.error('API调用失败:', err);
       }
       return { props: { data } };
     }
     

4. 检查cPanel Node应用配置

   • 在cPanel的Node应用设置中，确认已添加baseUrl环境变量，值为你的生产域名（如https://你的生产域名.com）
   • 重启Node应用，确保环境变量生效。

5. 验证构建产物
   构建完成后，检查.next/server/pages/index.js中的代码，确认process.env.baseUrl已被替换为正确的生产域名，而非硬编码的localhost地址。

内容的提问来源于stack exchange，提问作者Amir Hossein