How to implement a "return to previous page" after login in Next.js?

I'm using nextjs v15 with app router, and I need functionality like when a user clicks a login button from any page, they should be redirected back to that same page after successful login. It sounds common and easy. But I want to know how we can do that as Nextjs way without any extra tracking with session store or window object wiht listeners.

I did not get any method or help using useRouter and useParam hooks.

What I'm trying to achieve:

The User is on a page (e.g., /about, /products, etc.)
User clicks "Sign In" in the AppBar (nav. bar)
I just need callbar path in the "Sign In" page component; use it with SignIn method of NextAuth.js (Auth.js) so that after successful sign-in, it redirect back to back to the original page the user came from.

Sharing minimal code for context.

SignIn Page:

export default function Page() {
  ...
  const callbackUrl = "/"; 
  // temporarily using callback to '/' 
  // so always redirect to home after login
  
  if(authenticated){
    return router.back(); 
    // it does not redirect properly. 
    // page reloads once unnceesarily then goes back
  };


  return (
    <>
          {
            Object.values(providers).map((provider) => (

                  <LoginButton 
                    callbackUrl={callbackUrl} 
                    providerId={provider.id} 
                    providerName={provider.name}
                  />

              ))
          }

    </>
  );
}

Actual Login Button to Invoke SignIn:

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

const LoginButton = ({ callbackUrl, providerId, providerName }) => {
  
  const handleSignin = () => {
    signIn(providerId, {callbackUrl:callbackUrl}
  }

  return (
    <ButtonContainer onClick={handleSignin} >
      ...
    </ButtonContainer>
  );
};

Sign in menu button on AppBar:

const UserMenu = () => {
  ...

  if(!user){
    return (
        <Link href={'/auth/signin'}>
          <Button>Sign in</Button>
        </Link>
    );
  }

  return (...)
  
};

If we get the previous url or callback url, then we cna it with signin method of NexAuth which automatically redirects to there.

What I've considered:

Using sessionStorage to store the current path before navigating to sign-in
Using React context to maintain the return URL
Using Next.js routing events

But I'm looking for the easy, simple, straight way, like I am expecting built-in Next.js APIs or methods—the approach that works well with Next.js App Router.

Long story short:

What's the recommended way to capture the "return-to" URL when a user clicks the login button in NextJS?
How do I pass this information to the sign-in page?

I'd appreciate any code examples or best practices to implement this functionality.

Solution

Got solution from iTollu's comment

Passing param to Link href.

import { usePathname } from 'next/navigation';

const UserMenu = ({iniUser}) => {
    
    const pathname = usePathname();
    const href = `/auth/signin?callbackUrl=${encodeURIComponent(pathname)}`;
   
    return (
        <Link href={href}>
          <Button>Sign in</Button>
        </Link>
    );
  };

Extracting param in Sign in Page.jsx

import { signIn } from 'next-auth/react';
import { useRouter, useSearchParams } from 'next/navigation';

export default function SigninPage(){

  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get('callbackUrl') || '/';
  
  const signinWithCallback = () => signIn(providerId, {callbackUrl});
  
  return(
   ...
  )

}

Simple as that!