Next.js 13 App目录下NextAuth谷歌登录触发页面下载而非跳转

1. 检查NextAuth API路由的App Router适配 #

确保app/api/auth/[...nextauth]/route.ts使用App Router的正确导出方式，不要沿用Pages Router的写法：

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

// 必须导出handlers、auth等对象，而非默认导出NextAuth实例
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  // 可选：配置回调、session策略等
  session: {
    strategy: "jwt",
  },
});

错误的默认导出（export default NextAuth(...)）会导致App Router下的API响应头异常，触发浏览器下载行为。

2. 修正前端登录按钮的调用方式 #

在客户端组件中使用NextAuth提供的signIn函数触发登录，避免直接通过<a>标签跳转API路由：

"use client";

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

export function LoginButton() {
  return (
    <button onClick={() => signIn("google")}>
      登录谷歌账号
    </button>
  );
}

直接跳转/api/auth/signin/google会绕过NextAuth的客户端逻辑，可能导致响应解析错误。

3. 排查Middleware或自定义响应头干扰 #

如果使用了middleware.ts，确保没有修改NextAuth相关请求的响应头，比如误加Content-Disposition: attachment这类会触发下载的头。示例正确的Middleware配置（仅保护指定路由）：

export { auth as middleware } from "@/app/api/auth/[...nextauth]/route";

export const config = {
  matcher: ["/dashboard/:path*"],
};

4. 验证Google OAuth回调URL配置 #

在Google Cloud控制台的OAuth 2.0客户端设置中，确认回调URL与你的部署地址一致：

• 本地开发：http://localhost:3000/api/auth/callback/google
• 生产环境：https://你的域名/api/auth/callback/google
  回调URL不匹配会导致NextAuth返回错误响应，浏览器可能将错误页面识别为文件下载。

5. 分析下载文件内容定位问题 #

如果下载的是HTML或JSON内容，说明响应的Content-Type被错误设置为application/octet-stream：

• 检查是否有第三方库或自定义代码修改了API请求的响应类型
• 确认NextAuth版本是否适配Next.js 13 App目录（建议使用next-auth v4.20+版本）

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