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

Answer 1

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 <span onClick={() => router.back()}>Click here to go back</span>
}

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>
    )
}

Answer 2

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

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

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