Carpeta 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 en tu 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="A portrait of me" />
}

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., debes usar archivos de metadatos especiales dentro de la carpeta app.