¿Qué es Next.js?

Next.js es un framework de React que te permite crear aplicaciones web completas con renderizado híbrido (tanto del lado del servidor como del cliente). Desarrollado por Vercel, se ha convertido en el estándar de facto para aplicaciones React en producción.

¿Para qué sirve Next.js?

Next.js es ideal para:

• Crear aplicaciones web full-stack con React.
• Sitios web con excelente SEO y performance.
• E-commerce, dashboards y aplicaciones empresariales.
• APIs y backends integrados con el frontend.
• Aplicaciones que necesitan renderizado del lado del servidor.

¿Cómo funciona?

Next.js extiende React con funcionalidades listas para producción. Imagina React como un motor de coche potente, y Next.js como el chasis completo con ruedas, frenos y GPS - te da todo lo necesario para crear una aplicación real.

Ejemplo: Página básica en Next.js

Next.js usa file-based routing, donde cada archivo en pages/ o app/ se convierte automáticamente en una ruta.

// pages/index.js (o app/page.js en App Router)
import { useState } from 'react';

export default function Home({ posts }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Mi Blog con Next.js</h1>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      
      <div>
        <h2>Posts del Blog</h2>
        {posts.map(post => (
          <article key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </div>
    </div>
  );
}

// Esta función se ejecuta en el servidor
export async function getStaticProps() {
  const posts = await fetch('https://api.ejemplo.com/posts').then(r => r.json());
  
  return {
    props: { posts }, // Se pasan como props al componente
    revalidate: 60    // Regenera cada 60 segundos
  };
}

Tipos de renderizado

Next.js ofrece múltiples estrategias de renderizado:

1. Static Site Generation (SSG)

// Se genera en build time
export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

2. Server-Side Rendering (SSR)

// Se ejecuta en cada request
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

3. Incremental Static Regeneration (ISR)

export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 10 // Regenera cada 10 segundos
  };
}

4. Client-Side Rendering (CSR)

// Renderizado en el cliente, como React tradicional
import { useEffect, useState } from 'react';

export default function ClientPage() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data').then(r => r.json()).then(setData);
  }, []);
  
  return <div>{data ? data.message : 'Cargando...'}</div>;
}

API Routes integradas

Next.js permite crear APIs directamente en tu aplicación:

// pages/api/users.js o app/api/users/route.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json([
      { id: 1, name: 'Ana' },
      { id: 2, name: 'Luis' }
    ]);
  } else if (req.method === 'POST') {
    // Crear nuevo usuario
    const newUser = req.body;
    res.status(201).json({ message: 'Usuario creado', user: newUser });
  }
}

Características principales

• File-based routing: Las rutas se crean automáticamente basadas en archivos.
• Renderizado híbrido: SSG, SSR, ISR y CSR en la misma aplicación.
• API Routes: Crea endpoints de API sin servidor separado.
• Optimizaciones automáticas: Code splitting, image optimization, font optimization.
• TypeScript nativo: Soporte completo sin configuración.
• CSS integrado: CSS Modules, Sass, Tailwind CSS listos para usar.

Optimizaciones automáticas

import Image from 'next/image';
import Link from 'next/link';

export default function OptimizedPage() {
  return (
    <div>
      {/* Optimización automática de imágenes */}
      <Image 
        src="/hero.jpg" 
        alt="Hero"
        width={800} 
        height={400}
        priority // Carga prioritaria
      />
      
      {/* Prefetch automático de rutas */}
      <Link href="/about">
        Sobre nosotros
      </Link>
    </div>
  );
}

App Router vs Pages Router

Next.js ofrece dos sistemas de enrutamiento:

Pages Router (tradicional)

pages/
  index.js          → /
  about.js          → /about  
  blog/
    index.js        → /blog
    [slug].js       → /blog/:slug

App Router (nuevo)

app/
  layout.js         → Layout raíz
  page.js           → /
  about/
    page.js         → /about
  blog/
    layout.js       → Layout del blog
    page.js         → /blog
    [slug]/
      page.js       → /blog/:slug

¿Cuándo usar Next.js?

• Aplicaciones React complejas que necesitan SEO.
• E-commerce y sitios con mucho contenido.
• Dashboards y aplicaciones empresariales.
• Blogs y sitios de contenido dinámico.
• Cuando necesitas full-stack con React.
• Aplicaciones que requieren performance extrema.

Comparación rápida

Característica	React puro	Next.js
SEO	❌ Limitado	✅ Excelente
Performance	🟡 Manual	✅ Automática
Routing	📦 React Router	✅ Integrado
API Backend	❌ Servidor separado	✅ API Routes
Optimizaciones	🟡 Configuración manual	✅ Automáticas
Deploy	🟡 Complejo	✅ Simple

Conclusión

Next.js ha revolucionado el ecosistema de React al proporcionar una solución completa y optimizada para aplicaciones web modernas. Te permite enfocarte en construir funcionalidades mientras el framework se encarga de la performance, SEO y optimizaciones.

Con su renderizado híbrido y optimizaciones automáticas, Next.js es la elección ideal cuando necesitas crear aplicaciones React que sean rápidas, escalables y amigables con los motores de búsqueda.

---