在Next.js中使用Clerk实现认证后重定向至之前路由

固定配置NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/只能跳转到指定首页，要实现回到登录前的路由，需要动态传递并保存原路径，以下是几种可行方案：

方案1：通过SignIn组件/按钮的redirectUrl prop动态传参 #

在触发登录的组件中，获取当前页面的完整路径，直接传给Clerk的登录组件：

'use client';

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

export default function LoginButton() {
  // 客户端环境下获取当前路径（包含query参数）
  const currentPath = typeof window !== 'undefined' 
    ? window.location.pathname + window.location.search 
    : '';

  return (
    <SignInButton
      signInProps={{
        // 优先传当前路径， fallback到首页
        redirectUrl: currentPath || '/',
      }}
    >
      <button>登录</button>
    </SignInButton>
  );
}

方案2：用Middleware全局拦截，自动保存原路径 #

适合需要全局校验登录状态的场景，未登录时自动跳转登录页并携带原路径，登录后自动跳转回去：

import { authMiddleware } from '@clerk/nextjs';
import { NextResponse } from 'next/server';

export default authMiddleware({
  // 配置无需登录即可访问的公共路由
  publicRoutes: ['/', '/about'],
  async beforeAuth(req) {
    const { pathname, search } = req.nextUrl;
    // 未登录且当前不是登录/注册页时，保存路径到search参数
    if (!req.auth && !['/sign-in', '/sign-up'].includes(pathname)) {
      const redirectTo = encodeURIComponent(pathname + search);
      const signInUrl = new URL('/sign-in', req.url);
      signInUrl.searchParams.set('redirect_url', redirectTo);
      return NextResponse.redirect(signInUrl);
    }
    return NextResponse.next();
  },
  afterAuth(auth, req) {
    // 登录成功后，从search参数取出原路径跳转
    if (auth.userId && req.nextUrl.pathname === '/sign-in') {
      const redirectUrl = req.nextUrl.searchParams.get('redirect_url');
      if (redirectUrl) {
        const parsedUrl = new URL(decodeURIComponent(redirectUrl), req.url);
        // 验证域名，防止open redirect攻击
        if (parsedUrl.origin === req.nextUrl.origin) {
          return NextResponse.redirect(parsedUrl);
        }
      }
      // 无有效路径时跳转首页
      return NextResponse.redirect(new URL('/', req.url));
    }
  },
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

方案3：自定义登录页面读取redirect参数 #

如果使用自定义的登录页面，直接从URL的search参数中获取原路径，传给Clerk的SignIn组件：

'use client';

import { SignIn } from '@clerk/nextjs';
import { useSearchParams } from 'next/navigation';

export default function CustomSignInPage() {
  const searchParams = useSearchParams();
  const redirectUrl = searchParams.get('redirect_url') || '/';

  return (
    <div className="login-container">
      <SignIn redirectUrl={redirectUrl} />
    </div>
  );
}

注意事项 #

• 始终验证redirectUrl的合法性，确保跳转目标是本站域名内的路径，避免被用于钓鱼攻击。
• 如果使用Server Components，需要通过路由参数或cookie传递原路径，不能直接访问window对象。

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