Next.js v15 App Router登录后返回原页面实现方案

1. 捕获登录按钮点击时的返回URL #

使用Next.js App Router原生的usePathname钩子获取当前页面路径，将其作为查询参数附加到登录页面的跳转链接中，这是最简洁的原生实现方式。

修改导航栏的UserMenu组件：

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const UserMenu = () => {
  // ... 你的用户状态判断逻辑
  const pathname = usePathname();

  if (!user) {
    // 用encodeURIComponent处理特殊路径，避免URL解析错误
    return (
      <Link href={`/auth/signin?callbackUrl=${encodeURIComponent(pathname)}`}>
        <Button>Sign in</Button>
      </Link>
    );
  }

  return (...); // 已登录状态的UI
};

2. 登录页面接收并传递回调URL #

在App Router的登录页面中，通过searchParams props直接读取查询参数，提取出回调路径后传给NextAuth的signIn方法，由NextAuth自动处理登录后的跳转逻辑。

修改登录页面代码：

'use client';
import { useSearchParams, useRouter } from 'next/navigation';
import { getProviders, signIn, useSession } from 'next-auth/react';
import { useState, useEffect } from 'react';

export default function SignInPage() {
  const { data: session } = useSession();
  const searchParams = useSearchParams();
  const router = useRouter();
  const [providers, setProviders] = useState(null);

  // 从查询参数获取回调路径，默认跳转到首页
  const callbackUrl = searchParams.get('callbackUrl') || '/';

  // 已登录状态直接重定向到回调页面
  if (session) {
    router.push(callbackUrl);
    return null;
  }

  // 登录提供商数据获取
  useEffect(() => {
    const fetchProviders = async () => {
      const res = await getProviders();
      setProviders(res);
    };
    fetchProviders();
  }, []);

  return (
    <>
      {providers && Object.values(providers).map((provider) => (
        <LoginButton
          key={provider.id}
          callbackUrl={callbackUrl}
          providerId={provider.id}
          providerName={provider.name}
        />
      ))}
    </>
  );
}

修改LoginButton组件（补全signIn调用逻辑）：

'use client';
import { signIn } from 'next-auth/react';

const LoginButton = ({ callbackUrl, providerId, providerName }) => {
  const handleSignin = () => {
    // 传入callbackUrl，NextAuth会自动完成登录后的跳转
    signIn(providerId, { callbackUrl });
  };

  return (
    <div onClick={handleSignin}>
      Sign in with {providerName}
    </div>
  );
};

最佳实践 #

• 必须用encodeURIComponent处理回调路径，避免包含特殊字符（如?、&）的页面路径出现解析错误
• 登录页面优先检查登录状态，直接重定向，避免无效渲染
• 依赖NextAuth的signIn内置跳转逻辑，比手动调用router.back更可靠，后者依赖浏览器历史栈，可能在登录流程中被打乱

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