Быстро создаем многоязычный сайт на Next.js 15

Что включено в готовый шаблон

Современный стартер‑проект сочетает в себе последние возможности Next.js 15 и App Router, позволяя запускать полностью локализованное приложение за считанные минуты. В наборе уже предустановлены 15 языков (английский, турецкий, немецкий, испанский, французский, японский, корейский, китайский, арабский, русский, итальянский, нидерландский, хинди, польский и португальский).

Ключевые возможности:

Мгновенная смена локали без полной перезагрузки страницы.
SSR‑переводы — контент отображается сразу на нужном языке, без «мигания» незаполненных строк.
CDN‑хранилище переводов от better‑i18n, позволяющее управлять строками в облаке.
Полный набор UI: Tailwind CSS 4 и готовые компоненты из shadcn/ui.
SEO‑оптимизация: автоматическое добавление hreflang, Open Graph, JSON‑LD схем и карты сайта.

Таким образом, разработчик получает полностью готовую к продакшну инфраструктуру, не тратя время на настройку i18n‑слоя.

Быстрый старт: три шага до работающего проекта

Клонирование шаблона

npx create-next-app -e https://github.com/better-i18n/nextjs-i18n-starter my-i18n-app
cd my-i18n-app

Регистрация проекта в better‑i18n
На портале dash.better-i18n.com создаётся бесплатный проект, в котором задаются поддерживаемые языки. После этого в корень проекта помещается переменная окружения:
```
echo 'NEXT_PUBLIC_BETTER_I18N_PROJECT=your-org/your-project' > .env
```
Запуск разработки
```
npm run dev
```
По умолчанию приложение будет доступно по http://localhost:3000. Всё готово: браузер уже умеет подхватывать выбранный язык из URL и отображать соответствующие строки.

Архитектура: минимум файлов, максимум гибкости

Шаблон построен на трёх ключевых файлах, каждый из которых отвечает за отдельный аспект локализации.

Конфигурация `i18n.config.ts`

import { createI18n } from "@better-i18n/next";

export const i18n = createI18n({
  project: process.env.NEXT_PUBLIC_BETTER_I18N_PROJECT || "better-i18n/demo",
  defaultLocale: "en",
  localePrefix: "always",
});

Здесь указывается идентификатор проекта в better‑i18n, язык по умолчанию и политика префикса локали в URL (все маршруты будут начинаться с /en, /ru и т.д.).

Middleware `middleware.ts`

import { i18n } from "./i18n.config";

export default i18n.betterMiddleware();

Один вызов betterMiddleware обеспечивает автоматическое определение текущей локали, редиректы на корректный префикс и обработку fallback‑языков. Это избавляет от ручного парсинга Accept‑Language и написания собственного роутинга.

Лэйаут `src/app/[locale]/layout.tsx`

export default async function LocaleLayout({ children, params }) {
  const { locale } = await params;
  const messages = await i18n.getMessages(locale);

  return (
    <html lang={locale}>
      <body>
        <BetterI18nProvider
          config={i18n.config}
          locale={locale}
          messages={messages}
        >
          {children}
        </BetterI18nProvider>
      </body>
    </html>
  );
}

Лэйаут получает текущий параметр locale из маршрута, загружает соответствующий набор переводов с CDN и передаёт их в глобальный провайдер BetterI18nProvider. После этого любые компоненты могут получать строки через хук useTranslations() без дополнительных запросов.

Как добавить новый язык

Процесс расширения списка поддерживаемых языков предельно прост:

В личном кабинете better‑i18n добавьте нужный язык (например, sv — шведский).
Обновите файл i18n.config.ts, указав новый язык в массиве locales, если вы используете кастомный список.
При необходимости создайте отдельный файл переводов в репозитории, но в большинстве случаев достаточно добавить строки через веб‑интерфейс, после чего они автоматически появятся в CDN.

Работа с переводами в коде

Для получения строки достаточно вызвать хук:

import { useTranslations } from "@better-i18n/react";

export default function Greeting() {
  const t = useTranslations();
  return <h1>{t("welcome_message")}</h1>;
}

Хук useTranslations читает текущий контекст провайдера и возвращает функцию, принимающую ключ перевода. Ключи могут быть вложенными ("nav.home"), что упрощает структуру файлов переводов.

Интеграция с другими Next.js возможностями

Dynamic Routes: благодаря localePrefix: "always" каждый динамический маршрут автоматически получает префикс локали, поэтому pages/[slug] превращается в pages/[locale]/[slug].
Static Generation (SSG): при сборке next build серверный компонент лэйаута уже получает готовый набор сообщений, что позволяет генерировать полностью локализованные статические страницы.
Image Optimization: next/image поддерживает srcSet с учётом текущей локали, что удобно для локализованных изображений.
API Routes: в API‑концах можно импортировать i18n и использовать i18n.getMessages(locale) для формирования ответов на разных языках.

Тонкая настройка SEO

Шаблон автоматически генерирует hreflang ссылки в <head>, позволяя поисковикам правильно индексировать каждую локальную версию. Кроме того, через next-seo уже включены Open Graph мета‑теги и JSON‑LD схемы, которые берут данные из текущих переводов. Для более сложных сценариев достаточно расширить next-sitemap в конфигурации проекта.

Заключительные мысли

Наличие готового, минимального и одновременно мощного решения для многоязычной разработки на Next.js 15 существенно ускоряет вывод продукта на международный рынок. Шаблон покрывает весь спектр требований: от мгновенного переключения языков до SEO‑оптимизации и облачного управления переводами. Благодаря компактной структуре из трёх файлов и полной интеграции с App Router, разработчики могут сосредоточиться на бизнес‑логике, а не на инфраструктуре i18n.

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

Как быстро создать многоязычное приложение на Next.js 15 с App Router