Tengo una página de error 500 personalizada llamada 500.tsx y quiero poder mostrar esta página cuando la solicitud del cliente falla con el estado 500, pero manteniendo al cliente en la URL anterior (por ejemplo, /auth/registrar). Tengo un oyente axios por error que debería hacer todo el trabajo. Pero no pude encontrar una manera de hacer esto usando next/router . Cualquier ayuda apreciada
No me di cuenta de que OP quería mostrar 500 páginas al principio.
Podría buscar en router.isFallback pero no estoy completamente seguro de si eso es apropiado para esto. Se supone que es para los indicadores de carga de página, pero en su caso, dado que la página nunca se cargará, podría funcionar.
https://nextjs.org/docs/basic-features/data-fetching#fallback-true
return router?.isFallback ? <Custom500Page/> : <RegularPage/> Puede configurar esta variable desde el método getStaticPaths , que se ejecuta durante el tiempo de compilación y generalmente se usa para páginas [slug] .
// This function gets called at build time export async function getStaticPaths() { // Fetch paths to your slug pages here return { // paths, fallback: true } }Mostrar la página 404 es bastante sencillo y así es como lo hacemos.
Puede exportar condicionalmente una variable llamada notFound como verdadera desde el método getStaticProps .
Si la URL no es válida y no proporciona datos para representar la página, simplemente pasa ese accesorio notFound como true y luego la página 404 predeterminada o personalizada aparecerá automáticamente conservando su URL no válida.
// This function gets called at build time export async function getStaticProps({ params, preview = false }) { let pageData try { // fetch pageData from API here } catch (error) { // catch errors } // check validity or emptyness of data // invalid URL (slug) -> empty data from API // valid URL (slug) -> valid data from API return isObjectEmpty(pageData) ? { notFound: true } : { props: { pageData // pass other props to the page } } } NextJS Docs en getStaticProps y not-found
https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation