Next.js 下一个JS+；下一个受身份验证保护的页面在重定向后加载秒

我正试图通过以下方式重定向到受保护的页面：

<button
  onClick={() => {
    router.push("/welcome");
  }}
>

import { useSession, signOut } from "next-auth/client";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Welcome() {
  const [session, loading] = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !session?.accessToken) {
      router.push("/auth/login");
    }
  }, [loading, session]);

  if (!session) {
    return <div></div>;
  }
  return (
    <div>
      <h1>Welcome Page</h1>
    </div>
  );
}

{
路由器推送（“/欢迎”）；
}}
>

欢迎页面的保护方式如下：

<button
  onClick={() => {
    router.push("/welcome");
  }}
>

import { useSession, signOut } from "next-auth/client";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Welcome() {
  const [session, loading] = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !session?.accessToken) {
      router.push("/auth/login");
    }
  }, [loading, session]);

  if (!session) {
    return <div></div>;
  }
  return (
    <div>
      <h1>Welcome Page</h1>
    </div>
  );
}

从“下一个身份验证/客户端”导入{useSession，signOut}；
从“下一个/路由器”导入{useRouter}；
从“react”导入{useffect}；
导出默认函数Welcome（）{
const[session，loading]=useSession（）；
const router=useRouter（）；
useffect（（）=>{
如果（！加载&&！会话？.accessToken）{
router.push（“/auth/login”）；
}
}，[加载，会话]；
如果（！会话）{
返回；
}
返回(
欢迎页面
);
}

如果我尝试直接访问欢迎页面，它就可以正常工作。 但如果我使用router.push（），则需要几秒钟才能加载。这通常发生在使用浏览器的“后退”按钮从欢迎页面返回，然后再次按下按钮之后。尽管有时也会发生

我做错了什么？我被告知这是开发环境的正常行为，但它也发生在生产构建中

这是复制品：

---

我通过在_app.tsx中包装我的组件解决了这个问题，提供程序如下：

<Provider session={pageProps.session}>
  <Component {...pageProps} />
</Provider>;

---

到服务器端呈现的页面，如解释。

您是否尝试过向

页面/u app.js添加文档中提到的内容？是的，它解决了问题！谢谢