NextJS on Commentary of Takao

Partial Prerendering (PPR) en Next.js

Tue, 10 Feb 2026 00:00:00 +0900

Partial Prerendering (PPR) combina contenido estático prerenderizado con contenido dinámico transmitido vía streaming en una misma página.

El problema

SSG: rápido pero contenido obsoleto. SSR: contenido fresco pero más lento. PPR ofrece lo mejor de ambos: HTML estático inmediato + partes dinámicas en streaming.

Cómo funciona

Next.js prerenderiza el shell estático de la página. Los componentes dinámicos (con cookies(), headers(), searchParams) se renderizan bajo demanda.

Configuración

experimental.ppr = 'incremental' en next.config.js. Los componentes dinámicos se envuelven en Suspense. PPR solo aplica donde se detectan datos dinámicos.

Next.js 15 Stable: Mejores prácticas en producción

Sun, 05 Oct 2025 00:00:00 +0900

Introducción

Next.js 15 llega con soporte para React 19, un modelo de caché rediseñado y mejoras importantes en APIs asíncronas. Por defecto, las solicitudes fetch NO se cachean, simplificando la previsibilidad del comportamiento.

React 19 estable

Next.js 15 se empareja con React 19 estable, permitiendo el React Compiler para memoización automática. Soporte completo para use() y Server Actions.

Cambios en caché por defecto

En Next.js 14, fetch se cacheaba por defecto. En Next.js 15 NO se cachea — debes optar explícitamente con cache: 'force-cache'.

Descifrando los mecanismos de caché del App Router de Next.js

Thu, 10 Apr 2025 00:00:00 +0900

Introducción

El App Router de Next.js tiene cuatro capas de caché que pueden causar confusión. Este artículo explica cada una y cómo configurarlas.

Las cuatro capas

Router Cache (cliente): Cache de navegación en el navegador, basada en sesión.
Request Memoization (servidor): Desduplica fetch dentro de un mismo ciclo de renderizado.
Data Cache (servidor): Persiste respuestas de API entre solicitudes y usuarios.
Full Route Cache (servidor): HTML estático y payloads RSC en tiempo de build.

Request Memoization

Si la misma URL se fetch múltiples veces en el mismo árbol de componentes, solo la primera ejecuta la llamada API. Las siguientes leen de la caché de memoización.

Routing i18n en Next.js App Router

Tue, 08 Oct 2024 00:00:00 +0900

Next.js App Router ofrece routing internacionalizado con detección de idioma, redirecciones y Middleware. Soporta subpath y dominio.

Configuración

Define locales en next.config.js. defaultLocale. Middleware detecta el idioma preferido del navegador y redirige. El path incluye /es, /ja, etc.

Estrategias de routing

Subpath: /es/about, /ja/about. Dominio: es.example.com, ja.example.com. Subdominio. El Middleware maneja la detección y redirección.

next-intl

Biblioteca recomendada para internacionalización en Next.js. Mensajes en JSON, formateo de fechas/números, plurales. Integración con App Router.

Middleware en Next.js: Redirects, rewrites y protección

Tue, 18 Jun 2024 00:00:00 +0900

El Middleware de Next.js se ejecuta antes de cada solicitud, permitiendo redirecciones, reescrituras, autenticación y geolocalización en el edge.

Creación

Archivo middleware.ts en la raíz del proyecto. Exporta middleware(request) que retorna NextResponse.next(), redirect() o rewrite().

Matcher

Configura las rutas donde se ejecuta el middleware: export const config = { matcher: ['/dashboard/:path*'] }. Optimizado para ejecución en edge.

Casos de uso

Autenticación (redirigir a login), localización (detectar idioma), A/B testing (cookies), geobloqueo, mantenimiento (rewrite a página de mantenimiento).

Optimización de imágenes con Next.js Image

Tue, 26 Mar 2024 00:00:00 +0900

Next.js Image component optimiza imágenes automáticamente: formatos modernos (WebP, AVIF), lazy loading, y dimensiones responsive.

next/image

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />

Optimización en tiempo de build o bajo demanda (servidor de optimización).

Formatos y calidad

Next.js sirve WebP o AVIF si el navegador lo soporta. quality (1-100, default 75). sizes para imágenes responsive. priority para LCP.

Remote patterns

Configura remotePatterns en next.config.js para permitir imágenes de dominios externos. Protege contra abusos del optimizador.