Next-Auth signOut函数跳转至127.0.0.1无法连接问题求助

问题原因 #

该问题通常是因为Next-Auth默认回调URL配置错误，或未显式指定退出后的跳转地址，导致signOut函数默认指向未正确配置的127.0.0.1地址。

解决方案 #

1. 调用signOut时显式指定回调地址 #

直接在signOut函数中传入callbackUrl参数，指定退出后要跳转的目标页面（比如登录页）：

"use client";
import React from "react";
import { signOut } from "next-auth/react";

const Logout = () => {
  return (
    <div>
      <button
        type="button"
        onClick={() => signOut({ callbackUrl: "/login" })}
        className="bg-indigo-700 p-2 rounded-md"
      >
        Logout
      </button>
    </div>
  );
};

export default Logout;

注：将type="submit"改为type="button"，避免触发不必要的表单提交默认行为。

2. 在Next-Auth全局配置中设置默认退出回调地址 #

找到项目中的auth.ts或[...nextauth].ts配置文件，在authOptions内添加pages配置，统一指定signOut后的默认跳转页：

import NextAuth from "next-auth";
import { authOptions } from "./authOptions";

export default NextAuth({
  ...authOptions,
  pages: {
    signOut: "/login", // 设置退出后默认跳转至登录页
  },
});

3. 检查环境变量NEXTAUTH_URL配置 #

确保项目根目录的.env文件中，NEXTAUTH_URL设置为当前项目的实际访问地址（开发环境通常为http://localhost:3000）：

NEXTAUTH_URL=http://localhost:3000

若未配置该变量，Next-Auth会自动使用127.0.0.1作为默认地址，若项目运行在localhost或其他端口，就会出现连接失败问题。

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