Guía del App Router de Next.js 15

Next.js 15 trae varias mejoras al App Router que lo hacen aún más potente para crear aplicaciones web modernas. En esta guía repasamos sus funciones clave y las buenas prácticas.

Novedades clave de Next.js 15

1. Turbopack (beta)

Next.js 15 incluye una versión mejorada de Turbopack, que compila más rápido durante el desarrollo:

// next.config.ts
import { type Config } from "next";

const config: Config = {
  // Enable turbopack
  experimental: {
    turbo: true
  }
};

export default config;

2. Server Actions

Las Server Actions te permiten gestionar el envío de formularios y las mutaciones de datos directamente en tus componentes:

// app/actions.ts
'use server'

export async function submitForm(formData: FormData) {
  const name = formData.get('name')
  const email = formData.get('email')
  
  // Process the data
  await saveToDatabase({ name, email })
}

// app/page.tsx
import { submitForm } from './actions'

export default function Page() {
  return (
    <form action={submitForm}>
      <input name="name" type="text" />
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  )
}

3. Metadata API mejorada

La nueva Metadata API ofrece una mejor optimización para SEO y redes sociales:

import { type Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page description',
  openGraph: {
    title: 'My Page',
    description: 'Page description',
    images: ['/og-image.jpg']
  }
}

Buenas prácticas

1. Usa TypeScript

   • Define siempre tipos adecuados para tus props y las respuestas de tu API
   • Aprovecha la inferencia de tipos de TypeScript siempre que puedas

2. Implementa error boundaries

   • Crea archivos error.tsx en tu directorio app
   • Ofrece mensajes de error útiles y opciones para recuperarse

3. Optimiza el rendimiento

   • Usa React Server Components por defecto
   • Implementa estados de carga adecuados con loading.tsx
   • Aprovecha la optimización de imágenes con next/image

Conclusión

El App Router de Next.js 15 ofrece una base sólida para crear aplicaciones web modernas. Si sigues estas buenas prácticas y aprovechas las nuevas funciones, podrás crear aplicaciones rápidas, con tipado seguro y fáciles de mantener.

¡Pronto publicaré más tutoriales en profundidad sobre funciones concretas de Next.js!