如何让NextAuth适配Next.js 13的/src/app目录路由？

核心配置说明 #

• 你当前pages.signIn的写法本身是有效的，只要/auth/signin对应的路由文件（page.js/page.tsx）确实存在于/src/app/auth/signin目录下，NextAuth就能正确识别并跳转至该页面。
• 注意NextAuth在App Router下的初始化路径：必须在/src/app/api/auth/[...nextauth]/route.js（或.ts）文件中导出配置，不能沿用Pages Router的/pages/api/auth/[...nextauth].js路径。

完整配置示例 #

// src/app/api/auth/[...nextauth]/route.js
import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth"; // 可将authOptions抽离至单独目录维护

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

// src/lib/auth.js 你的authOptions配置文件
export const authOptions = {
  session: {
    strategy: "jwt",
  },
  providers: [
    // 在此填入你的登录服务商配置，如Google、GitHub等
  ],
  pages: {
    signIn: "/auth/signin", // 对应src/app/auth/signin/page.js
    // 可按需配置其他自定义页面：
    // signOut: "/auth/signout",
    // error: "/auth/error",
  },
  callbacks: {
    // 可自定义登录后的重定向逻辑
    async redirect({ url, baseUrl }) {
      // 示例：登录成功后重定向至主页，或指定路径如`${baseUrl}/dashboard`
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
  },
};

额外注意事项 #

• 自定义登录页面/src/app/auth/signin/page.js中，需使用useSession或getServerSession来对接NextAuth的登录逻辑。
• 在App Router的服务器组件中获取会话，直接调用getServerSession(authOptions)即可。

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