NextJS中next-auth结合next-intl自定义登录页重定向异常

问题根源 #

NextAuth配置中pages.signIn设置为固定路径/auth/signin，无法动态适配多语言区域前缀（如en/），导致登录页内的NextAuth自动生成链接、重定向URL丢失locale信息，引发区域文件预加载失败。

解决方案 #

1. 动态生成带区域前缀的SignIn页面路径

修改src/pages/api/auth/[...nextauth].js，根据当前请求的locale动态拼接登录页路径：

import NextAuth from "next-auth";
// 导入你的身份验证提供商
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      // 你的提供商配置逻辑
    })
  ],
  pages: {
    // 动态生成带locale的登录页路径
    signIn: (req) => {
      // 从请求中获取当前locale（根据你的项目locale存储方式调整，比如cookie、路由参数）
      const locale = req.query.locale || req.cookies.NEXT_LOCALE || "en";
      return `/${locale}/auth/signin`;
    }
  },
  callbacks: {
    // 修正callbackUrl的区域前缀
    async redirect({ url, baseUrl }) {
      // 检查url是否已包含有效locale前缀
      const validLocales = ["en", "zh"]; // 替换为你的项目支持的locale列表
      const urlSegments = new URL(url).pathname.split("/");
      const hasValidLocale = validLocales.includes(urlSegments[1]);

      if (!hasValidLocale) {
        // 从请求或默认值获取当前locale，补全到callbackUrl
        const currentLocale = req.query.locale || "en";
        return `${baseUrl}/${currentLocale}${new URL(url).pathname}${new URL(url).search}`;
      }
      return url.startsWith(baseUrl) ? url : baseUrl;
    }
  }
});

2. 登录页内强制使用带区域前缀的路由

在自定义登录页src/pages/auth/signin.js中，通过useRouter获取当前locale，手动拼接所有跳转路径：

import { useRouter } from "next/router";
import { signIn } from "next-auth/react";
import Link from "next/link";

export default function SignInPage() {
  const router = useRouter();
  const { locale } = router;

  return (
    <div className="sign-in-container">
      {/* 登录按钮：指定带locale的callbackUrl */}
      <button 
        onClick={() => signIn("credentials", {
          callbackUrl: `/${locale}/about`,
          // 其他登录参数
        })}
      >
        登录
      </button>

      {/* 页面内跳转链接：强制带locale前缀 */}
      <Link href={`/${locale}/home`}>返回首页</Link>
      <Link href={`/${locale}/help`}>帮助中心</Link>
    </div>
  );
}

3. 确保Next.js多语言配置正确

在next.config.js中确认i18n配置生效，保证locale能被路由正确识别：

module.exports = {
  i18n: {
    locales: ["en", "zh"],
    defaultLocale: "en",
    localeDetection: true // 自动检测用户语言
  }
};

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