Qué es Next.js y cuándo elegirlo

Qué es Next.js y cuándo elegirlo

Imagina que tienes el poder de React para construir interfaces de usuario interactivas y dinámicas, pero también la capacidad de generar páginas estáticas, renderizar contenido en el servidor, y crear API routes todo en un mismo proyecto. Eso es exactamente lo que te ofrece Next.js: un framework que revoluciona la forma en que construimos aplicaciones web modernas.

Next.js, creado por Vercel (anteriormente Zeit), nació en 2016 como una capa sobre React que resolucía problemas fundamentales del desarrollo web: el SEO, el rendimiento de carga inicial y la experiencia del usuario. A diferencia de una aplicación React pura (Create React App), donde todo se renderiza en el navegador, Next.js permite que el servidor genere HTML completo antes de enviarlo al cliente.

Pero Next.js no es solo un generador de páginas estáticas. Con el lanzamiento de la versión 13 y su nuevo App Router, junto con la introducción de los React Server Components, Next.js se ha transformado en una plataforma full-stack completa. Ahora puedes construir interfaces de usuario complejas, API routes, middlewares, autenticación, bases de datos y más, todo dentro de un mismo proyecto coherente y optimizado.

La evolución de Next.js a través de las versiones

Para entender por qué Next.js es el framework del futuro, necesitamos explorar su evolución histórica:

• Next.js 1-5 (2016-2018): Introdujo el concepto de File-based Routing y SSR básico. Podías crear páginas simplemente creando archivos en una carpeta pages/.
• Next.js 6-9 (2018-2020): Añadió soporte para TypeScript, mejoró el sistema de compilación con Webpack 5, e introdujo API Routes para crear endpoints backend.
• Next.js 10-12 (2020-2022): Presentó Image Optimization, ISR (Incremental Static Regeneration), y mejoras de rendimiento significativas.
• Next.js 13-14 (2022-2024): El Game Changer: App Router, React Server Components, Server Actions, y el nuevo sistema de routing anidado. App Router y Pages Router son opciones distintas. Esta lección utiliza App Router; las rutas de Pages Router existentes no desaparecen al usar una versión nueva.

Arquitectura moderna de Next.js: App Router

Con la introducción del App Router en Next.js 13, la arquitectura del framework cambió radicalmente. Ya no estamos hablando solo de un sistema de páginas, sino de una aplicación completa con capacidades de rendering híbrido.

El nuevo App Router introduce varios conceptos fundamentales:

1. React Server Components (RSC): Componentes que se renderizan exclusivamente en el servidor. Pueden acceder directamente a bases de datos, archivos del sistema y APIs sin exponer credenciales al cliente. Ejemplo: un componente que muestra productos desde una base de datos puede hacer la consulta directamente en el servidor.
2. Client Components: Componentes que mantienen estado e interactividad del lado del cliente. Se marcan explícitamente con 'use client'. La directiva marca una frontera de componentes de cliente. Estos también pueden participar en el HTML inicial renderizado en el servidor; no significa que todo su contenido se dibuje únicamente tras cargar JavaScript.
3. Layouts: Componentes que persisten entre navegaciones. Un layout en app/dashboard/layout.tsx no se re-renderiza completamente cuando cambias de página dentro de dashboard.
4. Server Actions: Funciones que se ejecutan en el servidor pero se llaman desde el cliente. Eliminan la necesidad de crear API routes para operaciones simples.
5. Streaming: Permite enviar contenido al navegador gradualmente, mejorando los tiempos de carga percibida.

// app/page.tsx — Server Component; datos ficticios para la práctica
import QuantityButton from './quantity-button';
const products = [{ id: 'demo-1', name: 'Libreta de ejemplo' }];
export default function Page() {
  return <main><h1>Productos</h1>{products.map(product =>
    <section key={product.id}><h2>{product.name}</h2><QuantityButton /></section>
  )}</main>;
}

