authentication - 如何使 NextAuth.js 在 Next.js 网站中与 SSG（生成的静态站点）一起使用

Question

Next.js 允许您使用服务器端 (SSR) 或静态客户端 (SSG) 呈现来构建您的站点，但是当您运行next build && next export它时会删除/api路由。

例如，由于 NextAuth.js 依赖于这些路由，/api/auth/signin您如何为 SSG 实现 NextAuth.js？

Answer 1

Yesnext-auth可以同时验证后端和前端。您想要的功能getSession()在后端和前端都可用。但是，您不能对静态生成的站点执行此操作，因为它们是在构建时评估的。不过，您可以通过服务器端渲染来做到这一点。

这是一个示例服务器端呈现的 Page Auth Guard

export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        permanent: false,
        destination: "/login",
      },
    };
  }

  return {
    props: {
      session,
    },
  };
}

这是一个示例 API 身份验证

import { getSession } from "next-auth/client"

export default async (req, res) => {
  const session = await getSession({ req })
  /* ... */
  res.end()
}