Curso de Next.js gratis desde Cero: Domina el Framework de React para aplicaciones web

¿Qué es Next.js?

Next.js es un framework de React que simplifica la creación de aplicaciones web modernas con funcionalidades listas para producción, a diferencia de React puro (que solo es una biblioteca para interfaces de usuario), Next.js ofrece soluciones integradas para problemas comunes como el enrutamiento, la renderización del lado del servidor y la optimización de imágenes, lo que acelera el desarrollo y mejora el rendimiento.

Diferencias clave entre Next.js y React

• Renderizado: Next.js soporta SSR (Server-Side Rendering)  e ISR (Incremental Static Regeneration) de forma nativa, mientras que React solo hace CSR (Client-Side Rendering).
• Enrutamiento: Next.js tiene un sistema de archivos basado en la carpeta pages, o App Router, React requiere librerías como React Router.
• Optimización: Next.js incluye optimización automática de imágenes, pre-renderizado y code splitting (Permite separar el código en paquetes pequeños que se cargan sólo cuando sea necesario).

Cabe aclarar que en este curso se utilizará las nuevas funcionalidades de Next.js "App Router"

Principales Métodos de Renderizado en Next.js: SSR e ISSR

Next.js ofrece múltiples estrategias de renderizado que lo diferencian de React tradicional, cada una con ventajas específicas para distintos escenarios de desarrollo web, entender estas características es fundamental para construir aplicaciones optimizadas.

1. Server-Side Rendering (SSR)

El SSR genera el HTML en cada solicitud del usuario, ideal para contenido dinámico que requiere datos actualizados, como dashboards o páginas personalizadas.

• Ventajas: Contenido siempre actualizado, mejor SEO.
• Desventajas: Mayor tiempo de respuesta, carga en servidor.

2. Incremental Static Regeneration (ISR)

El ISR permite regenerar páginas estáticas bajo demanda o en intervalos, sin tener que construir el sitio nuevamente.

• Ventajas: Mejor rendimiento, ya que. la página no se debe construir cada vez que el usuario la consulta.
• Desventajas: Primera visita puede recibir contenido desactualizado.

Recomendaciones para SEO

• Usar ISR para páginas públicas indexables
• Reservar SSR para dashboards privados

Configuración Profesional del Entorno para Next.js

Preparar un entorno de desarrollo optimizado es el primer paso crucial para trabajar eficientemente con Next.js, esta guía cubre la instalación y configuración de todas las herramientas esenciales para un flujo de trabajo profesional.

1. Instalación de Node.js y Yarn

Next.js requiere Node.js (versión 18 o superior) como entorno de ejecución, se recomienda instalar la LTS (Long-Term Support) más reciente:

# Verificar instalación
node -v
npm -v

# Instalar Yarn (alternativa más rápida a npm)
npm install -g yarn

Para manejar múltiples versiones de Node.js, instalar nvm (Node Version Manager):

• En el siguiente post te explico todo respecto a NVM: Uso de NVM: ¿Cómo instalar NVM en Ubuntu y Windows?

# Linux/macOS
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

# Windows (usar nvm-windows)
choco install nvm

2. Configuración Óptima de VS Code

Extensiones esenciales para desarrollo con Next.js:

1. ESLint - Análisis de código
2. Prettier - Formateo automático
3. Tailwind CSS IntelliSense (si usas Tailwind)
4. REST Client - Alternativa a Postman

Ejercicio Práctico: Crear Proyecto Next.js con TypeScript

Paso 1: Inicialización del proyecto

npx create-next-app@latest

Paso 2: Configuración del proyecto

Al ejecutar create-next-app, verás las siguientes indicaciones que deberás responder según el tipo de proyecto que vayas a desarrollar:

