Устарел ли next-intl? И как реально оптимизировать такую архитектуру

Значимый прорыв формирует отрасль ИИ: aymericzip 9 минут назад Устарел ли next-intl? И как реально оптимизировать такую архитектуру 3 мин 57 ReactJS * JavaScript * Ретроспектива Когда Next. js перешел с Pages Router на App Router и убрал встроенную поддержку i18n-роутинга, библиотека next-intl стала стандартом по умолчанию для большинства команд.

Ян Аманн проделал отличную работу по ее поддержке, и долгое время это был самый надежный выбор для мультиязычных проектов. is next-intl outdatedЯ давно занимаюсь профилированием производительности интернационализированных приложений на Next. За последние годы вся React-экосистема заметно сместилась в сторону серверных компонентов (RSC) и оптимизаций на этапе компиляции.

Технические детали

Но если заглянуть под капот того, что next-intl реально отдает в браузер на проде, становятся видны явные архитектурные узкие места. Главная проблема даже не в весе самого рантайма (хотя провайдер и парсер ICU отъедают около 12 КБ gzipped еще до показа первого слова). Главная беда — это утечка переводов между страницами.

В подавляющем большинстве проектов NextIntlClientProvider подключается в корневом лейауте вместе с getMessages(). В итоге пользователь открывает обычную страницу /contact, а браузер послушно выкачивает тексты для /dashboard, /pricing, настроек и вообще всего приложения. В нашем тесте на стандартном проекте из 10 страниц около 90% веса переводов, пришедших на конкретный роут, относились к совершенно другим экранам.

Кроме того, вызов t("key динамически вычисляет строку во время выполнения. Из-за этого ни Webpack, ни Turbopack не могут понять, какие именно ключи используются, и не могут вырезать лишние строки через Tree-shaking. Отдельная боль — костыли вокруг серверных компонентов (RSC).

Отраслевые последствия

Чтобы заставить работать статическую генерацию (SSG) в App Router, разработчикам next-intl пришлось внедрить заплатку setRequestLocale(locale) (ранее unstable_setRequestLocale). Ее приходится вручную прописывать в самом начале каждого лейаута, подлейаута и страницы. Забудете хоть в одном месте — Next.

js молча откажется от статики и переключит роут на динамический рендеринг при каждом запросе. Хуже того, в клиентских компонентах и переиспользуемых дизайн-системах нет нормального синхронного способа получить перевод: приходится либо оборачивать всё в контекст-провайдеры, либо вручную пробрасывать locale пропсами через все слои дерева компонентов (prop-drilling). ## Как оптимизировать такое решение?

Если вы уже используете next-intl на проде, есть несколько рабочих шагов, чтобы привести бандл в порядок. Во-первых, откажитесь от загрузки всех переводов в корневом лейауте. Разбейте JSON-файлы на неймспейсы по конкретным роутам и вызывайте getMessages() локально на уровне страниц или вложенных лейаутов.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.