Next.js项目环境变量配置求助：API_KEY无法正常生效

问题原因 #

Next.js对客户端组件和服务端代码的环境变量有明确区分：未添加NEXT_PUBLIC_前缀的变量仅能在服务端代码中访问，客户端组件（比如你的ListNews.jsx）无法读取这类变量，导致API请求中API_KEY为空，最终请求失效。

解决步骤 #

1. 修改.env文件变量名
   在项目根目录的.env文件中，给变量添加NEXT_PUBLIC_前缀：

   NEXT_PUBLIC_API_KEY=355e8d5xxxxxxxxxxxxxx
   

2. 更新组件中的变量引用
   在src/components/ListNews.jsx中，同步修改变量的读取路径：

   const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
   useEffect(()=>{ 
     let url = `https://gnews.io/api/v4/top-headlines?category=${category}&lang=${language}&max=10&apikey=${API_KEY}`;
     // 执行API请求的后续逻辑
   }, [category, language, API_KEY]);
   

额外注意事项 #

• 修改.env文件后，必须重启Next.js开发服务器，新的环境变量才会生效
• 确认.gitignore文件中包含.env条目，防止敏感密钥被提交到代码仓库（Next.js初始化项目时默认已配置）
• 若API请求可以放在服务端执行（比如使用getServerSideProps、App Router的Server Component），建议保留无前缀的API_KEY，仅在服务端代码中使用，避免密钥暴露给客户端，提升安全性

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