Recursos estáticos en el directorio `public`

Next.js puede servir archivos estáticos, como imágenes, desde una carpeta llamada public en el directorio raíz. Los archivos dentro de public pueden ser referenciados por su código usando la URL base (/).

Por ejemplo, el archivo public/avatars/me.png puede ser visualizado visitando la ruta /avatars/me.png. El código para mostrar esa imagen podría verse así:

import Image from 'next/image'

export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}

export function AvatarOfMe() {
  return <Avatar id="me" alt="Un retrato mío" />
}

Almacenamiento en caché

Next.js no puede almacenar en caché de forma segura los recursos en la carpeta public porque pueden cambiar. Los encabezados de caché predeterminados aplicados son:

Cache-Control: public, max-age=0

Robots, Favicons y otros

Para archivos de metadatos estáticos, como robots.txt, favicon.ico, etc., debe usar archivos de metadatos especiales dentro de la carpeta app.

Bueno saber:

• El directorio debe llamarse public. El nombre no puede cambiarse y es el único directorio usado para servir recursos estáticos.
• Solo los recursos que están en el directorio public durante el tiempo de compilación serán servidos por Next.js. Los archivos agregados durante el tiempo de solicitud no estarán disponibles. Recomendamos usar un servicio de terceros como Vercel Blob para almacenamiento persistente de archivos.