Чому next/font повністю виключає зовнішні мережеві запити до Google Fonts у рантаймі?

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

У чому різниця між стратегіями afterInteractive та lazyOnload у next/script?

afterInteractive впроваджує скрипт одразу після гідратації React-дерева, що підходить для критичної аналітики (GTM, аналітичні лічильники). lazyOnload відкладає завантаження до спрацьовування requestIdleCallback після повного завантаження всіх ресурсів сторінки, звільняючи мережу та процесор для інтерактивності.

Де дозволено використовувати стратегію 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 як ключ дедуплікації, гарантуючи, що скрипт виконається рівно один раз і не перезапускатиметься при клієнтській навігації між сторінками.

Коли для властивості 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. Він реалізує найкращі техніки оптимізації: ліниве завантаження плейсхолдерів, відтермінування важких скриптів до реальної взаємодії користувача та захист показників INP і TBT.

Як працює strategy='worker' з бібліотекою Partytown і які вона має обмеження?

Скрипт завантажується та виконується всередині Web Worker, ізольованого від головного потоку браузера. Доступ до DOM емулюється через синхронні повідомлення. Обмеження: скрипти не можуть синхронно викликати методи, що вимагають миттєвої реакції 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) — браузер відображає системний шрифт, а потім різко перемикається на кастомний, руйнуючи показник Cumulative Layout Shift (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 правило для системного шрифта з дескриптором 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

1. Zero-RTT Build Time кешування (next/font)Build Pipeline

Під час збірки Next.js завантажує двійкові файли WOFF2 локально в директорію проєкту. У рантаймі повністю відсутні зовнішні запити до серверів Google Fonts.

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

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

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

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

3. Впровадження критичних скриптів (beforeInteractive)Pre-Hydration

У head кореневого layout додаються скрипти, необхідні до початку гідратації React (безпека, поліфіли ядра).

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

React активує віртуальний DOM. Одразу після цього запускаються скрипти аналітики та моніторингу помилок (Sentry, GTM).

5. Фонове завантаження некритичних віджетів (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="uk"
      className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}
    >
      <head>
        {/* beforeInteractive дозволений СУВОРО всередині 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>
  );
}

Інтеграція з 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="uk">
      <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 призводить до помилки збірки:
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), які містять увесь спектр накреслень в одному легкому файлі 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.js: Компонент next/image Core Web Vitals та аудит продуктивності в Next.js Аналіз бандла, Tree Shaking та Code Splitting у Next.js Метадані та SEO оптимізація в Next.js App Router

Оптимізація шрифтів та скриптів у 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'`#