因为NextJS是在服务器端呈现的，所以您需要使用 getServerSideProps 检查身份验证，或者在重定向之前在前端显示一个加载指示器。

检查身份验证客户端

创建一个包装器组件并将其放入 _app.js 文件中。通过在用户仍在进行身份验证时显示加载组件，可以防止显示私有仪表板。注意:因为Next.js是在服务器端呈现的，所以它总是在JS恢复状态之前出现。这意味着，第一次绘制总是在重定向开始之前发生。

import { useRouter } from 'next/router'
export const AuthCheck = (props) => {
  const router = useRouter()
  const user = useUser() // you need to implement this. In this example, undefined means things are still loading, null means user is not signed in, anything truthy means they're signed in
  if (typeof window !== 'undefined' && user === null) router.push('/sign-in')
  if(!user) return <Loading /> // a loading component that prevents the page from rendering
  return props.children
}

然后在你的 _app.js 中

const MyApp = ({ Component, pageProps }) => {
  return (
    <AuthCheck>
      <Component {...pageProps} />
    </AuthCheck>
export default MyApp

检查身份验证服务器端

假设您已经设置了代码来检查服务器端的身份验证，您可以使用此模式。注意:您需要将此代码添加到每个页面。 getServerSideProps does not work with _app.js 或 _document.js

export const getServerSideProps = async () => {
  const isAuthenticated = await checkAuthentication() // you need to implement this