为何Next.js的_app组件中session始终为undefined？

你在_app里直接使用pageProps.session导致值始终undefined，核心原因有两点：

• pageProps.session需要页面通过getServerSideProps或getInitialProps主动获取并传递，若页面没配置这些方法，这个值就不会存在。
• 即使服务器端传递了session，客户端路由跳转时pageProps不会自动更新，无法同步登录状态变化。

改用Next-Auth提供的useSession钩子在客户端获取实时session状态，同时处理加载状态避免页面闪屏：

修改后的代码如下：

import { type AppType } from "next/app";
import { SessionProvider, useSession } from "next-auth/react";
import { api } from "../utils/api";
import "../styles/globals.css";
import Layout from "../components/layout";

const MyApp: AppType = ({ Component, pageProps }) => {
  // 抽离子组件确保在SessionProvider内部使用useSession
  const AppContent = () => {
    const { data: session, loading } = useSession();
    
    // 加载中可显示占位符/骨架屏
    if (loading) return <div>加载中...</div>;

    return (
      <>
        {session ? (
          <Layout>
            <Component {...pageProps} />
          </Layout>
        ) : (
          <Component {...pageProps} />
        )}
      </>
    );
  };

  return (
    <SessionProvider session={pageProps.session}>
      <AppContent />
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);

• useSession必须在SessionProvider内部使用，所以把内容逻辑抽成子组件AppContent，确保钩子能正常工作。
• 加入loading状态判断，避免登录状态未确认时页面出现错误或闪屏。
• 无需再从pageProps解构session，useSession会自动从SessionProvider获取最新状态，包括客户端登录后的实时更新。

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