Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Personalizando las páginas de error 404 y 500

11/19
Recursos

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

📄 Páginas de error 404 y 500

// 404.tsx
import { Layout } from '@components/Layout'
import { Typography } from '@ui/Typography'
import { Button } from '@ui/Button'

export default function NotFoundPage() {
  return (
    <Layout title="404">
      <div className="text-center">
        <Typography variant="h2" className="mb-6">
          🍂 We are sorry
        </Typography>
        <Typography variant="body1" className="mb-6">
          We could not find what you were looking for
        </Typography>
        <Button
          color="primary"
          variant="contained"
          href="/"
          title="Go back home"
        >
          Go back home
        </Button>
      </div>
    </Layout>
  )
}
// 500.tsx
import { Layout } from '@components/Layout'
import { Typography } from '@ui/Typography'
import { Button } from '@ui/Button'

export default function NotFoundPage() {
  return (
    <Layout>
      <div className="text-center">
        <Typography variant="h2" className="mb-6">
          🍄 Something went wrong
        </Typography>
        <Typography variant="body1" className="mb-6">
          It's not you, it's us. Please try it again in a few minutes.
        </Typography>
        <Typography variant="body1" className="mb-6">
          <span className="bg-gray-300 inline-block">ERRORCODE: 505</span>
        </Typography>
        <Button
          color="primary"
          variant="contained"
          href="/"
          title="Go back home"
        >
          Go back home
        </Button>
      </div>
    </Layout>
  )
}

⚠ Páginas de error

Recursos

Advanced Features: Custom Error Page | Next.js

Apuntes

  • Las páginas de error son indispensables en una aplicación, porque inevitablemente va a suceder
  • Next.js ya trae páginas de error
    • 404 ⇒ Cuando no se encuentra disponible la página
    • 500 ⇒ Cuando existe un error en el servidor o en los componentes de React.js
  • También puedes personalizar dichas páginas de error
👀 Estas páginas de error, comúnmente se desea que vayan al servidor, entonces Next.js **siempre** las va a renderizar de forma estática
📌 **RESUMEN:**  Next.js trae por defecto páginas de error las cuales puedes personalizar