Skip to main content
В этом руководстве подробно описано, как настроить проект Next.js (ERLC-Russia-Site) для автоматической загрузки всех статических ресурсов (JavaScript-чанков, CSS-файлов, шрифтов и медиа) с собственного CDN (cdn.erlcrussia.com). В результате основной сервер (erlcrussia.com) отдаёт исключительно начальный HTML и динамические API-запросы, а все ресурсы папки _next/static загружаются с CDN. В консоли разработчика браузера (F12, вкладка Network) запросы к папке _next на домене erlcrussia.com полностью отсутствуют.

Архитектура и Принцип Работы

Когда пользователь открывает страницу сайта на Next.js:
  1. Браузер запрашивает HTML-документ у основного сервера: GET https://erlcrussia.com/ru.
  2. Сервер возвращает сгенерированный HTML (SSR). Внутри HTML находятся теги <script>, <link rel="stylesheet"> и предзагрузки шрифтов.
  3. По умолчанию путь к чанкам выглядит как /_next/static/chunks/main-app.js. Но при настройке assetPrefix Next.js автоматически подставляет домен CDN:
  4. Браузер начинает параллельно загружать скрипты и стили с cdn.erlcrussia.com, снимая сетевую нагрузку и нагрузку на диск с основного Node.js-сервера.

Способы Доставки Чанков в CDN

Существует два надёжных подхода к организации работы CDN для Next.js:
Origin Pull (автоматическое подтягивание) — Edge-сервер CDN при первом запросе файла проверяет свой локальный кэш на SSD. Если файла нет, CDN сам запрашивает его у основного сайта (erlcrussia.com), сохраняет в кэш и отдаёт клиенту.Преимущества:
  • Не требуется изменять скрипты деплоя или загружать гигабайты файлов перед стартом контейнера.
  • При релизе новой версии сайта генерируются новые уникальные хэши файлов (например, main-a82f.js). CDN мгновенно и прозрачно подтянет новые файлы при первом же открытии страницы пользователями.
  • Старые чанки продолжают работать у пользователей, которые ещё не обновили вкладку браузера.

Пошаговая Интеграция

1

Настройка next.config.js

В конфигурационном файле проекта фронтенда укажите параметр assetPrefix. Рекомендуется включать его только в режиме production, чтобы во время локальной разработки (npm run dev) файлы отдавались локальным сервером:
next.config.js
Параметр assetPrefix изменяет URL только для статических ресурсов (_next/static/...). Сами страницы сайта, Server Actions и маршруты Route Handlers (/api/...) продолжают запрашиваться с основного домена erlcrussia.com.
2

Настройка Origin Pull на Edge CDN Сервере (Nginx)

Если CDN работает через Nginx на Edge VPS, добавьте блок обработки пути /_next/static/:
/etc/nginx/sites-available/cdn.erlcrussia.com
3

Настройка CORS заголовков

Поскольку JavaScript-скрипты, CSS и шрифты загружаются с домена cdn.erlcrussia.com на страницу erlcrussia.com, это междоменный запрос (Cross-Origin).Для корректной работы шрифтов (.woff2) и корректного сбора ошибок в Sentry/клиентских логах CDN обязан отдавать заголовок:
4

Проверка в F12 DevTools

После развёртывания сборки откройте сайт https://erlcrussia.com и выполните проверку:
  1. Откройте панель разработчика (нажмите F12).
  2. Перейдите во вкладку Network (Сеть).
  3. Выберите фильтр JS или CSS.
  4. В колонке Domain убедитесь, что все файлы из _next/static/chunks/ загружаются с домена cdn.erlcrussia.com.
  5. Запросы к домену erlcrussia.com должны содержать только начальный документ (document), вызовы /api/... и служебные запросы данных. Папки _next на домене erlcrussia.com в запросах браузера нет.

Кэширование и Заголовок immutable

Так как Next.js генерирует уникальные хэши в именах файлов для каждой сборки (например, pages-app-9c2b4e.js), содержимое конкретного URL никогда не изменяется.
  • Рекомендуемый заголовок ответа CDN:
  • Директива immutable сообщает браузеру, что файл гарантированно статичен. Браузер даже при повторных переходах и принудительном обновлении страницы не будет отправлять 304 Not Modified условные запросы, загружая файл мгновенно из дискового кэша пользователя.

Часто Задаваемые Вопросы (FAQ)

Next.js создаст новые имена файлов с новыми хэшами. HTML-страница начнёт ссылаться на новые URL в CDN. CDN подтянет новые файлы при первом запросе, а старые файлы останутся в кэше CDN для пользователей, у которых сайт был открыт до релиза.
Убедитесь, что домен cdn.erlcrussia.com указан в массиве images.remotePatterns в next.config.js. Также убедитесь, что SVG-файлы отдаются с заголовком Content-Type: image/svg+xml и Content-Disposition: inline.
Нет, HTML формируется на стороне основного сервера и поисковые боты получают полноценную разметку. При этом ускорение отдачи статики напрямую улучшает метрики Core Web Vitals (LCP, FID, CLS) и повышает рейтинг сайта в поисковых системах.