{"repo":"aurorascharff/next-intl-cache-components","free":true,"listed":false,"github":"https://github.com/aurorascharff/next-intl-cache-components","clone":"git clone https://github.com/aurorascharff/next-intl-cache-components.git","description":"Demo of Next.js 16 cacheComponents with next-intl. Shows how to enable component caching for internationalized apps by passing locale as props instead of reading from headers.","language":"TypeScript","stars":25,"topics":["app-router","cache-components","next-intl","nextjs","nextjs16"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Next.js 16 cacheComponents with next-intl Demo of Next.js 16 cacheComponents with next-intl , using next/root-params to access the [locale] segment inside \"use cache\" functions. The problem With cacheComponents enabled, cached components cannot access headers() — which is how next-intl normally resolves the locale. Previously, the workaround was to prop-drill the locale from the page (which extracts it from params ) into each cached component: This works but requires plumbing locale through every cached component. The solution: next/root-params The [locale] segment is a root parameter — a dynamic segment before the root layout. With experimental.rootParams enabled, import { locale } from 'next/root-params' can be called from any Server Component, including inside \"use cache\" boundaries. The root param value automatically becomes a cache key. No props needed — the component is self-contained. Demo components - Dynamic Component : Uses getTranslations('IndexPage') with only namespace parameter, which internally reads from headers() . This component is not cacheable and runs on every request. - Cached Component : Reads locale directly from next/root-params inside \"use cache\" and passes it to getTranslations({locale, namespace}) . The root param value automatically becomes a cache key — no prop-drilling needed. Key files - next.config.ts — enables cacheComponents and experimental.rootParams - [ src/app/[locale]/layout.tsx ](src/app/[locale]/layout.tsx) — root layout using await l","default_branch":null,"files":null,"tree":[],"storefront":"/r/aurorascharff","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/aurorascharff/next-intl-cache-components/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}