Next.js + React Go back to the previous page

Question

I use routing next.js. How to implement the button back and return to the previous page? Just like with the button on the browser

You might want to check [Next.js getting started](https://nextjs.org/learn/basics/navigate-between-pages) page. — trinaldi, Aug 14 '18 at 13:58
looked but did not find a solution. I tried to do so but get constant page redirects. export const BackUrl = ({url}) => (
Nazad
) — Дмитрий, Aug 14 '18 at 14:01
[Client-Side History Support](https://nextjs.org/learn/basics/navigate-between-pages/client-side-history) states: `When you hit the Back button, it navigates the page to the index page entirely via the client; next/link does all the location.history handling for you.You don't need to write even a single line of client-side routing code.`. So you don't need the `onClick` attribute with `window.history.back()` — trinaldi, Aug 14 '18 at 14:05

score 164 · Answer 1 · edited Feb 05 '23 at 10:33

164

EDIT: 2 years after this answer was first posted, the router method is now well documented. Here is the code straight from the documentation:

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

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

ORIGINAL ANSWER:

There is an undocumented Router.back method (see source) that just does window.history.back()

You should have a component like so

import Router from 'next/router'

export default function BackButton() {
    return (
        <div onClick={() => Router.back()}>Go Back</div>
    )
}

edited Feb 05 '23 at 10:33

szaman

2,159
1
14
30

answered Sep 09 '18 at 11:08

Clément Prévost

8,000
2
36
51

1

It is worth pointing out, that you may experience odd behaviour on mobile devices if you have `:hover` assigned the element in CSS due to the way onClick is triggered in React on mobile. – Corfitz. Feb 27 '19 at 08:47
That just hides the exact same line of code. The link from @Clément is from next 7, v8 did also the same: https://github.com/zeit/next.js/blob/v8.0.4/packages/next-server/lib/router/router.ts#L192 – sja May 02 '19 at 08:57
Well... I don't think this is very a11y friendly... – Anatole Lucet Nov 20 '20 at 10:21
@AnatoleLucet very good point, as mentioned, this is the official nextjs example. I know nextjs team likes this kind of feedback, maybe tell them and they will update the documentation. As for this answer, I don't feel like diverging from the official doc to keep things simple – Clément Prévost Nov 21 '20 at 14:16
How can we interrupt the web browser's default back button behavior and have it simply run the Router.back() method instead? – Adam Friedman Jan 13 '22 at 21:42
2

[From documentation](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#userouter-hook): since Next.js 13.2, on app directory, `useRouter` should be imported from the `next/navigation` package – artu-hnrq May 24 '23 at 07:12

musaa muhsen · Answer 2 · 2023-02-19T20:02:38.590

6

If you are looking to go back using the web browser native/default back button probably best to look into "window.onpopstate" with something like this -

      useEffect(() => {
        window.onpopstate = () => {
           router.push(/*route logic here*/)
        }  
      })

More detail on this page - Want to have an event handler for the browser's back button with next.js

edited Feb 19 '23 at 20:02

answered Jun 22 '22 at 19:28

musaa muhsen

61
1
3

score 3 · Answer 3 · answered Nov 08 '22 at 23:18

3

You can try with this

const router = useRouter()
const finalSlashIndex = router.asPath.lastIndexOf('/')
const previousPath = router.asPath.slice(0, finalSlashIndex)
return <Link href={previousPath}>Go back</Link>

answered Nov 08 '22 at 23:18

Isi Doro

43
4

1

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](https://stackoverflow.com/help/how-to-answer). – Vimal Patel Nov 13 '22 at 16:57

score 1 · Answer 4 · answered Jun 02 '23 at 05:43

In Next.js, you can use the Router object to navigate between pages and to go back to the previous page. Here's how you can implement the "Go back to the previous page" functionality in Next.js:

Import the useRouter hook from the next/router module at the top of your file:

import { useRouter } from 'next/router';

Call the useRouter hook to get access to the Router object:

const router = useRouter();

Use the back method of the Router object to go back to the previous page:

<button onClick={() => router.back()}>Go back</button>

In this example, we've created a button with an onClick handler that calls the back method of the Router object when clicked. This will take the user back to the previous page in their browsing history.

Note that the back method of the Router object will not work if there is no previous page in the user's browsing history. In this case, the method will have no effect.

see more on here https://devissuefixer.com/questions/nextjs-react-go-back-to-the-previous-page

This answer looks like it was generated by an AI (like ChatGPT), not by an actual human being. You should be aware that [posting AI-generated output is officially **BANNED** on Stack Overflow](https://meta.stackoverflow.com/q/421831). If this answer was indeed generated by an AI, then I strongly suggest you delete it before you get yourself into even bigger trouble: **WE TAKE PLAGIARISM SERIOUSLY HERE.** Please read: [Why posting GPT and ChatGPT generated answers is not currently acceptable](https://stackoverflow.com/help/gpt-policy). — tchrist, Jul 04 '23 at 00:53

Next.js + React Go back to the previous page

4 Answers4

Linked