El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

Next.js es un framework de React que permite la creación de aplicaciones web con renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG). En esta sección, nos enfocaremos en la generación de sitios estáticos, una técnica que permite pre-renderizar páginas en el momento de la construcción, mejorando el rendimiento y la optimización para motores de búsqueda (SEO).

¿Qué es la Generación de Sitios Estáticos (SSG)?

La Generación de Sitios Estáticos (SSG) es un proceso en el que las páginas de una aplicación se pre-renderizan en el momento de la construcción. Esto significa que el HTML de cada página se genera una vez y se reutiliza para cada solicitud, en lugar de generarse dinámicamente en cada solicitud.

Ventajas de SSG

Rendimiento Mejorado: Las páginas pre-renderizadas se sirven rápidamente desde un CDN.
SEO Optimizado: El contenido estático es fácilmente indexable por los motores de búsqueda.
Seguridad: Menos dependencias en servidores y bases de datos dinámicas reducen la superficie de ataque.

Configuración Inicial

Antes de comenzar, asegúrate de tener Node.js y npm instalados en tu sistema. Luego, crea un nuevo proyecto de Next.js:

npx create-next-app my-static-site
cd my-static-site

Creación de Páginas Estáticas

En Next.js, las páginas se crean dentro del directorio pages. Para generar una página estática, simplemente crea un archivo JavaScript dentro de este directorio.

Ejemplo: Página Estática Básica

Crea un archivo about.js en el directorio pages:

// pages/about.js
import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is a static page generated at build time.</p>
    </div>
  );
};

export default About;

Generación de Páginas Dinámicas

Para generar páginas dinámicas basadas en datos, Next.js proporciona la función getStaticProps. Esta función se ejecuta en el momento de la construcción y permite obtener datos que se pasarán a la página como props.

Ejemplo: Página Dinámica con Datos

Supongamos que tenemos una lista de artículos que queremos mostrar en una página estática. Primero, creamos un archivo articles.js en el directorio pages:

// pages/articles.js
import React from 'react';

const Articles = ({ articles }) => {
  return (
    <div>
      <h1>Articles</h1>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  // Simulamos una llamada a una API para obtener los datos
  const articles = [
    { id: 1, title: 'First Article' },
    { id: 2, title: 'Second Article' },
  ];

  return {
    props: {
      articles,
    },
  };
}

export default Articles;

En este ejemplo, getStaticProps se ejecuta en el momento de la construcción y obtiene una lista de artículos que se pasan como props al componente Articles.

Generación de Rutas Dinámicas

Next.js también permite generar rutas dinámicas utilizando la función getStaticPaths junto con getStaticProps.

Ejemplo: Rutas Dinámicas

Supongamos que queremos generar páginas para cada artículo individual. Primero, creamos un archivo [id].js en el directorio pages/articles:

// pages/articles/[id].js
import React from 'react';

const Article = ({ article }) => {
  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // Simulamos una llamada a una API para obtener los IDs de los artículos
  const articles = [
    { id: 1 },
    { id: 2 },
  ];

  const paths = articles.map((article) => ({
    params: { id: article.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // Simulamos una llamada a una API para obtener los datos del artículo
  const article = {
    id: params.id,
    title: `Article ${params.id}`,
    content: `This is the content of article ${params.id}.`,
  };

  return {
    props: {
      article,
    },
  };
}

export default Article;

En este ejemplo, getStaticPaths genera las rutas dinámicas basadas en los IDs de los artículos, y getStaticProps obtiene los datos de cada artículo individual.

Construcción y Despliegue

Para construir y desplegar tu sitio estático, ejecuta el siguiente comando:

npm run build

Este comando generará los archivos HTML estáticos en el directorio out. Luego, puedes desplegar estos archivos en cualquier servidor estático o CDN.

Conclusión

La Generación de Sitios Estáticos (SSG) con Next.js es una técnica poderosa para mejorar el rendimiento y la SEO de tus aplicaciones web. Al pre-renderizar las páginas en el momento de la construcción, puedes servir contenido rápidamente y reducir la carga en tus servidores. En esta sección, hemos cubierto los conceptos básicos de SSG y cómo implementarlo en Next.js, incluyendo la creación de páginas estáticas y rutas dinámicas.

Resumen

SSG: Pre-renderiza páginas en el momento de la construcción.
Ventajas: Mejor rendimiento, SEO optimizado, mayor seguridad.
Funciones Clave: getStaticProps y getStaticPaths.
Construcción: npm run build para generar archivos estáticos.

Con estos conocimientos, estás listo para aprovechar al máximo la generación de sitios estáticos en tus proyectos de Next.js. ¡Adelante!

Generación de Sitios Estáticos (SSG) con Next.js

Introducción

¿Qué es la Generación de Sitios Estáticos (SSG)?

Ventajas de SSG

Configuración Inicial

Creación de Páginas Estáticas

Ejemplo: Página Estática Básica

Generación de Páginas Dinámicas

Ejemplo: Página Dinámica con Datos

Generación de Rutas Dinámicas

Ejemplo: Rutas Dinámicas

Construcción y Despliegue

Conclusión

Resumen

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa