NextAuth.js CLIENT_FETCH_ERROR求助：JSON解析失败问题

遇到NextAuth.js Google Provider认证错误：

[next-auth][error][CLIENT_FETCH_ERROR] 
Unexpected token '<', "<!DOCTYPE "... is not valid JSON 
{error: {…}, url: '/api/auth/session', message: `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`

已确认以下配置无误：

• 环境变量正确配置Google Client ID和Secret；
• NextAuth的GoogleProvider使用了正确的clientId和clientSecret；
• 已用SessionProvider包裹根组件以提供会话数据。

相关配置代码：

api/auth/[...nextauth].js #

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

export { handler as GET, handler as POST };

AuthProvider.js #

import { SessionProvider } from "next-auth/react";

const AuthProvider = ({ children }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default AuthProvider;

RootLayout.js #

import { Inter } from "next/font/google";
import { ThemeProvider } from "../context/ThemeContext";
import AuthProvider from "../app/components/AuthProvider/AuthProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Testing",
  description: "This is the description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider>
          <AuthProvider>
            <div className="container">
              {children}
            </div>
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

1. 修正NextAuth路由文件路径（App Router适配） #

如果你的项目使用Next.js 13+的App Router，NextAuth的API路由必须遵循App Router的文件规则：

• 将现有api/auth/[...nextauth].js移动到app/api/auth/[...nextauth]/route.js，文件名改为route.js；
• 代码逻辑保持不变，依然导出GET和POST方法。

直接访问http://localhost:3000/api/auth/session，若返回JSON格式数据（即使是未登录状态的{"user": null, "expires": null}），说明路由配置生效。

2. 验证环境变量加载有效性 #

• 确保环境变量文件命名为.env.local（Next.js默认优先加载该文件，.env仅在构建阶段生效）；
• 在route.js中添加日志验证变量是否存在：

  console.log("GOOGLE_CLIENT_ID:", process.env.GOOGLE_CLIENT_ID);
  console.log("GOOGLE_CLIENT_SECRET:", process.env.GOOGLE_CLIENT_SECRET);
  

  启动项目后查看终端输出，若变量为undefined，检查变量名拼写是否一致，或重启开发服务器。

3. 核对版本兼容性 #

确保next-auth版本与Next.js版本匹配，Next.js 13.4+需要next-auth@4.20.0及以上版本：

• 执行npm list next next-auth查看版本；
• 版本不兼容时，升级next-auth到最新稳定版：

  npm install next-auth@latest
  

4. 检查SessionProvider配置（App Router场景） #

在App Router中使用SessionProvider时，若应用部署在子路径，需显式指定basePath：

<SessionProvider basePath="/your-subpath">{children}</SessionProvider>

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