Почему next/font полностью исключает внешние сетевые запросы к Google Fonts в рантайме?

На этапе билда (next build) фреймворк самостоятельно скачивает необходимые файлы шрифтов (.woff2) из репозитория Google и сохраняет их в директорию статических ассетов (.next/static). В браузере шрифты отдаются с вашего же домена или CDN, что устраняет дополнительный DNS lookup, TLS-handshake и защищает приватность пользователей.

В чем разница между стратегиями afterInteractive и lazyOnload в next/script?

afterInteractive внедряет скрипт сразу после гидратации React-дерева, что подходит для критичной аналитики (GTM, Яндекс Метрика). lazyOnload откладывает загрузку до срабатывания requestIdleCallback после полной загрузки всех ресурсов страницы, что освобождает сеть и CPU для интерактивности.

Где разрешено использовать стратегию beforeInteractive и почему?

Стратегия beforeInteractive разрешена строго внутри корневого layout (app/layout.tsx). Ее задача — выполнить код до гидратации React. Если бы она использовалась во вложенных динамических маршрутах, Next.js не смог бы гарантировать ее выполнение до рендеринга клиентского дерева компонентов.

Как next/font устраняет проблему Cumulative Layout Shift (CLS) при загрузке текста?

Next.js анализирует метрики кастомного шрифта и автоматически генерирует в CSS резервный шрифт с дескрипторами size-adjust, ascent-override, descent-override и line-gap-override. Системный шрифт подгоняется по ширине и высоте под кастомный, предотвращая прыжки строк при переключении.

В чем преимущество использования вариативных шрифтов (Variable Fonts) в Next.js?

Вариативный шрифт содержит весь спектр весов (от 100 до 900) и стилей в одном WOFF2-файле, который весит меньше, чем 2–3 отдельных статичных начертания. При импорте не требуется указывать массив весов, а в CSS доступно плавное изменение font-weight без подгрузки новых ресурсов.

Почему для инлайн-скриптов в next/script обязателен атрибут id?

В отличие от внешних скриптов с src, инлайн-скрипт не имеет уникального URL. Next.js использует переданный id как ключ дедупликации, гарантируя, что скрипт выполнится ровно один раз и не будет перезапускаться при переходах по страницам (Client-side navigation).

Когда для свойства display в next/font предпочтительнее значение 'optional' вместо 'swap'?

Значение 'optional' дает шрифту крайне малый порог блокировки (~100мс) и нулевой период подмены (swap). Если шрифт не успел загрузиться из кэша, браузер отображает системный шрифт на все время сессии без повторной перерисовки. Это полностью исключает скачки верстки и является лучшей практикой для мобильного LCP.

Как настроить типографику next/font в Tailwind CSS v4?

В Tailwind v4 устарел tailwind.config.ts. Шрифт передается через CSS-переменную (variable: '--font-inter') в тег или , а в файле app/globals.css мапится через директиву @theme inline: --font-sans: var(--font-inter), sans-serif;.

В чем преимущество официального пакета @next/third-parties перед ручным написанием next/script?

Пакет @next/third-parties (GoogleTagManager, GoogleAnalytics, YouTubeEmbed) разработан командой Google Chrome и Next.js. Он реализует передовые техники оптимизации: ленивую загрузку плейсхолдеров, задержку загрузки тяжелых скриптов до реального взаимодействия пользователя и оптимизированную интеграцию с DataLayer.

Как работает strategy='worker' с библиотекой Partytown и какие у нее ограничения?

Скрипт загружается и исполняется внутри Web Worker, изолированного от главного потока браузера. Доступ к DOM эмулируется через синхронные XHR/Atomics сообщения. Ограничения: скрипты не могут синхронно вызывать методы, требующие мгновенного ответа DOM, а также возникают CORS-проблемы при обращении к внешним доменам без проксирования.

Оптимизация шрифтов и скриптов в Next.js: next/font и next/script — Next.js 16 App Router

Зачем это нужно#

В клиентской производительности веб-приложений типографика и сторонний JavaScript представляют главную угрозу стабильности интерфейса и времени отклика.

При традиционном подключении внешних шрифтов (например, через <link href="https://fonts.googleapis.com/css2...">) браузер вынужден выполнить многоступенчатый сетевой каскад: запросить HTML, обнаружить CSS, установить внешнее TLS-соединение с сервером Google Fonts, распарсить таблицу @font-face и лишь затем скачать файлы .woff2. В этот период возникают деструктивные визуальные артефакты:

FOIT (Flash of Invisible Text) — текст полностью невидим до окончания загрузки.
FOUT (Flash of Unstyled Text) — браузер показывает системный шрифт, а затем скачкообразно меняет его на кастомный, вызывая сильный сдвиг верстки (деградацию метрики CLS).

Сторонние скрипты (аналитика, рекламные трекеры, чат-виджеты) создают другую проблему: они захватывают основной поток (Main Thread). Синхронный парсинг и компиляция сотен килобайт чужого кода замораживают пользовательский ввод, разрушая показатель INP (Interaction to Next Paint).

Next.js решает обе проблемы на архитектурном уровне через модули next/font (Zero-RTT локализация ассетов на этапе сборки с синтезом fallback-метрик) и next/script (гранулярные стратегии приоритизации загрузки).

Ментальная модель#

Архитектура `next/font`#

Модуль next/font переносит загрузку внешних шрифтов с клиентского рантайма на этап статической сборки проекта (next build):

Zero External Requests: Next.js скачивает файлы шрифтов (включая Google Fonts) в локальную директорию .next/static. Браузер пользователя больше не совершает ни одного запроса к внешним серверам.
Нулевой CLS через синтез fallback-шрифта: Next.js извлекает метрики кастомного шрифта и автоматически генерирует в CSS правила для системного шрифта (Arial, Times New Roman) с дескриптором size-adjust. Системный шрифт занимает то же пространство в DOM, что и будущий кастомный, полностью устраняя сдвиг строк при смене начертания.

Архитектура `next/script`#

Компонент <Script> инкапсулирует расширенное управление жизненным циклом тега <script>, координируя его выполнение с процессом гидратации React-дерева.

Стратегии загрузки next/script: Архитектурное сравнение

Критерий	Стратегия	Поведение и область применения
beforeInteractive	До гидратации React	Разрешена ТОЛЬКО в app/layout.tsx. Загружается в критическом пути HTML. Для полифиллов и бот-защиты (Cloudflare Turnstile).
afterInteractive	Сразу после гидратации (Default)	Вставляется в DOM сразу после гидратации компонентов. Оптимально для тег-менеджеров (GTM) и критичной аналитики.
lazyOnload	Во время простоя браузера	Ждет requestIdleCallback после полной загрузки страницы. Для второстепенных виджетов (чаты, соцсети, отзывы).
worker (Experimental)	Внутри Web Worker (Partytown)	Исполняется вне главного потока браузера. Освобождает процессор для идеального показателя INP.

Жизненный цикл загрузки шрифтов и скриптов в Next.js

Zero-RTT Build Time кэширование (next/font)Build Pipeline

На этапе сборки Next.js скачивает бинарники WOFF2 локально в директорию проекта. В рантайме полностью отсутствуют сетевые запросы к серверам Google Fonts.

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

Синтез метрик fallback-шрифта (Zero CLS)CSS Synthesis

Генерируются правила @font-face с дескрипторами size-adjust и ascent-override. Текст резервирует идеальные геометрические пропорции в DOM.

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

Внедрение критических скриптов (beforeInteractive)Pre-Hydration

В head корневого layout внедряются теги <script>, необходимые до старта гидратации (безопасность, полифиллы ядра).

Гидратация React и запуск afterInteractivePost-Hydration

React активирует виртуальный DOM. Сразу после этого запускаются скрипты аналитики и мониторинга ошибок (Sentry, GTM).

Фоновая подгрузка некритичных виджетов (lazyOnload)Idle State

Браузер завершает первичный рендеринг. Во время паузы в работе процессора (requestIdleCallback) подгружаются чаты и тяжелые SDK соцсетей.

Синтаксис и API#

Подключение Google Fonts и локальных шрифтов#

Next.js поддерживает как Variable Fonts, так и статические начертания.

tsxapp/fonts.ts (Инициализация шрифтов приложения)

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

// 1. Вариативный шрифт Google Fonts (содержит все веса по умолчанию)
export const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  display: 'swap',
  variable: '--font-inter',
});

// 2. Моноширинный шрифт с явным указанием весов (для невариативных шрифтов)
export const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-jetbrains-mono',
});

// 3. Локальный кастомный шрифт из файловой системы
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',
});

Интеграция шрифтов в корневой Layout#

Шрифты инициализируются строго на уровне корневого слоя и внедряются в <html> или <body> через CSS-переменные.

tsxapp/layout.tsx (Корневой 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 - Оптимизированная платформа',
  description: 'Пример высокопроизводительного Next.js приложения',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="ru"
      className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}
    >
      <head>
        {/* beforeInteractive разрешен СТРОГО внутри Root Layout */}
        <Script
          id="security-headers-init"
          strategy="beforeInteractive"
          src="https://cdn.example.com/security-shield.js"
        />
      </head>
      <body className="min-h-screen bg-bg-base text-text-primary font-sans">
        {children}
      </body>
    </html>
  );
}

Интеграция с Tailwind CSS v4#

В Tailwind CSS v4 конфигурационный файл tailwind.config.ts не используется. Привязка переменных next/font осуществляется декларативно в globals.css через директиву @theme inline.

cssapp/globals.css (Настройка шрифтов в Tailwind CSS v4)

@import "tailwindcss";

@theme inline {
  /* Привязываем CSS-переменные шрифтов к стандартным утилитам font-sans и 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);
}

Стратегии `next/script` и инлайн-скрипты#

Для внедрения аналитики, трекеров и виджетов используется компонент <Script>.

tsxcomponents/AnalyticsScripts.tsx (Скрипты со стратегиями и инлайн-кодом)

'use client';

import Script from 'next/script';

export function AnalyticsScripts() {
  return (
    <>
      {/* 1. afterInteractive: Внешний скрипт аналитики сразу после гидратации */}
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
        strategy="afterInteractive"
      />

      {/* 2. Инлайн-скрипт: Атрибут 'id' ОБЯЗАТЕЛЕН для дедупликации */}
      <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: Некритичный виджет чата поддержки в период простоя */}
      <Script
        src="https://cdn.support-chat.com/widget.js"
        strategy="lazyOnload"
        onLoad={() => console.log('Support chat widget loaded during idle.')}
      />
    </>
  );
}

ЧЕКПОИНТ

Проверка понимания: Архитектурные ограничения strategy='beforeInteractive'

+15 XP

Разработчик добавил тег <Script src='/payment-sdk.js' strategy='beforeInteractive' /> внутри страницы app/checkout/page.tsx. Почему сборщик Next.js завершится с фатальной ошибкой?

Практические паттерны#

1. Официальный пакет `@next/third-parties`#

В современных версиях Next.js ручное подключение Google Tag Manager, Google Analytics и YouTube через <Script> заменяется официальным пакетом @next/third-parties. Он оптимизирован инженерами Chrome Aurora и предотвращает деградацию TBT и LCP.

tsxapp/layout.tsx (Использование @next/third-parties)

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        {children}
        {/* Автоматически оптимизированный запуск GTM */}
        <GoogleTagManager gtmId="GTM-XYZ1234" />
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  );
}

2. Оптимизация LCP через `display: 'optional'`#

Свойство font-display со значением 'optional' — мощнейший инструмент для достижения идеального мобильного LCP:

Браузер выделяет чрезвычайно короткий интервал (~100 мс) на чтение шрифта из дискового кэша.
Если шрифт уже есть в кэше — он отображается немедленно.
Если шрифта нет в кэше — страница рендерится системным fallback-шрифтом и не перерисовывается повторно во время текущей сессии (нулевой CLS и отсутствие блокировки рендера). Сам файл шрифта скачивается в фоне и применяется уже при следующем визите.

typescript

export const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  display: 'optional', // Идеально для максимального балла Core Web Vitals на мобильных сетях
  variable: '--font-inter',
});

ЧЕКПОИНТ

Проверка понимания: Механика устранения CLS в next/font

+15 XP

Каким образом next/font обеспечивает нулевой Cumulative Layout Shift (CLS = 0) при подмене системного шрифта на кастомный веб-шрифт?

Распространённые ошибки#

Ошибка: Использование beforeInteractive вне app/layout.tsx

Попытка использовать стратегию strategy="beforeInteractive" внутри вложенных страниц (page.tsx), клиентских компонентов или дочерних layout приводит к фатальному сбою сборки или рантайм-крашу Next.js:
Error: next/script's beforeInteractive strategy is only allowed in the root layout (app/layout.js).

Решение: Стратегия beforeInteractive разрешена строго в корневом app/layout.tsx. Для любых вложенных страниц используйте strategy="afterInteractive" или lazyOnload.

Ошибка: Инлайн-скрипты без уникального атрибута id

При передаче встроенного кода внутрь компонента <Script> без обязательного свойства id Next.js выбрасывает ошибку: next/script: id is required for inline scripts. Это свойство необходимо фреймворку для дедупликации скриптов при клиентской навигации между маршрутами.

Решение: Всегда задавайте уникальный строковый id: <Script id="analytics-init">{...}</Script>.

Ошибка: Настройка шрифтов через tailwind.config.ts вместо @theme в Tailwind v4

В Tailwind CSS v4 файл tailwind.config.ts больше не генерируется и игнорируется движком стилей. Попытка настроить theme.extend.fontFamily в TypeScript-файле не приведет ни к какому эффекту.

Решение: Объявляйте соответствие переменных шрифтов через директиву @theme inline в файле app/globals.css.

Ошибка: Игнорирование вариативных шрифтов и раздувание бандла

Подключение невариативного шрифта (например, Roboto) без указания конкретных весов приводит к ошибке сборки, а перечисление всех весов (['100', '300', '400', '500', '700', '900']) заставляет браузер скачивать сотни килобайт файлов.

Решение: Всегда отдавайте предпочтение вариативным шрифтам (Variable Fonts: Inter, Geist, Roboto Flex), которые содержат все веса в одном легковесном файле WOFF2. Для невариативных шрифтов подключайте строго используемые веса (например, только weight: ['400', '700']).

Ошибка: Разрушение метрики INP неконтролируемыми скриптами аналитики

Подключение Google Tag Manager или Facebook Pixel через стратегию beforeInteractive или afterInteractive с десятками внутренних тегов приводит к тому, что во время начальной загрузки главный поток браузера зависает на 500–1500 мс, вызывая сбой метрики INP и зависание анимаций.

Решение: Используйте официальный оптимизированный пакет @next/third-parties/google (компоненты <GoogleTagManager> и <GoogleAnalytics>) либо переносите скрипты в веб-воркер через strategy="worker" с библиотекой Partytown.

Ошибка: Глобальный импорт шрифтов внутри отдельных компонентов

Инициализация шрифта (const inter = Inter({...})) внутри изолированного компонента карточки или кнопки приводит к тому, что стили шрифта подгружаются в DOM только в момент первого рендера этого компонента.

Решение: Всегда выносите инициализацию шрифтов в централизованный файл (например, app/fonts.ts) и подключайте CSS-переменные в корневом app/layout.tsx.

Вопросы для собеседования#

На собеседовании спросят10 вопросов

Связанные темы

Оптимизация изображений и компонент next/image Метрики Core Web Vitals (LCP, INP, CLS) в Next.js Анализ размера бандла и Tree Shaking Динамические метаданные и SEO-оптимизация

Оптимизация шрифтов и скриптов в Next.js: next/font и next/script

Зачем это нужно#

Ментальная модель#

Архитектура next/font#

Архитектура next/script#

Синтаксис и API#

Подключение Google Fonts и локальных шрифтов#

Интеграция шрифтов в корневой Layout#

Интеграция с Tailwind CSS v4#

Стратегии next/script и инлайн-скрипты#

Практические паттерны#

1. Официальный пакет @next/third-parties#

2. Оптимизация LCP через display: 'optional'#

Распространённые ошибки#

Ошибка: Использование beforeInteractive вне app/layout.tsx

Ошибка: Инлайн-скрипты без уникального атрибута id

Ошибка: Настройка шрифтов через tailwind.config.ts вместо @theme в Tailwind v4

Ошибка: Игнорирование вариативных шрифтов и раздувание бандла

Ошибка: Разрушение метрики INP неконтролируемыми скриптами аналитики

Ошибка: Глобальный импорт шрифтов внутри отдельных компонентов

Вопросы для собеседования#

Зачем это нужно#

Ментальная модель#

Архитектура next/font#

Архитектура next/script#

Синтаксис и API#

Подключение Google Fonts и локальных шрифтов#

Интеграция шрифтов в корневой Layout#

Интеграция с Tailwind CSS v4#

Стратегии next/script и инлайн-скрипты#

Практические паттерны#

1. Официальный пакет @next/third-parties#

2. Оптимизация LCP через display: 'optional'#

Распространённые ошибки#

Ошибка: Использование beforeInteractive вне app/layout.tsx

Ошибка: Инлайн-скрипты без уникального атрибута id

Ошибка: Настройка шрифтов через tailwind.config.ts вместо @theme в Tailwind v4

Ошибка: Игнорирование вариативных шрифтов и раздувание бандла

Ошибка: Разрушение метрики INP неконтролируемыми скриптами аналитики

Ошибка: Глобальный импорт шрифтов внутри отдельных компонентов

Вопросы для собеседования#

Архитектура `next/font`#

Архитектура `next/script`#

Стратегии `next/script` и инлайн-скрипты#

1. Официальный пакет `@next/third-parties`#

2. Оптимизация LCP через `display: 'optional'`#

Архитектура `next/font`#

Архитектура `next/script`#

Стратегии `next/script` и инлайн-скрипты#

1. Официальный пакет `@next/third-parties`#

2. Оптимизация LCP через `display: 'optional'`#