Cache Components
Setting up Cache Components in gt-next
Cache Components
This guide shows how to use gt-next with Next.js Cache Components to optimize internationalized applications.
Setup
If you have not already, follow the Next.js Cache Components guide to setup cache components in your project.
Enable cache components support in your gt-next configuration:
const nextConfig = {
cacheComponents: true,
}
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
})Enable middleware
See the full middleware guide here.
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// Match all paths except API routes, static files, and Next.js internals
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};Add the locale parameter to cached components with translatable content
When using cached components with translatable content, you must pass the locale as a parameter. This ensures each locale gets its own cache entry.
import { getLocale } from "gt-next/server"
async function CachedContent({locale}: {locale: string}) {
"use cache"
return <T>Hello World</T>
}
export default async function Page() {
const locale = await getLocale()
return <CachedContent locale={locale} />
}Configuration Notes
- Custom
getLocalefunctions are overridden getRegionandgetDomainfunctions are disabled- You can customize the locale parameter name used for resolution with
experimentalLocaleResolutionParam(defaults to'locale')
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
experimentalLocaleResolutionParam: 'lang', // Optional customization
})Next Steps
- Read the release notes for this feature, gt-next@6.10.0, for more information.
How is this guide?