I've faced with hard to investigate bug with the browser's backward button on https://gart.gallery.
If you go to https://gart.gallery/artworks/
then to any artwork, for example, https://gart.gallery/artworks/my-place/ then click browser's backward –– the URL will be replaced by /artworks but the new page wouldn't be rendered.
My attempts to debug:
- it doesn't relate to page content – if the page is
const Artwork = () => <p>Artwork page</p>the behavior stays the same - it doesn't relate to pages files structure
pages/arworks/index.tsx
pages/arworks/[slug]/index.tsx
// everything is usual
- next.js is able to work proper because
/events/art-dubai/and/eventsnavigate through the browser back/forward correctly - I tried but in vain to find the difference between
/events/[slug]which works correctly and/arworks/[slug],/artworkspages. Moreover, I tried to replace them with the simplest possible component with just a<p>orLink– behavior stays the same. - This bug actual only for
arworks/[slug] => artworks,galleries/[slug] => galleriesandartists/[slug] => artistsbut not for/events/[slug] => /events. Weird, I don't see what is in common or what is the difference - I've noticed that next.js router doesn't fire the event when I click backward on problemed pages and does on navigating every other page. I have a subscription in the
_app.tsxon the events like:
function handleStart(...props) {
console.log('start ', JSON.stringify(props));
start('ROUTER', 0);
}
function handleStop(...props) {
console.log('complete ', JSON.stringify(props));
finish('ROUTER', 500);
}
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleStop);
I can provide any needed configs or files if it helps.
I do not hope to get a final solution, but I would be very grateful if someone could direct me on the way how to think/debug this.
UPDATE:
If i change NextLink on simple ... – it navigates to the artwork and than browsers backward works properly! So the issue has been localized: it is a problem with using NextLink. But still not clear why pages navigated through NextLink don't trigger the router to re-render component due to URL has been changed. I use Next link due to the doc:
<NextLink
passHref
href="/artworks/[slug]"
as={`/artworks/${product.slug}`}
/>
<a>...</a>
</NextLink>
Removing passHref or using just a href property – does no impact on bug.