Me he enfrentado a un error difícil de investigar con el botón de retroceso del navegador en https://gart.gallery .

Si va a https://gart.gallery/artworks/ , luego a cualquier obra de arte, por ejemplo, https://gart.gallery/artworks/my-place/ y luego hace clic en el navegador hacia atrás; la URL se reemplazará por /artworks pero la nueva página no se renderizará.

Mis intentos de depuración:

1. no se relaciona con el contenido de la página: si la página es const Artwork = () => <p>Artwork page</p> , el comportamiento sigue siendo el mismo
2. no se relaciona con la estructura de archivos de páginas

 pages/arworks/index.tsx pages/arworks/[slug]/index.tsx // everything is usual

3. next.js puede funcionar correctamente porque /events/art-dubai/ y /events navegan por el navegador hacia atrás/adelante correctamente
4. Intenté, pero fue en vano, encontrar la diferencia entre /events/[slug] que funciona correctamente y /arworks/[slug] , /artworks pages. Además, traté de reemplazarlos con el componente más simple posible con solo un <p> o un Link : el comportamiento sigue siendo el mismo.
5. Este error solo es válido para arworks/[slug] => artworks , galleries/[slug] => galleries y artists/[slug] => artists pero no para /events/[slug] => /events . Raro, no veo que es lo que tienen en común o cual es la diferencia
6. Me di cuenta de que el enrutador next.js no activa el evento cuando hago clic hacia atrás en las páginas problemáticas y lo hace al navegar en cada página. Tengo una suscripción en _app.tsx en eventos como:

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

Puedo proporcionar cualquier configuración o archivo necesario si ayuda.

No espero obtener una solución final, pero estaría muy agradecido si alguien pudiera indicarme cómo pensar/depurar esto.

ACTUALIZAR:

Si cambio NextLink en simple... – ¡navega a la obra de arte y los navegadores hacia atrás funcionan correctamente! Entonces, el problema se ha localizado: es un problema con el uso de NextLink. Pero aún no está claro por qué las páginas navegadas a través de NextLink no activan el enrutador para volver a procesar el componente debido a que se ha cambiado la URL. Uso el siguiente enlace debido al documento:

 <NextLink passHref href="/artworks/[slug]" as={`/artworks/${product.slug}`} /> <a>...</a> </NextLink>

Eliminar passHref o usar solo una propiedad href no tiene impacto en el error.