10 cosas que todo desarrollador de Next.js debe saber (pero nadie te lo dice)

Ya has desplegado tu Hello World en Vercel, has jugado con getServerSideProps y te sientes como el rey de React. Pero hay muchos más matices detrás de la fachada de Next.js. Aquí tienes diez cosas importantes que te ayudarán a mejorar y no entrar en pánico por errores inesperados 🧨

🚀 1. Carga estática, del servidor o del cliente: elige sabiamente

Next.js ofrece una selección de enfoques para la carga de datos:

• getStaticProps — generación estática

• getServerSideProps — render del servidor

• useEffect — lógica del cliente

🧠 Acércate a esto como un chef: no todos los platos deben prepararse a pedido (SSR), algunos deben prepararse con anticipación (SSG) y otros se sirven directamente desde la despensa (CSR).

🧩 2. Las rutas API son funciones de miniservidor

Los archivos en pages/api no son solo código. Estas son funciones reales sin servidor. Sin configuración del servidor Node, con inicio instantáneo. Pero recuerda:

🔧 No construyas un monolito. Es mejor llevar la lógica a módulos separados.

🧭 3. Enrutamiento basado en archivos: magia sin React Router

¿Quieres una nueva ruta? Simplemente crea un archivo en pages/, y listo, la ruta está lista.

Para páginas dinámicas:

pages/blog/[slug].js

✨ Y para casos complejos, las rutas de prueba serán útiles pages/blog/[...slug].js

📦 4. El tamaño del paquete es un asesino silencioso del rendimiento

100 KB aquí, 50 KB allá... y la página tarda una eternidad en cargarse.

• Utilice Bundlephobia antes de instalar nuevos paquetes

• Aplicar la importación dynamic():

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), { ssr: false });

⚡ Esto evitará el exceso de peso en la primera renderización.

🌍 5. Vercel es el mejor amigo, pero no el único

Next.js y Vercel son la pareja perfecta. Pero nadie prohíbe alojar el proyecto en Netlify, AWS o incluso Heroku.

🔥 Sin embargo, si quieres sacar el máximo partido de las funciones de Edge y de la optimización rápida de las imágenes, Vercel está fuera de competencia.

🖼️ 6. La optimización de imágenes está integrada: ¡aprovéchala!

El <img> habitual es cosa del pasado. Utilice el componente <Image>:

import Image from 'next/image';
<Image src="/cat.jpg" alt="Cat" width={500} height={300} />

🪄 Soporte de carga lenta, tamaños adaptables, CDN: mejora Lighthouse como un bono.

🔐 7. Middleware: un nuevo punto de control

Ahora puedes ejecutar la lógica hasta que se complete la solicitud:

import { NextResponse } from 'next/server';
export function middleware(req) {
  const loggedIn = checkAuth(req);
  if (!loggedIn) return NextResponse.redirect('/login');
  return NextResponse.next();
}

🛡️ Es como Express middleware, pero con esteroides.

💅 8. ¿Módulos CSS, Tailwind o Styled Components? Todo es compatible

• Módulos CSS: predeterminado

• Tailwind: para un estilo utilitario

• Styled Components / Emotion: para los amantes de los componentes con estilos

🚫 Simplemente no abuses de los estilos en línea.

🧪 9. Las pruebas no son una misión secundaria

Deja de esperar tener suerte. Configura las pruebas:

• Jest — para unidades

• React Testing Library — para componentes

• Cypress / Playwright: para end-to-end

🧘 Las pruebas en Next.js se configuran fácilmente y ahorran mucho tiempo en el futuro.

🧠 10. App Router vs Pages Router

Desde la versión 13, app/ es una nueva forma de enrutamiento con:

• React Server Components

• Diseños anidados

• loading.tsx, error.tsx

• Server Actions (todavía en beta)

Pero el bueno de pages/ sigue estable.

📌 Elige un enfoque para el proyecto: fiabilidad o posibilidades flexibles.

🔄 Bonificación: Hot Reload funciona... casi siempre

Si se rompe, intenta:

rm -rf .next
npm install

🤕 O llora un poco en la terminal si no ayuda.

Conclusión 🧘‍♂️

Next.js es una herramienta poderosa que te da superpoderes. Pero con un gran poder viene la necesidad de entender lo que sucede bajo el capó. Estas más de 10 cosas te ayudarán a evitar trampas y construir no solo un sitio web, sino una experiencia de usuario completa.

🛠️ Ya sea que estés trabajando en un proyecto de mascotas o en el próximo unicornio, cada vez que contrates npx create-next-app, recuerda: no solo estás creando código. Estás creando una impresión.