Introducción a Next.js | Tutorial de Next.js

¿Qué es Next.js?

Next.js es un framework de React que habilita renderizado del lado del servidor, generación de sitios estáticos y capacidades full-stack. Es el framework de React más popular, potenciando aplicaciones en producción en Netflix, TikTok, Twitch, Hulu y miles de otras compañías.

⚡ ¿Por Qué Next.js?

Configuración Cero

División de código, enrutamiento y optimización automática

Renderizado Híbrido

Renderizado estático, del servidor o del cliente por página

Full-Stack

Rutas API, Server Actions, integración con base de datos

Optimizaciones Integradas

Imágenes, fuentes y scripts optimizados automáticamente

📖 Documentación Oficial de Next.js →

Crear un Nuevo Proyecto

Usa el generador oficial para crear un proyecto listo para producción con valores predeterminados sensatos y el App Router habilitado, luego inicia el servidor de desarrollo.

# Crear nueva app de Next.js
npx create-next-app@latest mi-app

# Prompts interactivos:
# ✔ ¿Te gustaría usar TypeScript? Sí
# ✔ ¿Te gustaría usar ESLint? Sí
# ✔ ¿Te gustaría usar Tailwind CSS? Sí
# ✔ ¿Te gustaría usar el directorio src/? No
# ✔ ¿Te gustaría usar App Router? Sí
# ✔ ¿Te gustaría personalizar el alias de importación predeterminado? No

cd mi-app
npm run dev

# Tu app está corriendo en http://localhost:3000

Estructura del Proyecto

Este diseño muestra las convenciones del App Router y dónde viven los archivos principales como layouts, páginas y rutas API en una aplicación típica de Next.js.

mi-app/
├── app/                    # App Router (recomendado)
│   ├── layout.tsx         # Layout raíz (requerido)
│   ├── page.tsx           # Página de inicio (/)
│   ├── globals.css        # Estilos globales
│   ├── about/
│   │   └── page.tsx       # Página /about
│   └── api/
│       └── hello/
│           └── route.ts   # Ruta API /api/hello
├── public/                # Recursos estáticos
│   └── images/
├── components/            # Componentes React
├── lib/                   # Funciones utilitarias
├── next.config.js         # Configuración de Next.js
├── tailwind.config.js     # Configuración de Tailwind
├── tsconfig.json          # Configuración de TypeScript
└── package.json

Tu Primera Página

Una página es un componente React exportado desde page.tsx, y el layout raíz envuelve todas las páginas para compartir UI global como navegación y pie de página.

// app/page.tsx - Página de inicio
export default function HomePage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Bienvenido a Next.js</h1>
      <p className="mt-4 text-gray-600">
        Comienza editando app/page.tsx
      </p>
    </main>
  );
}

// app/layout.tsx - Layout raíz (envuelve todas las páginas)
import './globals.css';
import type { Metadata } from 'next';

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <body>
        <header>{/* Navegación */}</header>
        {children}
        <footer>{/* Pie de página */}</footer>
      </body>
    </html>
  );
}

Agregar Más Páginas

Nuevas rutas se crean agregando carpetas y archivos page.tsx. Los segmentos dinámicos usan sintaxis de corchetes y reciben parámetros desde la URL.

// app/about/page.tsx - /about
export default function AboutPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">Acerca de Nosotros</h1>
      <p>Esta es la página acerca de.</p>
    </div>
  );
}

// app/blog/page.tsx - /blog
export default function BlogPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">Blog</h1>
    </div>
  );
}

// app/blog/[slug]/page.tsx - /blog/:slug (dinámico)
interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params;
  
  return (
    <article className="p-8">
      <h1 className="text-3xl font-bold">Post: {slug}</h1>
    </article>
  );
}

Next.js vs Create React App

Característica	Next.js	Create React App
Renderizado	SSR, SSG, CSR, ISR	Solo CSR
Enrutamiento	Basado en archivos integrado	Requiere react-router
Rutas API	Integradas	Servidor separado necesario
SEO	Excelente	Pobre (SPA)
Optimización de Imágenes	Integrada	Manual

Comandos Esenciales

Estos scripts cubren desarrollo local, builds de producción y verificaciones básicas de calidad de código.

# Servidor de desarrollo
npm run dev

# Build de producción
npm run build

# Iniciar servidor de producción
npm start

# Verificación de tipos
npx tsc --noEmit

# Linting
npm run lint

💡 Consejos para Comenzar

• Siempre usa el App Router (directorio app/) para proyectos nuevos
• Comienza con TypeScript para mejor experiencia de desarrollo
• Usa Tailwind CSS para estilos rápidos
• Revisa el curso oficial Next.js Learn
• Explora los ejemplos oficiales