En este capítulo, aprenderemos cómo manejar archivos estáticos y recursos en una aplicación Next.js 13 utilizando el Page Router. Next.js proporciona una forma sencilla de servir archivos como imágenes, fuentes, archivos CSS, y otros recursos estáticos desde la carpeta public, lo que facilita su acceso y gestión.

La Carpeta public en Next.js

La carpeta public/ en Next.js es el lugar donde almacenamos todos los archivos estáticos. Estos archivos son servidos directamente al cliente y pueden ser accedidos utilizando rutas basadas en su estructura dentro de la carpeta.

Por ejemplo, si tienes un archivo logo.png en la carpeta public/images, este será accesible desde la URL /images/logo.png.

Ejemplo de Archivo Estático

Supongamos que tenemos una imagen llamada logo.png en la carpeta public/images. Podemos acceder a esta imagen directamente desde el navegador utilizando:

Y podemos utilizarla dentro de nuestros componentes de la siguiente manera:

javascript

Este enfoque permite acceder fácilmente a archivos estáticos sin necesidad de realizar configuraciones adicionales.

Sirviendo Archivos CSS y JavaScript Personalizados

Además de imágenes, podemos almacenar archivos CSS y JavaScript en la carpeta public para ser utilizados en toda la aplicación. Para incluir un archivo CSS o JavaScript, simplemente enlázalo en tu archivo de layout o página.

Incluir un Archivo CSS

Si tenemos un archivo CSS en public/styles/global.css, podemos incluirlo en nuestras páginas utilizando la etiqueta <link> en el archivo _document.js o directamente en las páginas.

javascript

Incluir Archivos JavaScript Externos

De manera similar, podemos enlazar archivos JavaScript externos para que estén disponibles en nuestras páginas. Por ejemplo, si tienes un archivo de script personalizado scripts/main.js en la carpeta public, puedes incluirlo así:

javascript

Esto es útil para agregar funcionalidades personalizadas a tu aplicación sin necesidad de depender de bibliotecas de terceros.

Gestión de Fuentes Personalizadas

Si necesitas utilizar fuentes personalizadas en tu aplicación, puedes almacenarlas en la carpeta public y utilizarlas en tus archivos CSS o directamente en tus componentes.

Ejemplo de Fuente Personalizada

Si tienes una fuente llamada MyFont.ttf en la carpeta public/fonts, puedes incluirla en tu archivo CSS de la siguiente manera:

css

De esta manera, puedes personalizar las tipografías de tu aplicación sin depender de fuentes externas.

Archivos Descargables

Si deseas que los usuarios puedan descargar archivos como PDFs o documentos desde tu aplicación, puedes colocar esos archivos en la carpeta public y enlazarlos directamente.

Ejemplo de Archivo Descargable

javascript

Los archivos almacenados en la carpeta public se pueden descargar directamente sin necesidad de configuraciones adicionales.

Buenas Prácticas en el Manejo de Archivos Estáticos

Es importante seguir algunas buenas prácticas al manejar archivos estáticos y recursos en una aplicación Next.js para optimizar su rendimiento:

1. Optimiza las imágenes: Utiliza el componente Image de Next.js para aprovechar la optimización automática de imágenes.

2. Minimiza archivos CSS y JavaScript: Siempre que sea posible, minifica y comprime tus archivos CSS y JavaScript para mejorar los tiempos de carga.

3. Evita archivos estáticos innecesarios: No almacenes archivos grandes o innecesarios en la carpeta public. Esto puede aumentar el tamaño del bundle de tu aplicación y afectar el rendimiento.

4. Usa rutas relativas: Siempre utiliza rutas relativas al enlazar archivos dentro de la carpeta public para asegurarte de que los archivos sean accesibles en todas las rutas.

Conclusión

El manejo de archivos estáticos y recursos en Next.js 13 con el Page Router es muy sencillo gracias a la carpeta public. Desde imágenes hasta archivos CSS, JavaScript y fuentes personalizadas, Next.js proporciona una estructura clara y eficiente para gestionar estos recursos. Siguiendo buenas prácticas, podemos asegurarnos de que nuestra aplicación sea rápida y eficiente al manejar archivos estáticos.