// app/quantity-button.tsx — archivo separado
'use client';
import { useState } from 'react';
export default function QuantityButton() {
  const [quantity, setQuantity] = useState(1);
  return <button type="button" onClick={() => setQuantity(quantity + 1)}>
    Cantidad: {quantity}
  </button>;
}

Rendering strategies: conoce cuándo usar cada una

Una de las fortalezas más poderosas de Next.js es su capacidad de hibridar diferentes estrategias de rendering dentro de la misma aplicación. No estás limitado a una sola técnica; puedes elegir la más adecuada para cada página o incluso para cada componente.

Por qué Next.js supera a React puro

Si ya conoces React, quizás te preguntes: ¿por qué necesito Next.js? Después de todo, React es la biblioteca fundamental. La respuesta está en los problemas que React puro no resuelve:

1. SEO Problema: Con React puro (CSR - Client Side Rendering), el navegador recibe un HTML casi vacío y JavaScript debe ejecutarse para renderizar el contenido. Los crawlers de Google pueden tener dificultades indexando contenido JavaScript. Next.js soluciona esto enviando HTML pre-renderizado.
2. Performance: Next.js optimiza automáticamente las imágenes, fuentes, y prefetch de enlaces. También permite hacer code splitting automático por ruta.
3. Routing: En React puro necesitas react-router-dom. Next.js tiene routing basado en archivos que es más intuitivo y potente.
4. API Backend: Con React puro necesitas un backend separado (Express, FastAPI, etc.). Next.js permite crear API routes dentro del mismo proyecto.
5. Configuración: Create React App requiere configuración manual para coisas como CSS modules, Sass, o imágenes optimizadas. Next.js viene con todo configurado out-of-the-box.

El ecosistema de Next.js: más allá del framework

Next.js no es solo un framework; es parte de un ecosistema completo que incluye:

• Vercel: La plataforma de deployment optimizada para Next.js. Cada cambio en tu repositorio puede automáticamente deployar una nueva versión con preview URLs para cada pull request.
• Next.js Commerce: Un starter kit completo para tiendas en línea con integraciones de payment gateways, inventario, y más.
• Turbopack: Bundler incremental integrado. En Next.js 16 es el predeterminado para desarrollo y compilación; mide el rendimiento en tu propio proyecto.
• Middleware: Código que se ejecuta antes de que una request complete. Perfecto para autenticación, logging, y redirecciones.
• Integraciones nativas: Soporte de primera clase para bases de datos (Prisma, Drizzle), autenticación (NextAuth.js, Clerk), CMS (Contentful, Sanity), y más.

Casos de uso reales: ¿quién usa Next.js?

Next.js no es solo teoría; empresas reales lo usan en producción:

El futuro de Next.js: hacia dónde vamos

El equipo de Vercel está liderando la innovación en desarrollo web con React. Las tendencias que están moldeando el futuro de Next.js incluyen:

1. Server Components como default: La dirección clara es que más y más componentes serán Server Components por defecto, reduciendo el JavaScript enviado al cliente.
2. Mejor DX (Developer Experience): Con Turbopack, mejor hot reloading, y herramientas de debugging más sofisticadas.
3. Edge Computing: Capacidad de ejecutar código en el edge (CDN) para latencia ultra-baja.
4. AI Integration: Herramientas nativas para integrar capacidades de IA generativa en aplicaciones Next.js.
5. Mejoras en Server Actions: El equipo está trabajando para hacer Server Actions más robustas, similares a mutaciones de GraphQL pero más simples.

Comenzando tu primer proyecto Next.js

Ahora que entiendes qué es Next.js y por qué es importante, es hora de ensuciarte las manos. Aquí te muestro cómo crear tu primera aplicación:

# Crear un nuevo proyecto Next.js
npx create-next-app@latest mi-primer-proyecto

# O con todas las opciones por defecto
npx create-next-app@latest mi-primer-proyecto --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm

