SWR无法读取环境变量问题求助

以下是排查和解决步骤：

• 检查环境变量命名前缀
  如果你使用Next.js、Create React App这类前端框架，客户端可访问的环境变量必须带有特定前缀：

  • Next.js：变量名需以NEXT_PUBLIC_开头，比如NEXT_PUBLIC_GOOGLE_API_KEY
  • Create React App：变量名需以REACT_APP_开头，比如REACT_APP_GOOGLE_API_KEY
    框架只会将带对应前缀的变量注入到客户端代码中，不带前缀的变量仅能在服务端环境访问。

• 确认环境变量文件的位置和格式

  • 环境变量文件必须放在项目根目录，推荐命名为.env.local（不会被Git追踪），也可使用.env
  • 变量定义格式要规范，示例：

    NEXT_PUBLIC_GOOGLE_API_KEY=your_actual_api_key_here
    

    注意不要给值加引号，等号两边也不要留空格。

• 重启开发服务器
  修改环境变量后必须重启本地开发服务，否则代码读取的还是旧的变量值（或undefined）。

• 验证变量是否被正确注入
  在使用SWR的组件中先打印变量，确认是否能正常读取：

  console.log(process.env.NEXT_PUBLIC_GOOGLE_API_KEY); // 替换为你的实际变量名
  

  如果输出undefined，说明前面的配置步骤存在问题；如果能输出正确值，再检查SWR的请求URL拼接是否有误。

• 调整SWR请求的URL拼接
  以Next.js为例，调整后的URL示例：

  const videoURLWithEnv = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCwkj9jcrMZCcbcIa6nF5LNQ&maxResults=3&order=date&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`;
  

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