Domina Next.js 15 con App Router, Server Components, Server Actions y optimización de rendimiento. Aprende las mejores prácticas para desarrollo web moderno con React y TypeScript.
# 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.This nextjs prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their nextjs implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For nextjs projects, consider mentioning your framework version, coding style, and any specific libraries you're using.