_app.js

_app.js

import { Amplify } from "aws-amplify";
import { AmplifyAuthenticator } from "@aws-amplify/ui-react";
import awsExports from "../src/aws-exports";
import "../styles/globals.css";
Amplify.configure({ ...awsExports, ssr: true });
function MyApp({ Component, pageProps }) {
  return (
    <AmplifyAuthenticator>
      <Component {...pageProps} />
    </AmplifyAuthenticator>
  );
}
export default MyApp;

This did not work me.
I had to update it to:

import { Amplify } from "aws-amplify";
import { Authenticator } from "@aws-amplify/ui-react";
import awsExports from "../src/aws-exports";
import "../styles/globals.css";

Amplify.configure({ ...awsExports, ssr: true });
function MyApp({ Component, pageProps }) {
  return (
    <Authenticator>
      <Component {...pageProps} />
    </Authenticator>
  );
}
export default MyApp;

FYI, I retrieved the orignal snippet from https://enlear.academy/complete-guide-to-amplify-and-next-js-7dd2b683282a