Capítulo 115 de 456

forbidden.js

Core Idea

forbidden.js renderiza UI customizada quando a função forbidden() é invocada durante autenticação, retornando status 403. Feature experimental, não recomendada para produção.

Key Concepts

  • forbidden(): função (de next/navigation) que dispara essa página especial; ver capítulo da função forbidden para detalhes de invocação.
  • Sem props: componentes forbidden.js não aceitam nenhuma prop.
  • Localização: app/forbidden.tsx na raiz (ou por segmento, seguindo convenção de arquivo especial).

Code Examples

import Link from 'next/link'

export default function Forbidden() {
  return (
    <div>
      <h2>Forbidden</h2>
      <p>You are not authorized to access this resource.</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}
  • O que demonstra: UI mínima de 403 com link de retorno, sem consumir nenhuma prop.

Anti-patterns

  • Usar em produção sem avaliar o status experimental: a documentação oficial desaconselha para produção.
  • Esperar receber props (error, params, etc.): forbidden.js não aceita nenhuma prop, diferente de error.js.

Key Takeaways

  1. Introduzido na v15.1.0, ainda experimental.
  2. Complementa not-found.js/unauthorized.js como página especial de status HTTP específico (403 vs 404 vs 401).

Connects To

  • File-system conventions (ch111): índice das convenções.
  • error.js (ch114) e not-found.js (ch122): outras páginas especiais de fallback.