Crea tu primera web con Next.js 13 + Tailwind CSS (sin morir en el intento)

¿Te suena que Next.js es la niña bonita de React pero te da vértigo empezar? Tranquilo, aquí no dejamos a nadie atrás. Vamos a levantar una web completita explicando cada comando.

¿Qué es Next.js? Es un framework de React que añade renderizado del lado del servidor (SSR), generación estática (SSG), rutas basadas en archivos y optimizaciones automáticas. Todo lo que React no trae de serie.

Paso 1: Crear el proyecto. El CLI te preguntará si quieres TypeScript (sí), ESLint (sí), Tailwind CSS (sí), src/ directory (opcional), App Router (sí):

$ npx create-next-app@latest mi-proyecto

Paso 2: Estructura del proyecto. app/ contiene tus rutas. Cada carpeta es una ruta. page.tsx es el componente que se renderiza. layout.tsx envuelve las páginas con elementos comunes como header y footer.

Paso 3: Tu primera página. En app/page.tsx, exportas un componente React normal. La diferencia: es un Server Component por defecto. Puedes hacer fetch de datos directamente sin useEffect.

// app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen p-8">
      <h1 className="text-4xl font-bold">Hola Next.js!</h1>
      <p className="mt-4 text-gray-600">
        Mi primera web con Next.js y Tailwind
      </p>
    </main>
  );
}

Paso 4: Tailwind CSS en acción. Tailwind ya viene configurado. Usa clases directamente: className='bg-blue-500 text-white p-4 rounded-lg'. No CSS separado, todo en el componente.

Paso 5: Navegación entre páginas. Crea app/about/page.tsx para una página /about. Usa el componente Link de next/link para navegación client-side sin recargar.

import Link from 'next/link';

export default function Nav() {
  return (
    <nav className="flex gap-4 p-4">
      <Link href="/" className="hover:text-blue-500">Inicio</Link>
      <Link href="/about" className="hover:text-blue-500">About</Link>
      <Link href="/blog" className="hover:text-blue-500">Blog</Link>
    </nav>
  );
}

Paso 6: Componentes reutilizables. Crea una carpeta components/ y extrae elementos comunes. Un Button, un Card, un Header. Importa y usa donde necesites.

Paso 7: Estilos globales y fuentes. En app/globals.css defines estilos globales. Usa next/font para cargar fuentes de Google optimizadas automáticamente.

Paso 8: Deploy en Vercel. Sube tu código a GitHub. Conecta el repo en vercel.com. Deploy automático en cada push. HTTPS, CDN global y preview por PR incluidos gratis.

Ya tienes una web moderna, rápida y lista para producción. El siguiente paso: conectar una base de datos y hacerla dinámica.