Next.js中_app.js无法使用getServerSideProps及导航鉴权问题

当前实现的问题 #

1. NavBar无法获取页面的session：你将<NavBar />放在_app.js中，但页面组件里getServerSideProps返回的session仅传递给页面组件（即<Component {...pageProps} />），_app.js中的<NavBar />无法直接拿到这个session，因此没法根据会话状态控制登录/退出选项的显示。
2. getServerSideProps未执行：
   • 首先确认该函数是写在pages目录下的页面组件文件（如pages/index.js）中，getServerSideProps仅能在页面组件中生效，组件或_app.js中单独写不会触发。
   • 检查终端日志而非浏览器控制台：getServerSideProps在服务端执行，console.log的内容会输出在启动Next.js的终端里，而非浏览器控制台。
   • 若页面同时存在getStaticProps，getServerSideProps会被忽略，两者不能共存。

优化方案 #

方案1：在自定义_app.js中全局获取session（推荐用于服务端渲染场景） #

既然<NavBar />是全局组件，直接在_app.js中通过getServerSideProps获取session，所有页面都会在服务端完成会话校验，再将session传递给<NavBar />。

代码示例：

// pages/_app.js
import { getSession } from 'next-auth/react';
import NavBar from '../components/NavBar';

export default function MyApp({ Component, pageProps, session }) {
  return (
    <>
      <NavBar session={session} />
      <Component {...pageProps} />
    </>
  );
}

// 全局服务端获取session
export async function getServerSideProps(context) {
  try {
    const session = await getSession(context);
    return {
      props: { session }
    };
  } catch (error) {
    return {
      props: { session: null }
    };
  }
}

在<NavBar />中接收session并控制显示：

// components/NavBar.js
import { signIn, signOut } from 'next-auth/react';

export default function NavBar({ session }) {
  return (
    <nav>
      {/* 其他导航元素 */}
      {session ? (
        <button onClick={() => signOut()}>退出登录</button>
      ) : (
        <button onClick={() => signIn()}>登录</button>
      )}
    </nav>
  );
}

方案2：在NavBar中直接使用useSession钩子（客户端获取场景） #

如果不需要服务端渲染导航的会话状态（比如对SEO无要求），可以直接在<NavBar />中使用Next-Auth提供的useSession钩子，无需编写getServerSideProps。

代码示例：

// components/NavBar.js
import { useSession, signIn, signOut } from 'next-auth/react';

export default function NavBar() {
  const { data: session } = useSession();

  return (
    <nav>
      {/* 其他导航元素 */}
      {session ? (
        <button onClick={() => signOut()}>退出登录</button>
      ) : (
        <button onClick={() => signIn()}>登录</button>
      )}
    </nav>
  );
}

此时_app.js无需做任何修改，直接渲染<NavBar />即可，useSession会自动在客户端完成会话状态的获取与同步。

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