{"id":48763887,"url":"https://github.com/aurorascharff/next-intl-cache-components","last_synced_at":"2026-04-13T07:44:03.057Z","repository":{"id":322262031,"uuid":"1088639951","full_name":"aurorascharff/next-intl-cache-components","owner":"aurorascharff","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.","archived":false,"fork":false,"pushed_at":"2026-03-18T14:31:46.000Z","size":450,"stargazers_count":17,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-19T05:11:34.624Z","etag":null,"topics":["app-router","cache-components","next-intl","nextjs","nextjs16"],"latest_commit_sha":null,"homepage":"https://next-intl-cache-components.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aurorascharff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-03T08:55:48.000Z","updated_at":"2025-12-22T19:40:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/aurorascharff/next-intl-cache-components","commit_stats":null,"previous_names":["aurorascharff/next-intl-cache-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aurorascharff/next-intl-cache-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurorascharff%2Fnext-intl-cache-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurorascharff%2Fnext-intl-cache-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurorascharff%2Fnext-intl-cache-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurorascharff%2Fnext-intl-cache-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aurorascharff","download_url":"https://codeload.github.com/aurorascharff/next-intl-cache-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurorascharff%2Fnext-intl-cache-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31744404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T06:26:45.479Z","status":"ssl_error","status_checked_at":"2026-04-13T06:26:44.645Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app-router","cache-components","next-intl","nextjs","nextjs16"],"created_at":"2026-04-13T07:44:02.919Z","updated_at":"2026-04-13T07:44:03.048Z","avatar_url":"https://github.com/aurorascharff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js 16 cacheComponents with next-intl\n\nDemo of Next.js 16 `cacheComponents` with `next-intl`, using [`next/root-params`](https://github.com/vercel/next.js/pull/82244) to access the `[locale]` segment inside `\"use cache\"` functions.\n\n## The problem\n\nWith `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:\n\n```tsx\n// Page extracts locale from params and passes it down\nexport default async function Page({params}: PageProps\u003c'/[locale]'\u003e) {\n  const {locale} = await params;\n  return \u003cCachedComponent locale={locale} /\u003e;\n}\n\nasync function CachedComponent({locale}: {locale: string}) {\n  'use cache';\n  const t = await getTranslations({locale, namespace: 'MyNamespace'});\n  // ...\n}\n```\n\nThis works but requires plumbing locale through every cached component.\n\n## The solution: `next/root-params`\n\nThe `[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.\n\n```tsx\nimport {locale as rootLocale} from 'next/root-params';\n\nasync function CachedComponent() {\n  'use cache';\n  const locale = await rootLocale();\n  const t = await getTranslations({locale, namespace: 'MyNamespace'});\n  // ...\n}\n```\n\nNo props needed — the component is self-contained.\n\n## Demo components\n\n- **Dynamic Component**: Uses `getTranslations('IndexPage')` with only namespace parameter, which internally reads from `headers()`. This component is not cacheable and runs on every request.\n- **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.\n\n## Key files\n\n- [`next.config.ts`](next.config.ts) — enables `cacheComponents` and `experimental.rootParams`\n- [`src/app/[locale]/layout.tsx`](src/app/[locale]/layout.tsx) — root layout using `await locale()` from `next/root-params`\n- [`src/app/[locale]/page.tsx`](src/app/[locale]/page.tsx) — page with cached and dynamic components\n\n## Learn More\n\n- [next-intl Static Rendering Setup](https://next-intl.dev/docs/routing/setup#static-rendering)\n- [next-intl with Actions, Metadata \u0026 Route Handlers](https://next-intl.dev/docs/environments/actions-metadata-route-handlers)\n- [next/root-params docs PR](https://github.com/vercel/next.js/pull/82244)\n- [Root params in \"use cache\" PR](https://github.com/vercel/next.js/pull/91191)\n- [next-intl cacheComponents support](https://github.com/amannn/next-intl/issues/1493)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faurorascharff%2Fnext-intl-cache-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faurorascharff%2Fnext-intl-cache-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faurorascharff%2Fnext-intl-cache-components/lists"}