Next.js中从受保护页面登出时出现Clerk 404错误的求助

问题原因 #

点击Clerk内置的<UserButton/>登出时，Clerk会先向当前路由（这里是/dashboard）发送POST请求执行登出逻辑，但你的/dashboard是GET路由，没有对应的POST处理端点，因此返回404，完成登出流程后才会重定向到首页。

解决方案建议 #

方案1：在Middleware中放行Clerk登出请求

修改Middleware逻辑，允许Clerk的内部登出POST请求通过，无需走登录校验：

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const publicRoutes = [
  '/',
  '/browse',
  '/sign-in(.*)',
  '/sign-up(.*)',
];

const isPublicRoute = createRouteMatcher(publicRoutes);

export default clerkMiddleware(
  (auth, request) => {
    // 识别Clerk内部登出请求：POST方法 + 携带Clerk认证头
    const isClerkLogoutRequest = request.method === 'POST' && 
      request.headers.get('Clerk-Auth-Version') !== undefined;
    
    // 仅对非公开路由、非登出请求执行登录校验
    if (!isPublicRoute(request) && !isClerkLogoutRequest) {
      auth().protect();
    }
  },
  { debug: true }
);

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};

方案2：为/dashboard添加POST端点

给/dashboard路由添加一个空的POST处理逻辑，避免无对应端点导致的404：

App Router 写法（app/dashboard/route.js）：

export async function POST() {
  // 无需额外逻辑，仅返回200状态码即可
  return new Response(null, { status: 200 });
}

Pages Router 写法（pages/dashboard.js）：

export default function Dashboard() {
  // 你的页面内容
}

export async function POST(req, res) {
  res.status(200).end();
}

方案3：自定义UserButton登出跳转

直接指定登出后的跳转地址，跳过向当前页面发送POST请求的步骤：

import { UserButton } from '@clerk/nextjs';

function Dashboard() {
  return (
    <UserButton afterSignOutUrl="/" />
  );
}

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