Next.js 15: todas las novedades por descubrir

31/10/2024

¡Next.js 15 ya está aquí! 🎉 Y, como de costumbre, no viene con las manos vacías. Entre los nuevos hooks, un sistema de bundling ultra rápido con Turbopack, y una optimización mejorada para TypeScript, los desarrolladores front-end no pueden más que aplaudir. Vamos a revisar todas estas novedades y ver cómo aprovecharlas. ¿Listo? ¡Empezamos! 🚀

1. Nuevos Hooks: mejora de la experiencia de desarrollo

`useServerContext` y `useClientContext`: una gestión simplificada del contexto

Los hooks useServerContext y useClientContext permiten gestionar de forma nativa el contexto específico del servidor y del cliente. ¡No más malabares entre los dos entornos! Con estos hooks, puedes acceder directamente a los datos relevantes según el entorno, de manera sencilla.

typescript
1// ServerComponent.tsx
2import { useServerContext } from 'next/hooks';
3
4interface ServerData {
5  username: string;
6  role: string;
7}
8
9function ServerComponent() {
10  const serverData = useServerContext<ServerData>(); // Tipado de datos del servidor
11  return <div>Servidor: {serverData.username} - {serverData.role}</div>;
12}
13export default ServerComponent;

typescript
1// ClientComponent.tsx
2import { useClientContext } from 'next/hooks';
3
4interface ClientData {
5  theme: string;
6  language: string;
7}
8
9function ClientComponent() {
10  const clientData = useClientContext<ClientData>(); // Tipado de datos del cliente
11  return <div>Cliente: {clientData.theme} - {clientData.language}</div>;
12}
13export default ClientComponent;

Estos hooks permiten una gestión más fluida de la información específica del servidor y del cliente, sin comprometer el rendimiento. ¿Práctico, verdad? 😉

`useLoadingState`: gestión nativa del estado de carga

El hook useLoadingState simplifica la gestión de los estados de carga, ofreciendo una alternativa nativa a los enfoques más artesanales. ¡Perfecto para saber cuándo mostrar los loaders!

typescript
1import { useLoadingState } from 'next/hooks';
2
3function LoadingComponent() {
4  const isLoading = useLoadingState();
5  return (
6    <div>
7      {isLoading ? <p>Cargando...</p> : <p>¡Contenido cargado!</p>}
8    </div>
9  );
10}
11export default LoadingComponent;

Con useLoadingState, puedes mantener un ojo en el estado de carga de forma nativa, lo que permite una mejor UX sin sobrecargar tu código.

2. Turbopack: un bundler ultra potente 🚀

¡He aquí Turbopack, el nuevo bundler de Next.js! Diseñado para aprovechar la arquitectura multihilo, Turbopack reduce drásticamente los tiempos de build y rebuild, especialmente para proyectos grandes. Adiós a las largas esperas, bienvenidos los builds instantáneos.

Activar Turbopack

Para activar Turbopack, simplemente añade esta configuración experimental en tu archivo next.config.js:

typescript
1// next.config.js
2const nextConfig = {
3  experimental: {
4    enableTurbopack: true,
5  },
6};
7export default nextConfig;

Turbopack en acción

Turbopack funciona con un enfoque modular, analizando solo las partes necesarias. ¿El resultado? Builds más rápidos y máxima reactividad en desarrollo, incluso en proyectos grandes.

3. Gestión de errores y seguridad reforzada 🔒

Next.js 15 también mejora la gestión de errores, haciendo los mensajes de error más precisos y los logs más completos. Esto hace que la depuración sea más rápida y ayuda a diagnosticar problemas rápidamente en producción.

Ejemplo de gestión de errores

Así es como capturar errores con Next.js para gestionar mejor los casos críticos:

typescript
1try {
2  // Operación susceptible de fallar
3} catch (error) {
4  console.error('Error capturado:', error);
5  // Log más detallado aquí si es necesario
6}

Estas mejoras simplifican la depuración y refuerzan la seguridad, limitando la información sensible que podría quedar expuesta.

4. Mejoras en el renderizado del lado del servidor y streaming

Para las aplicaciones que requieren un renderizado del lado del servidor (SSR) rápido, Next.js 15 mejora el streaming SSR, haciendo la experiencia de usuario más fluida. El renderizado progresivo permite enviar los componentes prioritarios tan pronto como estén listos, optimizando el tiempo de carga percibido.

Uso del streaming SSR

Imaginemos una página de producto donde cierta información crítica, como las imágenes y el precio, deben mostrarse prioritariamente:

typescript
1import { Suspense } from 'react';
2
3function ProductPage() {
4  return (
5    <>
6      <Suspense fallback={<p>Cargando imagen...</p>}>
7        <ProductImage />
8      </Suspense>
9      <Suspense fallback={<p>Cargando precio...</p>}>
10        <ProductPrice />
11      </Suspense>
12    </>
13  );
14}
15export default ProductPage;

Este enfoque asegura que los usuarios vean primero la información esencial, mejorando así la experiencia de carga.

5. TypeScript optimizado 💪

Los fans de TypeScript no se sentirán decepcionados. Next.js 15 mejora el soporte de TS con:

Tipos más precisos para evitar errores comunes,
Una verificación de tipos más eficiente durante el build,
Tipos específicos para las nuevas APIs como useServerContext.

Configuración TypeScript

Si aún no lo has hecho, Next.js genera un archivo tsconfig.json optimizado para TypeScript, con una configuración que facilita la gestión de rutas y la resolución de módulos:

typescript
1// tsconfig.json
2{
3  "compilerOptions": {
4    "target": "es2020",
5    "module": "esnext",
6    "strict": true,
7    "baseUrl": ".",
8    "paths": {
9      "@/components/*": ["components/*"]
10    }
11  },
12  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
13  "exclude": ["node_modules"]
14}

Esta configuración ayuda a reducir los conflictos de rutas y asegura que los módulos se gestionen correctamente en tu proyecto.

Conclusión

Next.js 15 trae mejoras sustanciales para acelerar el desarrollo y hacer nuestras aplicaciones más eficientes. Hooks para gestionar el contexto, Turbopack para builds rápidos, optimizaciones de TypeScript y mucho más. Esta actualización tiene todo lo necesario para hacer brillar el código y aumentar la productividad. ¿Listo para adoptar estas novedades? ¡Next.js 15 te está esperando!

¡Buen código y hasta pronto! 🚀