March 26, 2026 07:26 PM

Обновления Next.js Boilerplate: i18n, язык статьи, SEO сущности, RUM, AI-метрики и PWA-иконки

В этом обновлении бойлерплейта мы добавили несколько важных возможностей, которые помогают запускать проект быстрее и принимать решения на основе данных уже с первых релизов.

Постер для статьи - смешная ИИ поделка
По-моему отличная картинка, решил оставить

1) Поддержка переводов (src/lib/i18n) из коробки

Теперь в проекте есть централизованная i18n-архитектура:

  • базовая конфигурация локалей и default locale;

  • словари переводов (например, en/ru);

  • определение локали на сервере и клиенте;

  • единый способ брать тексты в UI через провайдер/хуки.

Как это работает кратко

  1. В конфиге задается язык по умолчанию (через env и i18n-конфиг).

  2. На запросе определяется актуальная локаль пользователя (cookie/headers).

  3. Приложение поднимает i18n-провайдер в layout.

  4. Компоненты получают перевод по ключам из словаря.

Что это дает:

  • нет размазанных строк по компонентам;

  • проще поддерживать интерфейс на нескольких языках;

  • быстрее масштабировать админку и публичные страницы;

  • меньше регрессий при изменении текстов.

2) Язык статьи в SEO (опционально)

В SEO-форме редактора добавлено отдельное поле языка статьи (en/ru) с пустым значением по умолчанию.

Как работает:

  • поле можно не заполнять (в БД сохранится null);

  • если язык выбран, он используется как приоритет для:

    • inLanguage в Article JSON-LD;

    • метаданных страницы статьи;

    • lang на HTML-обертке контента статьи/preview/private.

  • если язык не выбран, используется язык сайта по умолчанию из i18n-конфига.

Что это дает:

  • лучшее качество SEO-сигналов для поисковых систем и AI-поиска;

  • более корректный рендер для accessibility и парсинга контента;

  • база для будущих hreflang/переводов без обязательной миграции сейчас.

3) organizationSameAs для SEO и AI-поиска

В SEO-конфиг добавлено поле organizationSameAs, которое прокидывается в JSON-LD Organization как sameAs.

Пример использования:

  • GitHub организации;

  • LinkedIn компании;

  • X/Twitter;

  • YouTube/другие официальные профили.

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

  • поисковые системы и LLM лучше связывают сущность бренда с официальными профилями;

  • снижается неоднозначность бренда в графе знаний;

  • усиливаются сигналы доверия/авторитетности для AI-выдачи и классического SEO.

Если профили пока не готовы, можно оставить пустой список и заполнить позже.

4) RUM-метрики: производительность реальных пользователей

В бойлерплейте уже встроен RUM-пайплайн:

  • сбор Web Vitals (LCP, INP, CLS, TTFB, FCP);

  • сохранение в Mongo;

  • API дашборда;

  • админ-экран с агрегатами по окну времени.

Почему это полезно:

  • видна реальная производительность у настоящих пользователей, а не только лабораторные тесты;

  • проще находить деградации после релизов;

  • можно приоритизировать оптимизацию по реальным данным.

По сути, это готовая observability-база по фронту, которую не нужно собирать с нуля.

5) AI-метрики: сбор переходов из AI-источников

Добавлен отдельный контур для AI-referrals:

  • детекция AI-рефереров (например, ChatGPT, Perplexity, Copilot, Gemini, Claude);

  • запись визитов в отдельную модель;

  • API агрегированного дашборда;

  • админ-экран по источникам и top landing paths.

Что это дает команде:

  • видно, приходит ли трафик из AI-систем;

  • понятно, какие статьи лучше “подхватываются” AI-ответами;

  • можно оценивать эффект SEO/контент-изменений не только по классическому поиску.

Важно: текущая реализация фиксирует именно AI referrals (переходы), а не прямое “цитирование внутри ответа модели”. Это уже практичная и стабильная метрика для product/SEO-аналитики.

6) Manifest, favicon и fallback-иконки

Также обновлена PWA/metadata-конфигурация:

  • актуализирован site.webmanifest (имя приложения, иконки, start_url, scope, цвета темы);

  • иконки и manifest подключены через metadata в корневом layout;

  • sw.js использует актуальную app-иконку для push-уведомлений (icon/badge);

  • дефолтная картинка web-app-manifest-192x192.png используется как fallback thumbnail в метаданных, когда у статьи нет своего изображения.

Что это дает:

  • консистентная и корректная брендовая иконка в браузере/PWA;

  • более предсказуемый внешний вид ссылок/превью в соцсетях и ботах;

  • меньше “пустых” карточек у страниц без изображения.

7) Практическая польза “из коробки”

Вместо голого шаблона вы получаете стартовый стек с реальной ценностью:

  • i18n-фундамент для роста продукта;

  • поддержка языка статьи на уровне SEO и рендера;

  • усиленные SEO-сигналы сущности бренда;

  • мониторинг производительности (RUM);

  • мониторинг AI-трафика и новых каналов discovery.

Итог: бойлерплейт помогает не только “быстро поднять приложение”, но и быстрее перейти к управлению качеством и ростом на основе данных.