为何Amplify.configure()无法与.env文件配合使用？

关于.env文件的访问权限 #

NextJS里环境变量的访问规则是：

• 只有以NEXT_PUBLIC_开头的环境变量，才能在客户端组件（浏览器端运行的代码）中通过process.env读取；
• 不带这个前缀的变量，仅能在服务端环境（服务端组件、API路由、getServerSideProps等）中访问。

你之前的配置字段全为undefined，就是因为没有给.env.local里的Amplify配置项加上NEXT_PUBLIC_前缀，导致客户端的aws-exports.js读不到这些变量。

正确的Amplify配置步骤 #

1. 修改.env.local变量名 #

把所有Amplify相关的配置项都加上NEXT_PUBLIC_前缀，比如：

NEXT_PUBLIC_AWS_REGION=你的区域
NEXT_PUBLIC_AWS_COGNITO_USER_POOL_ID=你的用户池ID
NEXT_PUBLIC_AWS_COGNITO_CLIENT_ID=你的用户池客户端ID
# 其他Amplify配置项（比如OAuth、API、Storage等）同理添加前缀

2. 重构aws-exports.js #

用带前缀的环境变量构建Amplify配置对象：

const awsConfig = {
  Auth: {
    region: process.env.NEXT_PUBLIC_AWS_REGION,
    userPoolId: process.env.NEXT_PUBLIC_AWS_COGNITO_USER_POOL_ID,
    userPoolWebClientId: process.env.NEXT_PUBLIC_AWS_COGNITO_CLIENT_ID,
    // 如果有OAuth配置，也对应替换成带前缀的变量
    // oauth: {
    //   domain: process.env.NEXT_PUBLIC_AWS_COGNITO_DOMAIN,
    //   redirectSignIn: process.env.NEXT_PUBLIC_REDIRECT_SIGNIN,
    //   redirectSignOut: process.env.NEXT_PUBLIC_REDIRECT_SIGNOUT,
    //   responseType: 'code'
    // }
  }
  // 其他Amplify模块（如API、Storage）的配置也按此方式替换
};

export default awsConfig;

3. 初始化Amplify #

根据你的NextJS版本选择对应的初始化方式：

• Pages Router（NextJS 12及以下）：在_app.js中全局初始化：

import Amplify from 'aws-amplify';
import awsConfig from '../aws-exports';

Amplify.configure(awsConfig);

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

• App Router（NextJS 13+）：在根layout.tsx中用客户端组件初始化（因为Amplify需要在浏览器环境执行）：

'use client';
import { useEffect } from 'react';
import Amplify from 'aws-amplify';
import awsConfig from '../aws-exports';

export default function RootLayout({ children }) {
  useEffect(() => {
    Amplify.configure(awsConfig);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

4. 注意事项 #

• 修改.env.local后，必须重启NextJS开发服务器，新的环境变量才会生效；
• Amplify的客户端配置项（如用户池ID、客户端ID）本身就是公开的，不需要隐藏，所以可以放心使用NEXT_PUBLIC_前缀；
• 不要把真正的敏感信息（如AWS密钥）放到前端可访问的环境变量中，Amplify客户端初始化不需要这些敏感信息。

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