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

Esta carpeta también es útil para robots.txt, favicon.ico, verificación de Google Site y cualquier otro archivo estático (incluyendo .html). Pero asegúrate de no tener un archivo estático con el mismo nombre que un archivo en el directorio pages/, ya que esto resultará en un error. Lee más.