Question

我正在尝试使用NextJS 9.5版加载环境变量。

在下面的官方NextJS文档之后，我在项目的根目录下创建了一个名为.env.production的文件：https://nextjs.org/docs/basic-features/environment-variables

这是我的环境文件内容：

# APP VARIABLES
# ...

# Webservices
NEXT_PUBLIC_WEBSERVICE_HOST=$WEBSERVICE_HOST

# Keycloak
NEXT_PUBLIC_KEYCLOAK_HOST=$KEYCLOAK_HOST
NEXT_PUBLIC_KEYCLOAK_REALM=$KEYCLOAK_REALM
NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=$KEYCLOAK_CLIENT_ID

我还需要这些变量在浏览器上也可用，因此我在环境变量名称前加上了NEXT_PUBLIC_。

启动应用后，我可以看到环境文件已正确加载：

> project@ start /app
> NODE_ENV=production node dist/server/server.js
info  - Loaded env from /app/.env.production
> Config - API host: https://<redacted>
> Config - Keycloak host: https://<redacted>
> Ready on localhost:3000 - env production

但是在浏览器中，当我尝试使用这段代码调用API时

const keycloakUrl = process.env.NEXT_PUBLIC_KEYCLOAK_HOST as string
const keycloakRealm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM as string
export const clientId = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID as string

const instance = axios.create({
  baseURL: `${keycloakUrl}/auth/realms/${keycloakRealm}`,
  timeout: 30000,
})

# ...

instance.post('/').catch(console.err);

调用API时，我看到变量keycloakUrl和keycloakRealm为空。

我该如何解决这个问题？

NextJS未加载环境文件

0 个答案: