Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

311
Vistas
Next.js router doesn't react on browser's backward button on some pages

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:

  1. it doesn't relate to page content – if the page is const Artwork = () => <p>Artwork page</p> the behavior stays the same
  2. it doesn't relate to pages files structure
   pages/arworks/index.tsx
   pages/arworks/[slug]/index.tsx
   // everything is usual
  1. next.js is able to work proper because /events/art-dubai/ and /events navigate through the browser back/forward correctly
  2. I tried but in vain to find the difference between /events/[slug] which works correctly and /arworks/[slug], /artworks pages. Moreover, I tried to replace them with the simplest possible component with just a <p> or Link – behavior stays the same.
  3. This bug actual only for arworks/[slug] => artworks, galleries/[slug] => galleries and artists/[slug] => artists but not for /events/[slug] => /events. Weird, I don't see what is in common or what is the difference
  4. 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.tsx on 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.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda