¿Por qué next/font suprime por completo las solicitudes de red a Google Fonts en runtime?

Durante la compilación (next build), el framework descarga los archivos de fuentes WOFF2 directamente de los servidores de Google y los almacena en el directorio estático local (.next/static). En producción, las fuentes se sirven desde el mismo dominio o CDN del proyecto, eliminando consultas DNS adicionales, negociaciones TLS y rastreos externos.

¿Cuál es la diferencia entre afterInteractive y lazyOnload en next/script?

afterInteractive inyecta el script tan pronto como React completa la hidratación del DOM, siendo óptimo para herramientas analíticas prioritarias (GTM). lazyOnload pospone la ejecución hasta que el navegador entra en reposo (requestIdleCallback) tras cargar todos los recursos iniciales, liberando CPU para la interacción del usuario.

¿En qué archivo está permitido utilizar beforeInteractive y cuál es el motivo?

Está permitido exclusivamente dentro del layout raíz (app/layout.tsx). Su objetivo es ejecutar código de seguridad o polyfills antes de que arranque la hidratación de React. Si se permitiera en rutas dinámicas anidadas, Next.js no podría asegurar su finalización antes de montar los componentes del cliente.

¿De qué forma elimina next/font el Cumulative Layout Shift (CLS) en la carga de texto?

Next.js analiza las métricas de la fuente web y sintetiza una regla @font-face de respaldo con size-adjust, ascent-override, descent-override y line-gap-override. Esto equipara las dimensiones de la fuente del sistema con las de la fuente final, evitando saltos de línea durante la sustitución.

¿Cuáles son las ventajas de emplear fuentes variables (Variable Fonts) en Next.js?

Una tipografía variable engloba todos los grosores (del 100 al 900) y estilos en un único archivo WOFF2 cuyo peso es inferior al de 2 o 3 archivos estáticos combinados. Se prescinde de especificar arrays de pesos y en CSS se pueden animar gradualmente los grosores sin peticiones adicionales.

¿Por qué es obligatorio el atributo id en scripts en línea dentro de next/script?

A diferencia de los scripts externos con src, el código incrustado carece de una URL identificativa. Next.js utiliza el valor de id como clave de deduplicación para certificar que el script se ejecuta una única vez y no se reinicia durante las transiciones de página del cliente.

¿Cuándo resulta preferible configurar display: 'optional' en lugar de 'swap' en next/font?

display: 'optional' asigna un periodo de bloqueo de renderizado mínimo (~100 ms) y suprime el periodo de sustitución. Si la fuente no está en la caché del disco, el navegador mantiene la fuente de respaldo del sistema durante toda la sesión sin redibujados bruscos, garantizando 0 CLS y optimizando el LCP móvil.

¿Cómo se configura la tipografía de next/font en Tailwind CSS v4?

En Tailwind v4 el archivo tailwind.config.ts ya no se utiliza. La fuente se asocia mediante una variable CSS (ej. variable: '--font-inter') en o y se mapea en app/globals.css con la directiva @theme inline: --font-sans: var(--font-inter), sans-serif;.

¿Qué beneficios aporta el paquete oficial @next/third-parties frente a implementaciones manuales con next/script?

Desarrollado conjuntamente por los equipos de Google Chrome y Next.js, implementa patrones de carga diferida avanzada: retrasa scripts de proveedores hasta la interacción real del usuario y reduce el bloqueo del Main Thread para maximizar las métricas INP y TBT.

¿Cómo funciona strategy='worker' con Partytown y cuáles son sus limitaciones?

Ejecuta los scripts pesados en un Web Worker en segundo plano, interceptando llamadas al DOM mediante comunicación sincrónica. Sus limitaciones abarcan la imposibilidad de ejecutar métodos síncronos que requieran respuestas inmediatas del layout y posibles conflictos de CORS con dominios sin proxy.

Optimización de fuentes y scripts en Next.js: next/font y next/script — Next.js 16 App Router

Por qué es importante#

En el rendimiento del lado del cliente, la tipografía y el código JavaScript de terceros representan las dos mayores amenazas para la estabilidad visual y la latencia de respuesta de la interfaz.

Al enlazar fuentes externas con métodos tradicionales (como <link href="https://fonts.googleapis.com/css2...">), el navegador debe recorrer una cascada de red secuencial: descargar el HTML, detectar el archivo CSS, establecer una conexión TLS independiente con los servidores de Google Fonts, interpretar la regla @font-face y, finalmente, solicitar los binarios .woff2. Durante este proceso emergen anomalías visuales perjudiciales:

FOIT (Flash of Invisible Text): el texto permanece invisible hasta que culmina la descarga.
FOUT (Flash of Unstyled Text): el navegador dibuja una fuente del sistema sin ajustar y luego la sustituye por la personalizada, disparando la métrica Cumulative Layout Shift (CLS).

Los scripts de terceros (herramientas analíticas, píxeles publicitarios, widgets de atención al cliente) introducen otro cuello de botella: la saturación del hilo principal (Main Thread). Analizar y compilar cientos de kilobytes de código externo bloquea las interacciones del usuario, dañando la métrica INP (Interaction to Next Paint).

Next.js solventa ambas deficiencias a nivel arquitectónico mediante next/font (alojamiento local Zero-RTT en tiempo de compilación con síntesis de métricas de respaldo) y next/script (estrategias granulares de orquestación de carga).

Modelo mental#

Arquitectura de `next/font`#

El módulo next/font traslada la descarga de tipografías externas desde el navegador del cliente a la fase de compilación estática (next build):

Zero External Requests: Next.js descarga los archivos WOFF2 (incluyendo Google Fonts) en el directorio local .next/static. El navegador no realiza ninguna petición externa a servidores de terceros en producción.
Cero CLS mediante síntesis de fuentes de respaldo: Next.js analiza las métricas de glifos OpenType de la fuente personalizada y genera automáticamente una regla @font-face para la fuente del sistema utilizando el descriptor size-adjust. La fuente del sistema ocupa exactamente el mismo espacio físico en el DOM, impidiendo saltos de línea al completarse la descarga.

Arquitectura de `next/script`#

El componente <Script> coordina la ejecución de etiquetas <script> en sincronía con el proceso de hidratación de componentes de React.

Estrategias de carga en next/script: Comparativa arquitectónica

Критерий	Estrategia	Comportamiento y ámbito de aplicación
beforeInteractive	Pre-hidratación de React	Permitido EXCLUSIVAMENTE en app/layout.tsx. Se inyecta en el flujo crítico de HTML antes de React. Indicado para tokens de seguridad y polyfills del core.
afterInteractive	Post-hidratación (Predeterminado)	Se inserta en el DOM inmediatamente después de hidratar los componentes. Idóneo para Tag Managers (GTM) y analítica fundamental.
lazyOnload	Durante periodos de inactividad	Pospone la carga hasta requestIdleCallback tras finalizar la carga de la página. Para widgets secundarios (chats, reseñas, embeds sociales).
worker (Experimental)	Dentro de un Web Worker (Partytown)	Se ejecuta fuera del hilo principal del navegador. Libera la CPU permitiendo obtener puntuaciones óptimas de INP.

Ciclo de vida de carga de fuentes y scripts en Next.js

1. Descarga y caché Zero-RTT en build (next/font)Build Pipeline

Durante next build, Next.js descarga los binarios WOFF2 localmente. En runtime no se realizan consultas a servidores de Google Fonts.

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });

2. Síntesis de métricas fallback (Zero CLS)CSS Synthesis

Se generan reglas @font-face con descriptores size-adjust y ascent-override, reservando el espacio exacto en el DOM.

@font-face { font-family: 'Inter Fallback'; size-adjust: 107.4%; }

3. Inyección de scripts críticos (beforeInteractive)Pre-Hydration

En el root layout se introducen los scripts esenciales que deben operar antes de que inicie la hidratación de React.

4. Hidratación de React y ejecución afterInteractivePost-Hydration

React activa el árbol de componentes. Seguidamente se disparan las herramientas de telemetría, errores (Sentry) y GTM.

5. Carga diferida en reposo de la CPU (lazyOnload)Idle State

Cuando el navegador entra en reposo (requestIdleCallback), se cargan los SDKs de soporte al cliente sin penalizar el INP.

Sintaxis y API#

Configuración de Google Fonts y fuentes locales#

Next.js ofrece soporte integrado para Variable Fonts y archivos de fuentes locales.

tsxapp/fonts.ts (Inicialización de fuentes del proyecto)

import { Inter, JetBrains_Mono } from 'next/font/google';
import localFont from 'next/font/local';

// 1. Tipografía variable de Google Fonts (incluye todos los pesos por defecto)
export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

// 2. Fuente monoespaciada con declaración explícita de pesos
export const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-jetbrains-mono',
});

// 3. Tipografía local personalizada alojada en el sistema de archivos
export const customBrandFont = localFont({
  src: [
    {
      path: '../public/fonts/BrandFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/BrandFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-brand',
  display: 'swap',
});

Integración de fuentes en el Root Layout#

Las fuentes deben inicializarse a nivel raíz y vincularse a <html> o <body> mediante variables CSS:

tsxapp/layout.tsx (Integración de fuentes en Root Layout)

import type { Metadata } from 'next';
import { inter, jetbrainsMono } from '@/app/fonts';
import Script from 'next/script';
import '@/app/globals.css';

export const metadata: Metadata = {
  title: 'Fullstack Agentic Lab - Plataforma Optimizada',
  description: 'Arquitectura Next.js de alto rendimiento',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="es"
      className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}
    >
      <head>
        {/* beforeInteractive está restringido EXCLUSIVAMENTE al Root Layout */}
        <Script
          id="security-headers-init"
          strategy="beforeInteractive"
          src="https://cdn.agenticlab.dev/security-shield.js"
        />
      </head>
      <body className="min-h-screen bg-bg-base text-text-primary font-sans">
        {children}
      </body>
    </html>
  );
}

