Next.js

Introducción a Next.js 15

Por Equipo Refactor

Introducción a Next.js 15

Next.js 15 marca un hito importante en el ecosistema de React, trayendo mejoras significativas en rendimiento, experiencia de desarrollo y nuevas características que facilitan la creación de aplicaciones web modernas.

¿Qué es Next.js?

Next.js es un framework de React que te permite construir aplicaciones web rápidas y escalables con renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y mucho más.

Características Principales de Next.js 15

1. Turbopack Estable

Turbopack, el nuevo bundler de Vercel escrito en Rust, ahora es estable en Next.js 15:

# Usar Turbopack en desarrollo
npm run dev --turbo

Beneficios:

  • ⚡ Builds hasta 5x más rápidos
  • 🔥 Hot Module Replacement instantáneo
  • 📦 Mejor manejo de dependencias
  • 🎯 Menor uso de memoria

2. Soporte Completo para React 19

Next.js 15 incluye soporte nativo para React 19:

// Server Actions mejorados
'use server'

export async function createUser(formData: FormData) {
  const name = formData.get('name');
  const email = formData.get('email');

  await db.users.create({ name, email });
}

// Uso en componente
export default function SignupForm() {
  return (
    <form action={createUser}>
      <input name="name" required />
      <input name="email" type="email" required />
      <button type="submit">Registrar</button>
    </form>
  );
}

3. App Router Mejorado

El App Router continúa evolucionando con mejoras en:

Parallel Routes

Renderiza múltiples páginas en el mismo layout:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  team,
  analytics
}: {
  children: React.ReactNode;
  team: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div>
      <div>{children}</div>
      <div className="grid grid-cols-2 gap-4">
        <div>{team}</div>
        <div>{analytics}</div>
      </div>
    </div>
  );
}

Intercepting Routes

Intercepta navegaciones para mostrar modales o previews:

// app/photos/(..)photo/[id]/page.tsx
export default function PhotoModal({ params }: { params: { id: string } }) {
  return (
    <div className="modal">
      <Image src={`/photos/${params.id}`} />
    </div>
  );
}

4. Optimización de Imágenes

Mejoras en el componente Image:

import Image from 'next/image';

export default function Gallery() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={800}
      height={600}
      priority // Carga prioritaria
      placeholder="blur" // Placeholder blur
      blurDataURL="/hero-blur.jpg"
    />
  );
}

5. Partial Prerendering (Experimental)

Combina lo mejor de SSR y SSG:

// next.config.js
module.exports = {
  experimental: {
    ppr: true
  }
}

// La página se genera estáticamente,
// pero partes dinámicas se renderizan en el servidor
export default function ProductPage() {
  return (
    <div>
      <StaticHeader /> {/* Estático */}
      <DynamicPrice /> {/* Dinámico */}
      <StaticReviews /> {/* Estático */}
    </div>
  );
}

Migración a Next.js 15

Actualizar Dependencias

npm install next@15 react@19 react-dom@19

Cambios Importantes

  1. Node.js 18.17+ es ahora el mínimo requerido
  2. React 19 trae cambios en el comportamiento de hooks
  3. Turbopack es el nuevo default en desarrollo

Ejemplo de Migración

// Antes (Pages Router)
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// Después (App Router)
async function getData() {
  const data = await fetchData();
  return data;
}

export default async function Page() {
  const data = await getData();
  return <div>{/* Renderizar data */}</div>;
}

Mejores Prácticas

1. Usa Server Components por Defecto

// app/page.tsx (Server Component por defecto)
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <main>{/* UI */}</main>;
}

2. Client Components Solo Cuando Sea Necesario

'use client' // Solo para interactividad

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. Aprovecha el Caching Automático

// Fetch con cache automático
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 } // Revalidar cada hora
});

Rendimiento

Next.js 15 mejora significativamente el rendimiento:

  • 📉 40% menos JavaScript en el cliente
  • ⚡ 50% más rápido en desarrollo con Turbopack
  • 🎯 Mejor Core Web Vitals automáticamente

Conclusión

Next.js 15 consolida el App Router como el camino hacia adelante, mejora dramáticamente la experiencia de desarrollo con Turbopack, y prepara el terreno para el futuro de React con soporte completo para React 19.

Recursos Adicionales

¡Es el momento perfecto para empezar o migrar a Next.js 15!

#Next.js#React#JavaScript