Next.js中process.env.BACKEND_URL控制台输出undefined但按钮显示正常的问题

问题原因 #

Next.js对客户端组件的环境变量有严格的规则：

• 只有以NEXT_PUBLIC_为前缀的环境变量，才会被打包到客户端的JavaScript代码中，允许在运行时的函数（比如onClick回调）里访问。
• 你当前使用的BACKEND_URL没有前缀，Next.js只会在构建阶段静态替换JSX中的变量引用，所以按钮上能正常显示；但运行时的JavaScript逻辑（比如show函数里的console.log）无法访问这个变量，因为它没有被注入到客户端代码里，自然返回undefined。
• 你的utils.ts如果是被客户端组件导入的，同样属于客户端代码范畴，所以也无法读取无前缀的环境变量。

解决方法 #

方法1：给环境变量添加NEXT_PUBLIC_前缀（适用于非敏感变量） #

1. 在你的.env文件中，把变量名修改为：

   NEXT_PUBLIC_BACKEND_URL=http://localhost:4000
   

2. 重启Next.js开发服务器（环境变量修改后需要重启才能生效）。
3. 在代码中替换所有引用：

   'use client'
   import Appbar from "./Components/Appbar";
   import { Button } from "@/components/ui/button";
   
   export default function Home() {
     const show = () => {
       console.log("ASHHHHHHHH");
       console.log(process.env.NEXT_PUBLIC_BACKEND_URL); // 现在能正常打印
     }
   
     return (
       <main >
         <Appbar />
         <Button onClick={show}>
           {process.env.NEXT_PUBLIC_BACKEND_URL}
         </Button>
       </main>
     );
   }
   

   同时修改utils.ts：

   export const backend_url = process.env.NEXT_PUBLIC_BACKEND_URL;
   

方法2：通过服务器组件传递变量（适用于敏感变量） #

如果BACKEND_URL是敏感信息，不能暴露给客户端，就不要用NEXT_PUBLIC_前缀，而是通过服务器组件作为props传递给客户端组件：

1. 创建一个服务器组件（不要加'use client'），比如HomeWrapper.tsx：

   import Home from './Home';
   
   export default function HomeWrapper() {
     // 服务器组件可以直接读取无前缀的环境变量
     const backendUrl = process.env.BACKEND_URL;
     return <Home backendUrl={backendUrl} />;
   }
   

2. 修改你的客户端组件Home.tsx，接收props：

   'use client'
   import Appbar from "./Components/Appbar";
   import { Button } from "@/components/ui/button";
   
   type HomeProps = {
     backendUrl: string;
   }
   
   export default function Home({ backendUrl }: HomeProps) {
     const show = () => {
       console.log("ASHHHHHHHH");
       console.log(backendUrl); // 能正常打印
     }
   
     return (
       <main >
         <Appbar />
         <Button onClick={show}>
           {backendUrl}
         </Button>
       </main>
     );
   }
   

3. 确保路由使用HomeWrapper作为页面组件，而不是原来的Home。

注意事项 #

• 环境变量修改后必须重启开发服务器，否则新值不会生效。
• 敏感变量绝对不能使用NEXT_PUBLIC_前缀，避免泄露到客户端。

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