Browser back button is not working

[talhaguy]

Replication Steps

1. Go to home page
2. Click on any link
3. Click on another link
4. Press browser back button
5. See the page go back
6. Click back button again

Expected
Page should go back again.

Actual
Page visually remains on the same one. The URL does change though.

[talhaguy]

Appears to be happening after commit ccb7e1d. Commit after this, 18369ef, is the one in which Snipcart was added. Snipcart may be messing with the routing.

[talhaguy]

Reached out to Snipcart support. Created minimal repo with reproduction for them: https://github.com/talhaguy/next-snipcart-store

[talhaguy]

Haven't heard anything yet from Snipcart. I have opened an issue in their NextJS sample repo: snipcart/next-snipcart-store#1

[talhaguy]

I noticed that the history.state object a different initial landing page value in the case that you use Snipcart and in the case that you do not:

With:

Without:

If the history state is the issue, this sample code seems to resolve it:

// _app.js

import { useEffect } from 'react';
import { useRouter } from 'next/router'

function useResetHistory() {
  const router = useRouter()

  useEffect(() => {
    document.addEventListener("snipcart.ready", () => {
      Snipcart.events.on('snipcart.initialized', (snipcartState) => {
        router.replace(router.pathname)
      });
    });
  }, [])
}

function MyApp({ Component, pageProps }) {
  useResetHistory()

  return <Component {...pageProps} />
}

export default MyApp