使用next-intl的Next.js应用中Clerk登录出现404/500错误求助

我正在开发一个使用Clerk做身份认证、next-intl做多语言国际化的Next.js应用。此前功能正常，但实现登录功能后，访问登录页面时出现以下问题：

• 基础路径下访问/sign-in返回404错误
• /es/本地化路径下访问出现浏览器500错误（非Next.js 404）
• 控制台有时先显示200状态码，随后变为404

配置信息 #

环境变量 #

已设置以下环境变量：

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

曾尝试替换为/:locale/sign-in，问题仍未解决。

认证页面文件夹结构 #

locale
└── auth
    ├── sign-in
    │   └── [[...sign-in]]
    │       └── page.jsx
    └── sign-up
        └── [[..sign-up]]
            └── page.jsx

代码片段 #

middleware.js #

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import createMiddleware from "next-intl/middleware";
import { locales, defaultLocale } from "./config";

// 受保护路由
const isProtectedRoute = createRouteMatcher([
  "/:locale/dashboard(.*)",
  "/:locale/account(.*)",
]);

// 国际化中间件
const intlMiddleware = createMiddleware({
  locales,
  defaultLocale,
  localePrefix: "as-needed",
});

// 合并Clerk与next-intl中间件
export default clerkMiddleware(async (auth, req) => {
  const { userId, redirectToSignIn } = await auth();

  if (!userId && isProtectedRoute(req)) {
    // 从当前路径提取语言环境
    const locale = req.nextUrl.pathname.split("/")[1] || defaultLocale;

    return redirectToSignIn({
      returnBackUrl: `/${locale}/sign-in`,
    });
  }

  return intlMiddleware(req);
});

export const config = {
  matcher: ["/", "/(en|es)/:path*"],
};

登录页（[[...sign-in]]/page.jsx） #

import { SignIn } from "@clerk/nextjs";
import React from "react";

export const Page = () => {
  return <SignIn />;
};

export default Page;

注册页（[[...sign-up]]/page.jsx） #

import { SignUp } from '@clerk/nextjs'
import React from 'react'

export const Page = () => {
  return (
    <SignUp />
  )
}

export default Page;

Header组件（带登录按钮） #

import { SignedOut, SignInButton, UserButton, SignedIn } from "@clerk/nextjs";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { Button } from "./ui/button";
import { LayoutDashboard, PenBox } from "lucide-react";
import { useTranslations, useLocale } from "next-intl";
import { checkUser } from "@/lib/checkUser";

const Header = async () => {
  const t = useTranslations("Header");
  const locale = useLocale();

  await checkUser();

  return (
    <div className="fixed top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b">
      <nav className="container mx-auto px-4 py-4 flex items-center justify-between">
        <Link href={`/${locale}`}>
          <Image
            src="/logo.png"
            alt="financer logo"
            height={60}
            width={200}
            className="h-12 w-auto object-contain"
          />
        </Link>

        <div className="flex items-center space-x-4">
          <SignedIn>
            <Link
              href={`/${locale}/dashboard`}
              className="text-gray-600 hover:text-blue-600 flex items-center gap-2"
            >
              <Button variant="outline">
                <LayoutDashboard size={18} />
                <span className="hidden md:inline">{t("dashboard")}</span>
              </Button>
            </Link>

            <Link href={`/${locale}/transaction/create`}>
              <Button className="flex items-center gap-2">
                <PenBox size={18} />
                <span className="hidden md:inline">{t("add_transaction")}</span>
              </Button>
            </Link>
          </SignedIn>

          <SignedOut>
            <SignInButton
              signInUrl={`/${locale}/sign-in`}
              forceRedirectUrl={`/${locale}/dashboard`}
            >
              <Button variant="outline">{t("login")}</Button>
            </SignInButton>
          </SignedOut>
          <SignedIn>
            <UserButton
              appearance={{
                elements: {
                  avatarBox: "w-10 h-10",
                },
              }}
            />
          </SignedIn>
        </div>
      </nav>
    </div>
  );
};

export default Header;

已尝试方案 #

• 调整环境变量中的URL配置
• 遵循Clerk和next-intl官方文档配置

技术栈版本 #

• Next.js：15.3.1
• Clerk：6.18.0
• next-intl：4.1.0

内容的提问来源于stack exchange，提问作者Gustavo Oliveira