useRouter in RSC?

[astral breach]

Hi, I'm probably completely misunderstanding RSCs here, but what is the best way to have a button in the page that makes the router go back in an RSC? I want the page to be an RSC so I can grab a query param slug and fetch some data server-side with it, but then I can't use useRouter. What should I do?

[outer temple]

Hi @astral breach. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You're correct that React Server Components (RSCs) don't have access to the useRouter hook. However, you can still create a button that navigates back in history by using a regular client-side React component within your RSC page.

Here's an example of how you can create a "Go Back" button as a client-side component:

// components/GoBackButton.js
import { useRouter } from 'next/router';

export default function GoBackButton() {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.back()}>
      Click here to go back
    </button>
  );
}

Now, you can import and use this GoBackButton component within your RSC page. This way, you can still fetch data server-side using RSCs and have a button that navigates back in history.

Remember that the code for the GoBackButton component is taken from the Next.js documentation (https://nextjs.org/docs/pages/api-reference/functions/use-router).

Keep in mind that RSCs are still experimental, and their APIs might change in the future.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@astral breach kapa.ai is still learning and improving, please let us how it did by reacting below

[astral breach]

@outer temple How would I get the params from a dynamic page when the page is an RSC?

[outer temple]

Let me check the knowledge base for you. One moment! :books:

---

Hmm, I don't know enough to give you a confident answer yet about React Server Components (RSCs) and dynamic pages in Next.js. However, you can refer to the Next.js documentation (https://nextjs.org/docs) for more information on various topics related to Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@astral breach kapa.ai is still learning and improving, please let us how it did by reacting below