Sirviendo Contenido Estático y Cacheando Contenido Estático con Next.js
Hola, estimados lectores,
Next.js es un framework popular para desarrollar aplicaciones web modernas. Sin embargo, Next.js también es una herramienta poderosa para crear sitios estáticos. En este artículo, aprenderemos cómo crear un sitio estático usando Next.js y cómo cachear el contenido estático.
- Crear un Proyecto Next.js Como primer paso, necesitas crear un proyecto Next.js. Para ello, abre la terminal y ejecuta el siguiente comando:
npx create-next-app sitio-estatico cd sitio-estatico
Este comando creará un proyecto Next.js llamado sitio-estatico.
-
Crear Páginas En Next.js, las páginas se crean dentro de la carpeta pages. Por ejemplo, el archivo index.js puede ser creado dentro de la carpeta mi-sitio-estatico/pages para generar la página principal. Otras páginas se pueden crear de manera similar.
-
Añadir Contenido Estático El contenido estático se encuentra dentro de la carpeta public. Por ejemplo, puedes añadir imágenes a la carpeta public/images. Estas imágenes pueden ser utilizadas posteriormente en el sitio.
-
Usar la Función "Static Export" de Next.js Gracias al comando next export que proporciona Next.js, puedes exportar el proyecto como un sitio estático. En la terminal, navega al directorio donde se encuentra tu proyecto y ejecuta el siguiente comando:
npm run build && npm run export
Estos comandos compilarán tu proyecto y luego exportarán los archivos estáticos.
- Cachear el Contenido Estático Cachear el contenido estático mejora el rendimiento del sitio. Para ello, necesitas editar el archivo next.config.js de Next.js. Por ejemplo, en el siguiente ejemplo de código, cacheamos el contenido estático durante una hora:
module.exports = { async rewrites() { return [ { source: '/:path*', destination: '/:path*', }, ] }, async headers() { return [ { source: '/(.*)', headers: [ { key: 'Cache-Control', value: 'public, max-age=3600, must-revalidate', }, ], }, ] }, }
Este código hace que todas las páginas y contenido se almacenen en caché durante una hora.
En este artículo, aprendimos cómo crear un sitio estático usando Next.js y cómo cachear el contenido estático. Ahora puedes utilizar esta información para crear sitios estáticos de alto rendimiento y centrados en la experiencia del usuario.