如何解决NextJS中Appwrite端点undefined的问题？

问题核心 #

在Next.js项目中配置NEXT_PUBLIC_ENDPOINT环境变量后，代码检查逻辑抛出Error: NEXT_PUBLIC_ENDPOINT is not defined. Check your .env.local file.，已确认文件位置、拼写无误，重装Node仍无法解决。

排查与解决步骤 #

1. 修正.env.local的格式错误 #

你当前的配置项末尾多了一个多余的点：

NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1.

改为：

NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1

同时确保：

• 键值对等号两侧无空格（不要写成NEXT_PUBLIC_ENDPOINT = https://xxx）
• 所有依赖的环境变量（如PROJECT_ID、API_KEY、NEXT_PUBLIC_BUCKET_ID）都在.env.local中完整配置

2. 重启Next.js开发服务器 #

Next.js不会自动重载.env文件的修改，修改.env.local后必须：

1. 停止当前运行的npm run dev进程
2. 重新执行npm run dev启动服务器

3. 清除Next.js缓存 #

缓存可能导致环境变量无法更新，执行以下命令清除缓存后重启：

# Mac/Linux
rm -rf .next && npm run dev

# Windows
rd /s /q .next && npm run dev

4. 验证环境变量是否被正确加载 #

在解构环境变量的代码前临时添加日志，确认process.env中是否存在目标变量：

import * as sdk from "node-appwrite";

// 临时添加日志，重启服务器后查看终端输出
console.log("Loaded env variables:", {
  NEXT_PUBLIC_ENDPOINT: process.env.NEXT_PUBLIC_ENDPOINT,
});

export const {
  NEXT_PUBLIC_ENDPOINT: ENDPOINT,
  PROJECT_ID,
  API_KEY,
  NEXT_PUBLIC_BUCKET_ID: BUCKET_ID,
} = process.env;

// ...后续代码

如果日志中看不到NEXT_PUBLIC_ENDPOINT，再次确认.env.local是否放在项目根目录（你更新后的文件结构是正确的，确保没有放错位置）。

5. 区分客户端/服务器端环境变量使用场景 #

如果你是在Server Component、API Route或服务器端代码中使用node-appwrite，不需要给环境变量加NEXT_PUBLIC_前缀（这个前缀是用来暴露给客户端代码的）。可以调整配置和代码：

• .env.local中改为：

  ENDPOINT=https://cloud.appwrite.io/v1
  PROJECT_ID=你的项目ID
  API_KEY=你的API密钥
  NEXT_PUBLIC_BUCKET_ID=你的Bucket ID
  

• 代码中调整解构：

  export const {
    ENDPOINT,
    PROJECT_ID,
    API_KEY,
    NEXT_PUBLIC_BUCKET_ID: BUCKET_ID,
  } = process.env;
  

这样更符合服务器端代码的安全规范，避免不必要的变量暴露。

6. 检查Next.js配置文件 #

确认next.config.mjs中没有自定义的环境变量配置干扰默认加载逻辑，默认情况下Next.js会自动加载根目录下的.env.local、.env等文件，不需要额外配置。

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