NextAuth无法获取session求助：404错误及JSON解析失败

1. App Router下NextAuth API路由路径错误 #

App Router要求API路由必须放在route.js文件中，而非直接使用[...nextauth].js。你当前的文件路径不符合规范，需调整：

• 创建文件夹：app/api/auth/[...nextauth]/
• 将原代码迁移至该文件夹下的route.js，并补充缺失的配置：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        // 指向你的登录验证API，而非前端页面
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: credentials?.username,
            password: credentials?.password,
          }),
        });

        const user = await res.json();
        // 增加请求成功判断，避免解析错误响应
        if (user && res.ok) {
          return user;
        } else {
          return null;
        }
      },
    }),
  ],
  pages: {
    signIn: "/login",
  },
  // CredentialsProvider必须指定JWT会话策略
  session: {
    strategy: "jwt",
  },
};

const handler = NextAuth(authOptions);
// App Router需导出GET/POST方法
export { handler as GET, handler as POST };

2. Authorize方法中Fetch路径错误 #

原代码fetch("/login")会请求前端登录页面（返回HTML），而非后端验证接口。你需要：

• 创建对应的登录API路由（如app/api/login/route.js）处理用户名密码验证
• 或替换为你的后端服务地址（如https://your-backend.com/login）
• 使用process.env.NEXTAUTH_URL确保路径适配不同环境

3. 登录页表单提交未阻止默认行为 #

表单提交会触发页面刷新，中断NextAuth登录流程，需在submitHandler中阻止默认行为：

async function submitHandler(event) {
  event.preventDefault(); // 新增此行
  const result = await signIn("credentials", {
    username: state.username,
    password: state.password,
    redirect: true,
    callbackUrl: "/admin",
  });
}

4. SessionProvider包裹确认 #

确保根layout.js正确用SessionProvider包裹所有子组件：

// app/layout.js
import { SessionProvider } from "next-auth/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

5. 依赖与基础检查 #

确认已正确安装依赖：

npm install next-auth

完成以上修改后，重启开发服务器即可解决404及JSON解析错误问题。

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