Next.js 15 Guía Completa de Desarrollo

# Next.js 15 Guía Completa de Desarrollo

Construye aplicaciones web modernas y de alto rendimiento con Next.js 15, aprovechando las últimas características como App Router, Server Components y Server Actions.

## Configuración Inicial del Proyecto

### Crear un Nuevo Proyecto

```bash
npx create-next-app@latest mi-proyecto --typescript --tailwind --app
cd mi-proyecto
npm run dev
```

### Estructura de Directorios Recomendada

```
mi-proyecto/
├── src/
│   ├── app/                    # App Router (rutas y páginas)
│   │   ├── layout.tsx          # Layout principal
│   │   ├── page.tsx            # Página de inicio
│   │   ├── loading.tsx         # Estado de carga
│   │   ├── error.tsx           # Manejo de errores
│   │   └── (rutas)/            # Grupos de rutas
│   ├── components/             # Componentes reutilizables
│   │   ├── ui/                 # Componentes de interfaz
│   │   └── forms/              # Componentes de formularios
│   ├── lib/                    # Utilidades y configuraciones
│   ├── hooks/                  # Hooks personalizados
│   └── types/                  # Definiciones de TypeScript
├── public/                     # Archivos estáticos
└── next.config.ts              # Configuración de Next.js
```

## Server Components (Componentes de Servidor)

Los Server Components son el nuevo paradigma en Next.js 15. Se ejecutan en el servidor y reducen el JavaScript enviado al cliente.

### Ejemplo de Server Component

```typescript
// app/productos/page.tsx
import { obtenerProductos } from "@/lib/api";

// Este componente se renderiza completamente en el servidor
export default async function PaginaProductos() {
  // Obtener datos directamente sin useEffect
  const productos = await obtenerProductos();

  return (
    <main className="contenedor mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Nuestros Productos</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {productos.map((producto) => (
          <article key={producto.id} className="border rounded-lg p-4">
            <h2 className="text-xl font-semibold">{producto.nombre}</h2>
            <p className="text-gray-600">{producto.descripcion}</p>
            <span className="text-lg font-bold text-blue-600">
              ${producto.precio}
            </span>
          </article>
        ))}
      </div>
    </main>
  );
}
```

## Server Actions (Acciones de Servidor)

Las Server Actions permiten ejecutar código en el servidor directamente desde formularios y eventos del cliente.

### Crear una Server Action

```typescript
// app/actions/contacto.ts
"use server";

import { z } from "zod";
import { revalidatePath } from "next/cache";

const esquemaContacto = z.object({
  nombre: z.string().min(2, "El nombre debe tener al menos 2 caracteres"),
  email: z.string().email("Correo electrónico inválido"),
  mensaje: z.string().min(10, "El mensaje debe tener al menos 10 caracteres"),
});

export async function enviarContacto(formData: FormData) {
  const datos = {
    nombre: formData.get("nombre") as string,
    email: formData.get("email") as string,
    mensaje: formData.get("mensaje") as string,
  };

  const resultado = esquemaContacto.safeParse(datos);

  if (!resultado.success) {
    return {
      exito: false,
      errores: resultado.error.flatten().fieldErrors,
    };
  }

  // Guardar en base de datos
  await guardarMensaje(resultado.data);

  revalidatePath("/contacto");
  return { exito: true, mensaje: "Mensaje enviado correctamente" };
}
```

### Formulario con Server Action

```typescript
// components/FormularioContacto.tsx
"use client";

import { useFormState, useFormStatus } from "react-dom";
import { enviarContacto } from "@/app/actions/contacto";

function BotonEnviar() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="bg-blue-600 text-white px-6 py-2 rounded-lg disabled:opacity-50"
    >
      {pending ? "Enviando..." : "Enviar Mensaje"}
    </button>
  );
}

export function FormularioContacto() {
  const [estado, accion] = useFormState(enviarContacto, null);

  return (
    <form action={accion} className="space-y-4 max-w-md">
      <div>
        <label htmlFor="nombre" className="block text-sm font-medium">
          Nombre
        </label>
        <input
          type="text"
          id="nombre"
          name="nombre"
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
        {estado?.errores?.nombre && (
          <p className="text-red-500 text-sm">{estado.errores.nombre}</p>
        )}
      </div>

      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          Correo Electrónico
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
      </div>

      <div>
        <label htmlFor="mensaje" className="block text-sm font-medium">
          Mensaje
        </label>
        <textarea
          id="mensaje"
          name="mensaje"
          rows={4}
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
      </div>

      <BotonEnviar />

      {estado?.exito && (
        <p className="text-green-600">{estado.mensaje}</p>
      )}
    </form>
  );
}
```

## Optimización de Rendimiento

### Configuración de Caché

```typescript
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    ppr: true, // Partial Prerendering
  },
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "**.supabase.co" },
    ],
    formats: ["image/avif", "image/webp"],
  },
};

export default nextConfig;
```

### Streaming y Suspense

```typescript
// app/dashboard/page.tsx
import { Suspense } from "react";
import { EsqueletoDatos } from "@/components/esqueletos";

export default function Dashboard() {
  return (
    <div className="grid grid-cols-2 gap-6">
      <Suspense fallback={<EsqueletoDatos />}>
        <SeccionVentas />
      </Suspense>
      <Suspense fallback={<EsqueletoDatos />}>
        <SeccionUsuarios />
      </Suspense>
    </div>
  );
}
```

Esta guía cubre los fundamentos de Next.js 15 con ejemplos prácticos en español para desarrolladores hispanohablantes.