Overview

gt-next 6.10.0 introduces experimental support for cached components while deprecating legacy static request functions from gt-next@6.9.

• Added experimental cached component support with experimentalLocaleResolution
• Deprecated legacy static request functions from gt-next@6.9

Cached Components

To enable support for cached components, add experimentalLocaleResolution: true to your gt-next configuration and follow the NextJS Cache Components guide. When using cached components with translatable content, you must pass the locale as a parameter to ensure proper cache invalidation across different locales.

Consider this application structure:

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>
  );
}

The locale parameter requirement

Cached components use their parameters as cache keys, so any cached component that contains translatable content must accept a locale parameter in order to update when a user's locale changes. For example, CachedContent must accept a locale parameter to create separate cache entries for each locale. Without this parameter, the component would serve the same cached content regardless of the user's locale.

Configuration notes

When experimentalLocaleResolution is enabled:

• The i18n proxy must be enabled for locale resolution to work (see I18n Proxy)
• It overrides any custom getLocale functions (locale resolution happens by reading the URL path)
• It disables getRegion and getDomain functions
• It conflicts with the deprecated experimentalEnableSSG configuration – only one can be enabled at a time
• You can customise the locale parameter name with experimentalLocaleResolutionParam (defaults to 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // Optionally customise the parameter name
  experimentalLocaleResolutionParam: 'lang',
})

Deprecating Legacy Static Request Functions

Following the introduction of static rendering support in gt-next@6.9, we are now deprecating the legacy static request functions (getStaticLocale, getStaticRegion, getStaticDomain) in favour of the standard request functions (getLocale, getRegion, getDomain).

This deprecation aligns with our goal of simplifying the API surface while maintaining full functionality. The legacy static functions will continue to work but will emit deprecation warnings. We recommend migrating to the standard request functions for consistency.

Migration Guide

Legacy SSG

Replace deprecated static request functions:

// Before (deprecated)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// After  
export default withGTConfig(nextConfig, {
  // Accessible by default
})

Remove any custom getStaticLocale, getStaticRegion, or getStaticDomain functions in favour of custom getLocale, getRegion, or getDomain functions. You must add a custom getLocale function and disable the getRegion function. For more information, see the SSG guide.

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

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

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

For Cached Components

Enable experimental locale resolution and ensure cached components receive locale parameters:

const nextConfig = {
  cacheComponents: true,
}

// Configuration
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// Component implementation
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Your internationalised content here
  return <T>Content for <Var>{locale}</Var></T>
}

// Usage
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}