Introducción a Next.js

Next.js es un framework de React para construir aplicaciones web full-stack. Ofrece enrutamiento, renderizado en servidor, generación estática y rutas de API de forma integrada.

¿Por qué Next.js?

Característica	React (Vite)	Next.js
Enrutamiento	Manual (React Router)	Basado en archivos
Renderizado	Solo cliente	SSR, SSG, ISR, RSC
API Backend	Servidor separado	Route Handlers integrados
SEO	Deficiente (sin SSR)	Excelente
Imágenes	Optimización manual	Componente `<Image>`

Instalación

npx create-next-app@latest mi-app --typescript --tailwind --eslint
cd mi-app
npm run dev

Estructura del Proyecto

mi-app/
├── app/                  # App Router (Next.js 13+)
│   ├── layout.tsx        # Layout raíz (envuelve todas las páginas)
│   ├── page.tsx          # Página de inicio (/)
│   ├── globals.css
│   └── sobre/
│       └── page.tsx      # Ruta /sobre
├── public/               # Archivos estáticos
├── components/           # Componentes compartidos
└── next.config.ts        # Configuración de Next.js

Layout Raíz

// app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Mi App',
  description: 'Construida con Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Tu Primera Página

// app/page.tsx
export default function PaginaInicio() {
  return (
    <main>
      <h1>¡Bienvenido a Next.js!</h1>
      <p>Esta es la página de inicio.</p>
    </main>
  );
}

Componentes de Servidor vs. Cliente

Por defecto, todos los componentes en app/ son Componentes de Servidor — se renderizan en el servidor, no añaden JS al bundle del cliente, y pueden acceder a bases de datos directamente.

// Componente de Servidor (predeterminado) — SIN 'use client'
async function ListaProductos() {
  // Acceso directo a API/base de datos en el servidor
  const productos = await fetch('https://api.example.com/productos').then(r => r.json());

  return (
    <ul>
      {productos.map((p: any) => <li key={p.id}>{p.nombre}</li>)}
    </ul>
  );
}

// Componente de Cliente — necesita interactividad
'use client';

import { useState } from 'react';

export function Contador() {
  const [cuenta, setCuenta] = useState(0);
  return <button onClick={() => setCuenta(c => c + 1)}>Cuenta: {cuenta}</button>;
}

Regla clave: Usa 'use client' solo cuando necesites APIs del navegador (useState, useEffect, manejadores de eventos). Mantén la mayor cantidad posible de componentes como Componentes de Servidor.