Clerk+Next.js中SignOutButton的signOutOptions重定向失效问题

问题分析 #

你的代码语法无误，控制台无报错，且/sign-in路径可正常访问，但通过signOutOptions设置重定向未生效，大概率是Clerk组件属性名不匹配或配置冲突导致。

解决方案1：修正组件属性名 #

部分Clerk版本中，SignOutButton的重定向参数属性名不是signOutOptions，而是signOutParams。尝试替换属性名：

<SignedIn>
  <SignOutButton signOutParams={{ redirectUrl: "/sign-in" }}>
    <div className="flex cursor-pointer gap-4 p-4">
      <Image
        src="/assets/logout.svg"
        alt="logout"
        width={24}
        height={24}
      />
      <p className="text-light-2 max-lg:hidden">Logout</p>
    </div>
  </SignOutButton>
</SignedIn>

解决方案2：手动实现登出+重定向 #

如果组件自带参数仍不生效，可使用Clerk的useSignOut钩子手动控制流程，灵活性更高：

1. 导入useSignOut钩子：

import { SignOutButton, SignedIn, useSignOut } from "@clerk/nextjs";

2. 在组件内初始化钩子并编写登出逻辑：

export default function LeftSidebar() {
  const router = useRouter();
  const pathname = usePathname();
  const { signOut } = useSignOut();

  const handleLogout = async () => {
    await signOut();
    router.push("/sign-in");
  };

  return (
    <section className="custom-scrollbar leftsidebar">
      {/* 原有侧边栏代码 */}
      <div className="mt-10 px-6">
        <SignedIn>
          <div 
            className="flex cursor-pointer gap-4 p-4"
            onClick={handleLogout}
          >
            <Image
              src="/assets/logout.svg"
              alt="logout"
              width={24}
              height={24}
            />
            <p className="text-light-2 max-lg:hidden">Logout</p>
          </div>
        </SignedIn>
      </div>
    </section>
  );
}

解决方案3：检查全局Clerk配置 #

检查项目中的Clerk配置文件（如middleware.ts、clerk.config.ts），确认是否存在全局登出重定向设置（如signOutUrl），若有则会覆盖组件级别的参数，需调整全局配置或移除冲突项。

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