Documentación Técnica de React & Next.js

React es una biblioteca de JavaScript enfocada en la creación de interfaces de usuario interactivas basadas en componentes. Next.js es un framework web potente construido sobre React que amplía sus capacidades nativas, proporcionando enrutamiento inteligente, optimizaciones automáticas y renderizado híbrido.

¿Por qué Next.js?

Aunque React es excelente para gestionar el estado del cliente y construir interfaces dinámicas, Next.js resuelve problemas arquitectónicos comunes como la optimización SEO, la carga inicial diferida y el renderizado del lado del servidor (SSR) de manera directa y optimizada fuera de la caja.

Conceptos Básicos de React.js

En el núcleo de React se encuentra el concepto de Componente. Los componentes son bloques de construcción modulares que gestionan su propio renderizado y comportamiento.

// Ejemplo de un componente funcional simple en React
import React from 'react';

function WelcomeCard({ name }) {
  return (
    <div className="card">
      <h3>Hola, {name}</h3>
      <p>Bienvenido a la documentación de desarrollo web.</p>
    </div>
  );
}

Los componentes reciben parámetros denominados Props (propiedades) y pueden mantener un estado de datos interno interactivo que provoca una actualización de la interfaz en pantalla cuando cambia.

Hooks de Estado y Efecto

Los Hooks permiten usar el estado y otras funciones de React en componentes funcionales sin necesidad de escribir clases tradicionales de ES6.

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // Sincroniza el título del navegador después de renderizar
  useEffect(() => {
    document.title = `Contador: ${count}`;
  }, [count]);

  return (
    <button onClick={() =>} setCount(count + 1)}>
      Incrementar: {count}
    </button>
  );
}

Next.js App Router

Next.js introdujo el App Router, un sistema de enrutamiento basado en archivos construido sobre React Server Components que soporta layouts complejos, rutas anidadas y estados de carga personalizados de forma nativa.

Por ejemplo, el archivo en la ruta app/blog/page.js se resolverá automáticamente bajo el path web /blog.

React Server Components (RSC)

Por defecto, Next.js utiliza **React Server Components**. Estos componentes se ejecutan y renderizan en el servidor, lo que reduce drásticamente el tamaño del paquete de JavaScript descargado por el navegador del cliente.

Para aquellos componentes que requieran interactividad directa (como hooks useState, gestores de eventos onClick o efectos secundarios de cliente), se debe declarar la directiva especial al inicio del archivo:

'use client';

import { useState } from 'react';
// Este componente se procesará en el cliente por interactividad