我无法连接到appwrite

Question

无法连接到appwrite。这是错误：

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at Account.<anonymous> (appwrite.js?v=d683b3eb:932:19)
    at Generator.next (<anonymous>)
    at appwrite.js?v=d683b3eb:503:67
    at new Promise (<anonymous>)
    at __awaiter (appwrite.js?v=d683b3eb:485:10)
    at Account.create (appwrite.js?v=d683b3eb:908:12)
    at createUserAccount (api.ts:8:36)
    at onSubmit (SignUpForm.tsx:42:27)
    at chunk-XTNSOE4L.js?v=d683b3eb:1629:15

我尝试使用appwrite

Answer 1

如果有人遇到此错误，您应该采取一些措施来解决此错误

问题可能在于 Next.js 如何处理环境变量。这是解决此问题的修订方法：

1. 定义环境变量：

在项目的根目录中创建一个名为 .env.local 的文件（不在版本控制中跟踪）。

在 .env.local 中，定义您的 Appwrite 端点和项目 ID：

`APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1

APPWRITE_PROJECT=663feb9e0027da7135b2`

2. 加载环境变量（Next.js 12 及更高版本）：

Next.js 12 及更高版本有一个内置的方法来访问环境变量。在项目的根目录中创建一个名为 next.config.js 的文件（如果不存在）。

将以下代码添加到next.config.js：

`JavaScript
module.exports = {
  reactStrictMode: true,
  env: {
    APPWRITE_ENDPOINT: process.env.APPWRITE_ENDPOINT,
    APPWRITE_PROJECT: process.env.APPWRITE_PROJECT,
  },
};`

此代码将 .env.local 中的环境变量公开到 process.env 下的应用程序。

3. 在Appwrite代码中使用环境变量：

修改现有的 appwrite.ts 文件以使用环境变量：

打字稿

import { Client, Account } from 'appwrite';

export const client = new Client();

`client
  .setEndpoint(process.env.APPWRITE_ENDPOINT)
  .setProject(process.env.APPWRITE_PROJECT);

export const account = new Account(client);
export { ID } from 'appwrite';`

4. 服务器端使用（可选）：

如果您在服务器端使用 Appwrite（例如，在 API 路由中），则此方法可以无缝运行。 5. 客户端使用（Next.js 12 及更高版本）：

如果您需要在客户端（浏览器）上使用 Appwrite，您仍然可以在 Next.js 12 及更高版本中使用环境变量：

在 .env.local 中为环境变量添加 NEXT_PUBLIC_ 前缀：

`NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT=663feb9e0027da7135b2`

使用 appwrite.ts 访问它们

`process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT
 process.env.NEXT_PUBLIC_APPWRITE_PROJECT.`

使用环境变量时将其转换为字符串。这是一些示例-

client
.setEndpoint(String(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT))
.setProject(String(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID))

通过这些调整，您的代码应该可以使用环境变量，从而可以更轻松地进行配置，而无需在代码中直接包含敏感信息。