Next.js App Router中无法读取.env/.env.local文件问题求助

核心规则：Next.js环境变量区分服务端/客户端 #

Next.js 对环境变量有明确的访问限制：

• 服务端专属变量：无需前缀，仅能在服务端运行的代码（API路由、Server Components、Server Actions）中访问
• 客户端可访问变量：必须以 NEXT_PUBLIC_ 为前缀，Next.js 会自动将其注入客户端打包代码中

针对你的问题逐一解决 #

1. 客户端文件（带"use client"）无法获取变量 #

你的GOOGLE_CLIENT_ID没有加NEXT_PUBLIC_前缀，导致客户端无法读取。注意：

• Google Client ID 属于公开信息，可以暴露给客户端
• Google Client Secret 绝对不能放在客户端，必须仅在服务端使用

修改.env.local文件：

NEXT_PUBLIC_GOOGLE_CLIENT_ID='your-client-id'
GOOGLE_CLIENT_SECRET='your-client-secret'

客户端代码修改：

"use client";

useEffect(()=>{
   console.log(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID)
},[])

2. lib/session.ts 无法获取变量 #

问题出在authOptions的运行环境：NextAuth的配置必须在服务端环境中执行，若你的session.ts被客户端组件直接导入，会导致代码在客户端运行，自然拿不到非前缀变量。

解决步骤：

• 强制session.ts在服务端运行：在文件顶部添加'use server'指令：

  'use server';
  
  import { getServerSession } from "next-auth/next";
  // 其他导入...
  
  export const authOptions: NextAuthOptions = {
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID || "",
        clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
      }),
    ],
    // 其他配置...
  };
  

• 仅在服务端代码中引用authOptions：比如在app/api/auth/[...nextauth]/route.ts中导入使用，不要在客户端组件中直接引用这个配置文件。
• 重启开发服务器：修改.env文件后必须重启npm run dev，否则新的环境变量不会加载。
• 移除手动安装的dotenv：Next.js 内置了环境变量加载逻辑，无需额外安装dotenv，手动引入会导致冲突。

额外检查项 #

• .env.local 文件必须放在项目根目录（与package.json同级）
• 不要在.env文件中添加多余的空格，变量名和值之间不要有空格
• 确认.env.local没有被添加到.gitignore之外的地方（默认Next.js会忽略.env.local，避免敏感信息提交）

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