¿Cómo sirves activos estáticos en Next.js?

Question

Accepted Answer

Next.js sirve archivos estáticos (imágenes, fuentes, iconos, PDF, robots.txt) desde la carpeta especial public/ en la raíz de tu proyecto.

La carpeta public se asigna a la raíz de la URL

text

public/
  logo.png          → served at  /logo.png
  favicon.ico       → served at  /favicon.ico
  docs/guide.pdf    → served at  /docs/guide.pdf
  robots.txt        → served at  /robots.txt

Un archivo en está disponible en la URL — la parte se descarta. Refierete a ellos con una ruta absoluta desde la raíz:

Download guide ); } ``` ## public/ versus importar activos ```tsx // Option A: from public/ — referenced by URL string

// Option B: imported — bundled, hashed for caching, dimensions inferred import logo from "./logo.png";

// width/height come from the import automatically ``` Las imágenes **importadas** obtienen un nombre de archivo con hash de contenido (excelente para almacenamiento en caché a largo plazo) y Next puede deducir sus dimensiones. Usa `public/` para archivos referenciados por URL estable (favicon, robots.txt, og-images, descargas) e **importaciones** para imágenes utilizadas directamente en componentes. ## Advertencias - Solo los archivos presentes en **tiempo de compilación** se sirven — `public/` no es un destino de carga en tiempo de ejecución. - No coloque secretos allí — todo en `public/` es públicamente accesible por URL. ## Por qué es importante La carpeta `public/` es la forma simple y basada en convenciones de servir archivos estáticos en Next.js (favicons, robots.txt, OG images, descargas). Saber que su contenido se asigna a la raíz de la URL — y cuándo preferir importar un activo (con hash, almacenable en caché, con tamaño automático) en lugar de referenciarlo desde `public/` — cubre las necesidades diarias de activos estáticos.