完成MSAL OAuth认证流程后Next.js返回错误的排查求助

我在使用Next.js搭建生产环境网站时，集成MSAL通过Azure AD实现身份认证，完成OAuth循环流程后出现报错。此前我用Express开发，对Next.js不熟悉，调研后尝试用<React.Fragment>修复但未解决问题。

报错截图 #

相关代码 #

index.js（主页面） #

import {
    AuthenticatedTemplate,
    UnauthenticatedTemplate,
    useMsal,
} from '@azure/msal-react';
import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';
import { Logo } from '../services/components'
import * as React from 'react';

function SignInButton() {
    // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
    const { instance } = useMsal();

    return (<button onClick={() => instance.loginRedirect()} className={styles.auth }><h2>Sign In</h2></button>);
}

function SignOut() {
    const { instance } = useMsal();

    return (
        <div className={styles.grid}>
            <button onClick={ () => instance.logoutRedirect() } className={styles.auth}>
                <h2>Sign Out</h2>
            </button>
        </div>
        )
}

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
            </Head>
            <AuthenticatedTemplate>
                <title>SD Menu</title>
                <main className={styles.main }>
                    <div className={styles.container}>
                        <div className={styles.grid}>
                            <Logo />
                        </div>
                            <p className={styles.description}>
                            Choose a service from below.
                        </p>
                <div className={styles.grid}>

                    <Link href="/pcdecomservice" className={styles.card}>
                        <h2>Decomission a Computer</h2>
                        <p>Decomission a computer automatically in line with the SOP.</p>
                    </Link>
                    <Link href="/" className={styles.card}>
                        <h2>Create a New User</h2>
                        <p>Create a new user with predefined groups and settings.</p>
                    </Link>
                    <Link href="/" className={styles.card}>
                        <h2>Enable a mailbox</h2>
                        <p>Enable a mailbox for use.</p>
                    </Link>
                            </div>
                        <SignOut/>

                    </div>

                </main>
                </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <title>SD Login</title>
                <div className={styles.container}>
                    <div className={styles.main}>
                        <div className={styles.grid}>
                            <Logo />
                        </div>
                        <p className={styles.description}>
                            Please sign in to access this service
                        </p>
                        <div className={styles.grid}>
                            <SignInButton />
                        </div>
                    </div>
                </div>
            </UnauthenticatedTemplate>
        </div>
    );
}

Components.js #

import Image from 'next/image';

export function Logo() {
    return (
        <Image
            src="https://upload.wikimedia.org/wikipedia/en/thumb/b/bb/Kingspan_Group_%28building_materials_company%29_logo_with_lion.svg/220px-Kingspan_Group_%28building_materials_company%29_logo_with_lion.svg.png"
            alt="Kingspan Logo"
            width="220"
            height="108"
        />
        )
}

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