What is your project named? curso-nextjs-ewebik
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`?  Yes
Would you like to customize the import alias (`@/*` by default)? No
What import alias would you like configured? @/*  //Esta última opción es lanzada si en el paso anterior respondesite "yes"

Paso 3: Estructura de archivos

Organización recomendada para proyectos profesionales:

├── src/
│   ├── app/               # Nuevo App Router
│   │   ├── page.tsx       # Página principal
│   │   └── layout.tsx     # Layout principal
│   ├── components/        # Componentes reutilizables
│   └── styles/            # Estilos globales
├── public/                # Assets estáticos
├── next.config.ts         # Configuración avanzada
└── package.json           # Dependencias y scripts

• Como indique al inicio la configuración utilizada para este curso es "App Router"

Creación de tu Primer Proyecto Next.js con create-next-app

Iniciar un proyecto en Next.js 15 es más sencillo que nunca gracias a la herramienta create-next-app, que configura automáticamente todas las dependencias y estructura de archivos necesarias para comenzar a desarrollar inmediatamente, este proceso incluye las últimas optimizaciones y características de Next.js.

1. Creación del Proyecto Base

Para iniciar un nuevo proyecto con todas las características de Next.js, ejecuta:

npx create-next-app@latest curso-nextjs-ewebik

Durante la instalación, el CLI te preguntará por varias opciones de configuración:

✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? (recommended) Yes
✔ Would you like to customize the default import alias? No

3. Estructura de Archivos en Next.js 15

La nueva estructura generada incluye mejoras significativas:

 curso-nextjs-ewebik/
├── src/
│   ├── app/               # Nuevo App Router
│   │   ├── page.tsx       # Página principal
│   │   └── layout.tsx     # Layout principal
│   ├── components/        # Componentes reutilizables
│   └── styles/            # Estilos globales
├── public/                # Assets estáticos
├── next.config.ts         # Configuración avanzada
└── package.json           # Dependencias y scripts

4. Características Principales de Next.js 15

La nueva versión introduce mejoras importantes:

• Compilador TurboPack estable: Builds hasta un 70% más rápidos
• Server Actions mejoradas: Manejo simplificado de formularios
• Soporte nativo para React 19: Compatibilidad con las últimas features
• Optimizaciones de caching automáticas: Mejor rendimiento out-of-the-box

Ejercicio Práctico: Primeros Pasos

Paso 1: Iniciar el Servidor de Desarrollo

Accede al directorio del proyecto y ejecuta:

cd  curso-nextjs-ewebik
yarn dev

Esto iniciará el servidor en http://localhost:3000 con hot-reloading.

Paso 2: Modificar la Página Principal

Edita src/app/page.tsx para crear tu primer componente:

export default function Home() {
  return (
    <main>
        <h1>¡Bienvenido a Next.js by EWebik!</h1>
        <p>Esta es mi primera página con las nuevas características</p>
    </main>
  )
}

Paso 3: Crear una Ruta Dinámica

Next.js 15 simplifica la creación de rutas dinámicas. Crea un nuevo archivo:

// src/app/products/[id]/page.tsx
export default function ProductPage({
  params
}: {
  params: { id: string }
}) {
  return <p>Detalles del Producto: {params.id}</p>
}

Esta ruta responderá automáticamente a URLs como /products/1.

Tipos de Rutas y su Estructura en Next.js 15

En este Curso de Next.js desde cero, exploraremos el potente sistema de routing de Next.js 15, que ofrece múltiples formas de estructurar las rutas de tu aplicación para diferentes necesidades.

Rutas Estáticas Básicas

La forma más simple de crear rutas en Next.js 15 es mediante la estructura de carpetas en el directorio app:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div className='page'>
      <h1>Sobre Nosotros</h1>
      <p>Esta es una página estática básica</p>
    </div>
  )
}

Esta estructura crea automáticamente la ruta /about, ideal para páginas fijas que no requieren parámetros dinámicos.

Rutas Dinámicas

Para páginas que aceptan parámetros variables, Next.js 15 usa carpetas entre corchetes:

// app/products/[id]/page.tsx
interface ProductPageProps {
  params: {
    id: string
  }
}

export default function ProductPage({ params }: ProductPageProps) {
  return (
    <div className='product-page'>
      <h1>Detalles del Producto {params.id}</h1>
      {/* Contenido dinámico aquí */}
    </div>
  )
}

Esta estructura captura cualquier valor después de /products/ como parámetro id.

Rutas de Grupo (Route Groups)

Permiten organizar rutas lógicamente sin afectar la URL, usando paréntesis en los nombres de carpeta:

app/
├── (auth)/
│   ├── login/
│   │   └── page.tsx    # → /login
│   └── register/
│       └── page.tsx    # → /register
└── (shop)/
    ├── products/
    │   └── page.tsx    # → /products
    └── cart/
        └── page.tsx    # → /cart

Rutas Anidadas con Layouts

Next.js 15 permite layouts anidados que se heredan automáticamente:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className='dashboard-layout'>
      <Sidebar />
      <main className='dashboard-content'>
        {children}
      </main>
    </div>
  )
}

Todas las páginas dentro de /dashboard heredarán este layout.

Rutas Paralelas (Parallel Routes)

Una característica avanzada que permite renderizar múltiples páginas simultáneamente:

// app/layout.tsx
export default function Layout({
  children,
  analytics,
  notifications,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  notifications: React.ReactNode
}) {
  return (
    <>
      {children}
      <aside className='sidebar'>
        {analytics}
        {notifications}
      </aside>
    </>
  )
}

Rutas de API (API Routes)

Next.js 15 mantiene la capacidad de crear endpoints API:

// app/api/users/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  const users = await getUsersFromDB()
  return NextResponse.json(users)
}

Ejercicio Práctico: Implementando Múltiples Tipos de Rutas

Vamos a crear una estructura completa para una aplicación de e-learning:

1. Estructura de Archivos

app/
├── (main)/
│   ├── courses/
│   │   ├── [slug]/
│   │   │   ├── page.tsx
│   │   │   └── lessons/
│   │   │       └── [lessonId]/
│   │   └── categories/
│   │       └── [category]/
│   ├── about/
│   └── contact/
├── (admin)/
│   ├── dashboard/
│   ├── courses/
│   │   └── [id]/
│   │       ├── edit/
│   │       └── page.tsx
│   └── users/
├── api/
│   ├── courses/
│   └── users/
└── layout.tsx