Configuración con Tailwind CSS v4#

En Tailwind CSS v4 el archivo tailwind.config.ts queda en desuso. La asignación de variables de next/font se efectúa directamente en app/globals.css mediante la directiva @theme inline:

cssapp/globals.css (Asignación tipográfica en Tailwind CSS v4)

@import "tailwindcss";

@theme inline {
  /* Vinculación de variables CSS a las clases utilitarias font-sans y font-mono */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
  --font-heading: var(--font-inter);
}

Estrategias de `next/script` y scripts en línea#

Gestión de scripts analíticos y widgets de terceros mediante <Script>:

tsxcomponents/AnalyticsScripts.tsx (Estrategias y scripts en línea)

'use client';

import Script from 'next/script';

export function AnalyticsScripts() {
  return (
    <>
      {/* 1. afterInteractive: Script analítico ejecutado inmediatamente tras la hidratación */}
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
        strategy="afterInteractive"
      />

      {/* 2. Script en línea: La propiedad 'id' es OBLIGATORIA para evitar duplicados */}
      <Script id="google-analytics-setup" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXXXXX', { page_path: window.location.pathname });
        `}
      </Script>

      {/* 3. lazyOnload: Widget de atención pospuesto a periodos de inactividad de CPU */}
      <Script
        src="https://cdn.support-chat.com/widget.js"
        strategy="lazyOnload"
        onLoad={() => console.log('Support chat widget loaded during idle.')}
      />
    </>
  );
}

PUNTO DE CONTROL

Comprobación de conceptos: Restricciones de strategy='beforeInteractive'

+15 XP

Un desarrollador incluye la etiqueta <Script src='/payment-sdk.js' strategy='beforeInteractive' /> dentro de app/checkout/page.tsx. ¿Por qué el compilador de Next.js aborta con un error fatal?

Patrones prácticos#

1. El paquete oficial `@next/third-parties`#

En versiones modernas de Next.js, la integración manual de Google Tag Manager, Google Analytics o reproductores de YouTube mediante <Script> ha sido sustituida por el paquete oficial @next/third-parties, optimizado por el equipo Chrome Aurora de Google para preservar las métricas de TBT y LCP.

tsxapp/layout.tsx (Uso de @next/third-parties)

import { GoogleTagManager, GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        {/* Scripts de terceros optimizados automáticamente */}
        <GoogleTagManager gtmId="GTM-XYZ1234" />
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  );
}

2. Optimización de LCP mediante `display: 'optional'`#

El ajuste del valor de font-display a 'optional' es un recurso determinante para maximizar las métricas en conexiones móviles:

El navegador concede una ventana de tiempo mínima (~100 ms) para recuperar la fuente de la caché del disco.
Si está en caché, se muestra de inmediato.
Si no está en caché, se dibuja con la fuente de respaldo del sistema y no realiza sustitución posterior durante la sesión actual (garantizando 0 CLS y eliminando bloqueos de render). La tipografía se descarga en segundo plano para visitas posteriores.

typescript

export const inter = Inter({
  subsets: ['latin'],
  display: 'optional', // Maximiza las métricas de Core Web Vitals en redes móviles
  variable: '--font-inter',
});

PUNTO DE CONTROL

Comprobación de conceptos: Eliminación de CLS en next/font

+15 XP

¿De qué manera next/font consigue que el Cumulative Layout Shift sea nulo (CLS = 0) al sustituir la fuente del sistema por la tipografía web descargada?

Errores comunes#

Ошибка: Utilización de beforeInteractive fuera de app/layout.tsx

Configurar strategy="beforeInteractive" en páginas anidadas (page.tsx) o componentes cliente genera un fallo de compilación en Next.js:
Error: next/script's beforeInteractive strategy is only allowed in the root layout (app/layout.js).

Solución: Restringe beforeInteractive estrictamente al archivo raíz app/layout.tsx. En rutas hijas utiliza strategy="afterInteractive" o lazyOnload.

Ошибка: Scripts en línea sin el atributo identificador id

Incluir código incrustado en <Script> omitiendo la propiedad id provoca el error: next/script: id is required for inline scripts. Next.js precisa esta clave para evitar ejecuciones duplicadas en navegaciones entre rutas del cliente.

Solución: Asigna siempre un identificador único en formato texto: <Script id="analytics-init">{...}</Script>.

Ошибка: Definir tipografías en tailwind.config.ts en Tailwind CSS v4

En Tailwind CSS v4 el archivo tailwind.config.ts ha quedado obsoleto y el compilador lo ignora. Ajustar theme.extend.fontFamily en TypeScript no surtirá ningún efecto.

Solución: Declara la asignación de variables tipográficas mediante la directiva @theme inline dentro de app/globals.css.

Ошибка: Declarar fuentes no variables sin acotar los pesos

Importar tipografías no variables (como Roboto) sin concretar pesos produce errores de compilación, mientras que solicitar todas las variantes (['100', '300', '400', '500', '700', '900']) sobrecarga la descarga con cientos de kilobytes innecesarios.

Solución: Prioriza siempre fuentes variables (Inter, Geist), que unifican todos los pesos en un único archivo WOFF2 liviano. Si utilizas fuentes estáticas, restringe la carga exclusivamente a los pesos requeridos (ej. weight: ['400', '700']).

Ошибка: Deterioro del INP por scripts analíticos descontrolados

Cargar Google Tag Manager o píxeles de seguimiento con beforeInteractive o llamadas desmedidas en afterInteractive congestiona el hilo principal del navegador entre 500 y 1500 ms durante el arranque, degradando el INP.

Solución: Utiliza el paquete @next/third-parties/google o traslada la ejecución de scripts a un Web Worker mediante strategy="worker" y Partytown.

Ошибка: Importación global de fuentes dentro de componentes aislados

Inicializar la tipografía (const inter = Inter({...})) en el interior de un componente individual de tarjeta o botón hace que los estilos de fuente se inyecten en el DOM solo cuando dicho componente se renderiza por primera vez.

Solución: Centraliza la inicialización de tipografías en un módulo compartido (ej. app/fonts.ts) y vincula las variables CSS en el layout raíz app/layout.tsx.

Preguntas para entrevistas#

Preguntas de entrevista10 preguntas

Temas relacionados

Optimización de imágenes en Next.js: El componente next/image Core Web Vitals y auditoría de rendimiento en Next.js Análisis de bundle, Tree Shaking y Code Splitting en Next.js Metadatos y optimización SEO en Next.js App Router

Optimización de fuentes y scripts en Next.js: next/font y next/script

Por qué es importante#

Modelo mental#

Arquitectura de next/font#

Arquitectura de next/script#

Sintaxis y API#

Configuración de Google Fonts y fuentes locales#

Integración de fuentes en el Root Layout#

Configuración con Tailwind CSS v4#

Estrategias de next/script y scripts en línea#

Patrones prácticos#

1. El paquete oficial @next/third-parties#

2. Optimización de LCP mediante display: 'optional'#

Errores comunes#

Ошибка: Utilización de beforeInteractive fuera de app/layout.tsx

Ошибка: Scripts en línea sin el atributo identificador id

Ошибка: Definir tipografías en tailwind.config.ts en Tailwind CSS v4

Ошибка: Declarar fuentes no variables sin acotar los pesos

Ошибка: Deterioro del INP por scripts analíticos descontrolados

Ошибка: Importación global de fuentes dentro de componentes aislados

Preguntas para entrevistas#

Por qué es importante#

Modelo mental#

Arquitectura de next/font#

Arquitectura de next/script#

Sintaxis y API#

Configuración de Google Fonts y fuentes locales#

Integración de fuentes en el Root Layout#

Configuración con Tailwind CSS v4#

Estrategias de next/script y scripts en línea#

Patrones prácticos#

1. El paquete oficial @next/third-parties#

2. Optimización de LCP mediante display: 'optional'#

Errores comunes#

Ошибка: Utilización de beforeInteractive fuera de app/layout.tsx

Ошибка: Scripts en línea sin el atributo identificador id

Ошибка: Definir tipografías en tailwind.config.ts en Tailwind CSS v4

Ошибка: Declarar fuentes no variables sin acotar los pesos

Ошибка: Deterioro del INP por scripts analíticos descontrolados

Ошибка: Importación global de fuentes dentro de componentes aislados

Preguntas para entrevistas#

Arquitectura de `next/font`#

Arquitectura de `next/script`#

Estrategias de `next/script` y scripts en línea#

1. El paquete oficial `@next/third-parties`#

2. Optimización de LCP mediante `display: 'optional'`#

Arquitectura de `next/font`#

Arquitectura de `next/script`#

Estrategias de `next/script` y scripts en línea#

1. El paquete oficial `@next/third-parties`#

2. Optimización de LCP mediante `display: 'optional'`#