NextJS服务端渲染中Axios baseURL配置失败，环境变量值为undefined求助

1. 先搞定环境变量的正确配置 #

• 在项目根目录新建.env.local文件（用这个文件存本地配置，会被Git自动忽略，避免敏感信息提交）
• 往文件里加环境变量，别加引号：

  NEXT_PUBLIC_SERVER_BASE_URL=http://你的服务器域名或本地地址（比如localhost:3000）
  

• 保存后必须重启Next.js开发服务器——环境变量修改后不重启的话，新值不会生效

2. 正确初始化Axios实例 #

别直接改全局的axios.defaults，建议单独建一个Axios配置文件，比如utils/axios.js：

import axios from 'axios';

// 创建Axios实例，同时加个默认值兜底，避免变量未加载时出错
const axiosInstance = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_SERVER_BASE_URL}/api` || 'http://localhost:3000/api'
});

export default axiosInstance;

之后项目里所有请求都导入这个实例来用就行。

如果需要区分服务端和客户端的不同配置（比如服务端直接调用内部API，不用完整域名），可以这么写：

import axios from 'axios';

// 服务端渲染时window对象不存在，用本地服务地址；客户端用环境变量配置的域名
const baseURL = typeof window === 'undefined' 
  ? 'http://localhost:3000/api'
  : `${process.env.NEXT_PUBLIC_SERVER_BASE_URL}/api`;

const axiosInstance = axios.create({ baseURL });

export default axiosInstance;

3. 排查常见坑 #

• 核对环境变量名，大小写、下划线都不能错，比如别把NEXT_PUBLIC_SERVER_BASE_URL写成NEXT_PUBLIC_SERVER_BASEURL
• 环境变量值别加引号，比如NEXT_PUBLIC_SERVER_BASE_URL="http://xxx"会导致变量值带引号，请求地址会出错
• 确认.env.local在项目根目录，不是放在src这类子文件夹里
• 生产部署时，要在平台控制台（比如Vercel、Netlify）手动配置环境变量，本地的.env.local不会被打包到生产环境

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