# Estructura del proyecto creado:
# mi-primer-proyecto/
# ├── src/app/
# │   ├── globals.css
# │   ├── layout.tsx        # Layout raíz
# │   └── page.tsx          # Página de inicio (/)
# ├── public/              # Archivos estáticos
# ├── next.config.js       # Configuración de Next.js
# ├── package.json
# └── tsconfig.json

Estructura de archivos en App Router

Entender la estructura de archivos es crucial para dominar Next.js:

• app/layout.tsx: El layout raíz. Define la estructura HTML global y componentes que persisten (header, footer, navegación).
• app/page.tsx: La página de inicio de tu sitio.
• app/dashboard/page.tsx: Crea la ruta /dashboard automáticamente.
• app/dashboard/layout.tsx: Layout específico para /dashboard y sus sub-rutas.
• app/api/routes/route.ts: Crea un API endpoint en /api/routes.
• app/not-found.tsx: Página 404 personalizada.
• app/error.tsx: Manejo de errores para toda la aplicación.
• app/loading.tsx: UI de carga que Next.js muestra automáticamente durante streaming.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Mi Primera App Next.js',
  description: 'Aprende a construir aplicaciones web modernas con Next.js',
  keywords: ['Next.js', 'React', 'Desarrollo Web'],
  authors: [{ name: 'Tu Nombre' }],
  openGraph: {
    title: 'Mi Primera App Next.js',
    description: 'Aprende a construir aplicaciones web modernas',
    images: ['/og-image.jpg'],
  },
};

export default function Page() {
  return <h1>¡Hola Mundo!</h1>;
}

¿Deberías aprender Next.js?

Absolutamente sí, si:

• Ya conoces HTML, CSS y JavaScript básico
• Tienes fundamentos de React (hooks, componentes, props)
• Quieres construir aplicaciones web profesionales
• Te interesa el desarrollo full-stack (frontend + backend)
• Buscas empleabilidad en el mercado actual

Next.js no es solo un framework más; es la forma moderna y profesional de construir aplicaciones web con React. Dominar Next.js te abre puertas a oportunidades laborales emocionantes y te permite crear aplicaciones que antes requerían equipos enteros y meses de desarrollo.

Conclusión

Next.js representa la evolución natural de React para el desarrollo web moderno. Con su combinación de Server Components, múltiples estrategias de rendering, API routes integradas, y un ecosistema robusto, Next.js te permite construir prácticamente cualquier tipo de aplicación web: desde landing pages simples hasta plataformas SaaS complejas.

El framework continúa evolucionando rápidamente, con Vercel empujando los límites de lo posible en desarrollo web. La adopción masiva por parte de empresas importantes y la comunidad de código abierto asegura que Next.js seguirá siendo relevante por mucho tiempo.

En las siguientes lecciones de este módulo, profundizaremos en los aspectos prácticos de Next.js: configuración del entorno, routing, styling, data fetching, y deployment. ¡Prepárate para construir aplicaciones web del futuro!

Práctica acompañada: Una interfaz web de principio a fin

Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Práctica: cuatro pruebas de comportamiento

Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.

Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.

Comprueba tu entrega

Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.

• Abrir el cuaderno ilustrado de 7 páginas
• Descargar PDF, ejercicios y plantillas de esta ruta
• MDN: aprendizaje de desarrollo web · recurso externo
• CS50 Web: HTML y CSS · inglés · video complementario externo

Una ruta de datos en App Router

Guarda este ejemplo en app/api/products/route.ts, o src/app/api/products/route.ts si elegiste src-dir. Al visitar /api/products, debe devolver JSON con el producto ficticio. No depende de una base de datos ni de un servicio externo.

export async function GET() {
  return Response.json({ products: [{ id: 'demo-1', name: 'Libreta de ejemplo' }] });
}

Referencias: Server y Client Components y Route Handlers. La biblioteca React construye la interfaz; Next.js añade convenciones de rutas y ejecución. Conserva una versión concreta en el proyecto y revisa cambios de versión antes de seguir una guía antigua.