这个问题可能是由于下一步(Next.js)和 Amplify 框架之间的一些容错性问题造成的。解决这个问题的一种方法是采用以下步骤:
首先,从您的 Next.js 应用程序中导出 _app.js 文件(如果它不存在,请创建一个)。
然后,在 _app.js 文件中,导入和包装您的组件:
import { Amplify } from "aws-amplify";
import { AmplifyAuthenticator, AmplifySignIn } from "aws-amplify-react";
import awsconfig from "../aws-exports";
Amplify.configure(awsconfig);
export default function App({ Component, pageProps }) {
return (
);
}
这段代码包括从导入 aws-amplify,aws-amplify-react 和 aws-exports,使用 Amplify.configure() 初始化 Amplify 配置,将 App 函数组件导出为默认值,并将其 Component 和pageProps 进行包装。这样可以确保您的应用程序从 Amplify 的 AmplifyAuthenticator 和 AmplifySignIn 组件接收用户上下文信息,并在应用程序加载时初始化 Amplify 配置。
举个例子,这是一个使用 AmplifyAuthenticator 挂钩进行身份验证的简单组件:
import { withAuthenticator } from "aws-amplify-react";
function Home() {
return (
Welcome Home
);
}
export default withAuthenticator(Home);
在 withAuthenticator 挂钩中嵌套的