how to add "Back button" in server component of next js 13.4.2

Question

I want to add a button of going back in Next JS 13.4 based website at a server component. The problem I am facing to use the {useRouter} in my page i neeed to make it client component.

Is their any way that i can add back button in my web page

I don't want to use the method

 <Link href="/job" className="text-gray-400 text-sm font-medium " > {" "} &#x2190; Back                    </Link>

As it don't leave at the position where i am. I mean pages appears from the top using the link method

I tried using the link and using useRouter

with useRouter i don't know to cache the data of api

so tell me a better way to add back button to my website thanks in advance

Answer 1

To anyone who has the same issue, you don't have to make your component use client you can just create a small HOC that achieves the same result.

'use client';
import { useRouter } from 'next/navigation';

function BackButton({
  className,
  children,
}: React.PropsWithChildren<{
  className?: string;
}>) {
  const router = useRouter();
  return (
    <button className={className} onClick={() => router.back()}>
      {children}
    </button>
  );
}

export default BackButton;

Put this in a new file call it BackButton.tsx for example and use it like: <BackButton>Go Back</BackButton>

Hope this will help.