AWS Amplify是否兼容NextJS？安装后遇React缺失及window未定义问题

嘿，我之前在搭建NextJS + Amplify项目时也踩过这两个坑，主要是NextJS的服务端渲染特性和Amplify的浏览器端API之间的冲突，咱们一步步来搞定：

1. 解决「React module missing」问题 #

这个问题大概率是依赖安装不完整或者模块解析异常导致的，你可以按以下步骤排查：

• 先确认你的项目里已经安装了react和react-dom，执行命令：

  npm install react react-dom
  

• 检查package.json文件，确保react和react-dom已经出现在dependencies列表中，如果之前是全局安装的，可能需要本地安装一次让NextJS能正确解析。

2. 解决「window is not defined」问题 #

这个是NextJS服务端渲染的典型问题——服务端没有浏览器的window对象，而Amplify的初始化代码会在服务端执行时尝试访问它。解决方法有两种，选你觉得顺手的就行：

方法一：用useEffect在客户端初始化Amplify #

把Amplify的配置代码放到React的useEffect钩子中，这个钩子只会在浏览器端执行：

import React, { useEffect } from 'react'
import Amplify from 'aws-amplify';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 仅在客户端执行Amplify配置
    Amplify.configure({ 
      Auth: { 
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', 
        region: 'XX-XXXX-X', 
        // 你的其他Auth配置项...
      }
    });
  }, []); // 空依赖数组确保只执行一次

  return <Component {...pageProps} />
}

export default MyApp

方法二：动态导入Amplify #

通过动态导入的方式，让Amplify只在客户端加载：

import React, { useEffect } from 'react'

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const initAmplify = async () => {
      // 动态导入Amplify，仅在客户端执行
      const Amplify = await import('aws-amplify');
      Amplify.configure({ 
        Auth: { 
          identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', 
          region: 'XX-XXXX-X', 
          // 你的其他Auth配置项...
        }
      });
    };
    initAmplify();
  }, []);

  return <Component {...pageProps} />
}

export default MyApp

额外提示 #

如果你用的是较新版本的AWS Amplify，建议换成@aws-amplify/ui-react替代旧的aws-amplify-react，它对NextJS的支持更好，很多兼容性问题已经被修复了。

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