Next.js(v14.0.3)客户端适配环境设置BASE_URL的方法

云上老周

2026-6-21

Next.js 14 + AWS Amplify Cognito 环境变量配置问题解答

是的，客户端侧必须用带NEXT_PUBLIC_前缀的环境变量，这是Next.js的核心机制决定的。

Next.js的环境变量规则很明确：不带NEXT_PUBLIC_前缀的变量只会保留在服务端环境中，不会被打包到客户端代码里，所以客户端代码访问这类变量必然返回undefined；只有带NEXT_PUBLIC_前缀的变量才会被注入到客户端打包产物，客户端才能正常读取。

给你具体的实现步骤：

配置环境变量文件
在项目根目录创建对应的环境文件：
- 开发环境文件.env.development：
```
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```
- 生产环境文件.env.production：
```
NEXT_PUBLIC_BASE_URL=https://my-prod-site.com
```

在Amplify Auth配置中使用该变量
修改你的Amplify配置代码，直接引用process.env.NEXT_PUBLIC_BASE_URL：

import { Amplify } from 'aws-amplify';

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: '你的用户池ID',
      userPoolClientId: '你的客户端ID',
      oauth: {
        domain: '你的Cognito域名',
        redirectSignIn: `${process.env.NEXT_PUBLIC_BASE_URL}/auth/callback`,
        redirectSignOut: `${process.env.NEXT_PUBLIC_BASE_URL}/`,
        scope: ['email', 'openid'],
        responseType: 'code'
      }
    }
  }
});