Обзор

gt-next 6.10.0 добавляет экспериментальную поддержку кэшируемых компонентов и объявляет устаревшими прежние статические функции запросов из gt-next@6.9.

• Добавлена экспериментальная поддержка кэшируемых компонентов с experimentalLocaleResolution
• Прежние статические функции запросов из gt-next@6.9 объявлены устаревшими

Кэшируемые компоненты

Чтобы включить поддержку кэшируемых компонентов, добавьте experimentalLocaleResolution: true в конфигурацию gt-next и следуйте руководству Next.js по Cache Components. При использовании кэшируемых компонентов и переводимого содержимого необходимо передавать locale в качестве параметра, чтобы обеспечить корректную инвалидацию кеша для разных локалей.

Рассмотрим такую структуру приложения:

import { Suspense } from "react";
import { getLocale, getLocales } from "gt-next/server";

export const generateStaticParams = () => {
  return getLocales().map(locale => ({ locale }))
}

async function CachedContent({locale: _locale}: {locale: string}) {
  "use cache"
  return (
    <div>
      <T><h1>Cached Content</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

Требование к параметру locale

Кэшируемые компоненты используют свои параметры в качестве ключей кэша, поэтому любой кэшируемый компонент с переводимым содержимым должен принимать параметр locale, чтобы обновляться при смене локали пользователя. Например, CachedContent должен принимать параметр locale, чтобы для каждой локали создавалась отдельная запись в кэше. Без этого параметра компонент будет отдавать одно и то же кэшированное содержимое независимо от локали пользователя.

Примечания по конфигурации

Когда включён experimentalLocaleResolution:

• Чтобы определение локали работало, должен быть включён I18n proxy (см. I18n Proxy)
• Он переопределяет любые пользовательские функции getLocale (локаль определяется по URL-пути)
• Он отключает функции getRegion и getDomain
• Он конфликтует с устаревшей конфигурацией experimentalEnableSSG — одновременно может быть включена только одна из них
• Вы можете настроить имя параметра локали с помощью experimentalLocaleResolutionParam (по умолчанию — 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // Можно указать собственное имя параметра
  experimentalLocaleResolutionParam: 'lang',
})

Вывод из употребления прежних статических функций запроса

После добавления поддержки статического рендеринга в gt-next@6.9 мы начинаем выводить из употребления прежние статические функции запроса (getStaticLocale, getStaticRegion, getStaticDomain) в пользу стандартных функций запроса (getLocale, getRegion, getDomain).

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

Руководство по миграции

Прежний SSG

Замените устаревшие статические функции запроса:

// До (устарело)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// После  
export default withGTConfig(nextConfig, {
  // Доступно по умолчанию
})

Удалите все пользовательские функции getStaticLocale, getStaticRegion и getStaticDomain, заменив их пользовательскими функциями getLocale, getRegion и getDomain. Необходимо добавить пользовательскую функцию getLocale и отключить функцию getRegion. Подробнее см. в руководстве по SSG.

import { locale } from "next/root-params";

export default async function getLocale() {
  return await locale();
}

export default async function getRegion() {
  return undefined;
}

Для кэшируемых компонентов

Включите экспериментальное определение локали и убедитесь, что кэшируемым компонентам передаются параметры локали:

const nextConfig = {
  cacheComponents: true,
}

// Конфигурация
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// Реализация компонента
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Ваш интернационализированный контент здесь
  return <T>Content for <Var>{locale}</Var></T>
}

// Использование
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}