examples: add intlayer i18n example

[aymericzip]

This PR includes an example showing how to internationalize a TanStack Start / Router app using Intlayer

It includes i18n for:

• Component content
• Server action content
• Page metadata
• Routing & proxy to redirect users to their preferred locale
• HTML lang attribute
• Missing content testing

Summary by CodeRabbit

• New Features

  • Added a new React example demonstrating full i18n: English, Spanish, French.
  • Locale-aware routing and navigation with URL prefixes and localized links.
  • Locale switcher UI, localized page content, and HTML lang/dir sync.
  • Example app shell, router, and data loading wired for per-locale content.

• Chores

  • Project scaffolding: package, build, tooling, TypeScript, Vite and Tailwind configs, and gitignore added.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

Walkthrough

Adds a new React example demonstrating Intlayer-based i18n with locale-prefixed TanStack Router routes, generated route tree and router factory, server-side locale resolution adapter, localized components/hooks, content dictionaries (en/es/fr), and project config files (Vite, TS, Intlayer, ESLint).

Changes

Cohort / File(s)	Change Summary
Project config & build examples/react/start-i18n-intlayer/.gitignore, examples/react/start-i18n-intlayer/package.json, examples/react/start-i18n-intlayer/tsconfig.json, examples/react/start-i18n-intlayer/vite.config.ts, examples/react/start-i18n-intlayer/intlayer.config.ts, examples/react/start-i18n-intlayer/eslint.config.ts	New ignore, package manifest and scripts, TypeScript/Vite/ESLint configs, and Intlayer configuration (locales, build/routing/AI/editor settings).
Styles examples/react/start-i18n-intlayer/src/styles.css	Adds Tailwind import and base typography/reset rules.
Routing infra (generated + factory) examples/react/start-i18n-intlayer/src/routeTree.gen.ts, examples/react/start-i18n-intlayer/src/router.tsx	Adds generated locale-aware route tree with module augmentations and a getRouter() factory wiring it into TanStack Router.
Root & locale routes examples/react/start-i18n-intlayer/src/routes/__root.tsx, examples/react/start-i18n-intlayer/src/routes/{-$locale}/route.tsx, examples/react/start-i18n-intlayer/src/routes/{-$locale}/index.tsx, examples/react/start-i18n-intlayer/src/routes/{-$locale}/404.tsx, examples/react/start-i18n-intlayer/src/routes/{-$locale}/$.tsx, examples/react/start-i18n-intlayer/src/routes/{-$locale}/about.tsx	Adds root route and locale-scoped routes: route wiring, head metadata, server getData using getLocale, index/about pages, 404 and catch-all handling, layout/provider composition and beforeLoad locale validation/redirect.
Components examples/react/start-i18n-intlayer/src/components/Header.tsx, examples/react/start-i18n-intlayer/src/components/locale-switcher.tsx, examples/react/start-i18n-intlayer/src/components/locale-switcher.content.ts, examples/react/start-i18n-intlayer/src/components/localized-link.tsx	Adds Header, LocaleSwitcher UI and its dictionary, and LocalizedLink component/types that inject locale params into TanStack Link.
Hooks & navigation helpers examples/react/start-i18n-intlayer/src/hooks/useI18nHTMLAttributes.tsx, examples/react/start-i18n-intlayer/src/hooks/useLocalizedNavigate.ts	Adds hook to sync document lang/dir with locale and hook to navigate using locale-prefixed targets with typed to/from transformations.
Content & dictionaries examples/react/start-i18n-intlayer/src/content/index.content.tsx, examples/react/start-i18n-intlayer/src/content/404.content.ts, examples/react/start-i18n-intlayer/src/content/about.content.ts	Adds localized content dictionaries (app, not-found, about) using intlayer's t(...) helper for en/es/fr.
Server utils examples/react/start-i18n-intlayer/src/utils/getLocale.ts	Adds server-side getLocale adapter bridging request headers/cookies to Intlayer's getLocaleCore.

sequenceDiagram
  participant Browser
  participant Router as "TanStack Router"
  participant RouteComp as "RouteComponent"
  participant Intlayer as "IntlayerProvider"
  participant Server
  participant Storage as "LocalStorage / Cookie"

  Browser->>Router: Navigate to /{locale}/path
  Router->>RouteComp: mount with params.locale
  RouteComp->>Intlayer: initialize provider(locale)
  RouteComp->>Storage: read persisted locale (optional)
  Router->>Server: request preloader / getData (headers, cookies)
  Server->>Server: getLocale(adapter: headers/cookies) → getLocaleCore
  Server-->>Router: return localized messages/data
  RouteComp->>Router: render localized UI (Header, LocaleSwitcher, Outlet)
  Browser->>RouteComp: user selects locale
  RouteComp->>Storage: setLocaleInStorage(newLocale)
  RouteComp->>Router: navigate to localized path (LocalizedLink / useLocalizedNavigate)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45–75 minutes

• Focus review on:
  • src/routeTree.gen.ts — generated typings and module augmentations.
  • src/routes/{-$locale}/route.tsx and src/routes/{-$locale}/index.tsx — beforeLoad/redirect, SSR getData, provider composition.
  • src/components/localized-link.tsx & src/hooks/useLocalizedNavigate.ts — type-level path transforms and param merging.
  • vite.config.ts — plugin ordering and integration.

Suggested labels

documentation

Suggested reviewers

• birkskyum

Poem

🐇 I hopped through routes and stitched each locale seam,
Links wear tiny prefixes, pages hum in triple theme.
Cookies tuck my choices, server learns my tune,
Provider wraps the UI, router guides each rune.
Carrots for the code — a multilingual boon. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a new example for internationalization using Intlayer with TanStack Start/Router. It is concise, non-vague, and directly relates to the changeset.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 610ce24d444e72deaa9bf317f3bf6f10d8226f2f and 5345bc3d19e4073b9e6dc17729a6c9ddac5dfa63.

📒 Files selected for processing (1)

• examples/react/start-i18n-intlayer/package.json (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• examples/react/start-i18n-intlayer/package.json

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[aymericzip]

PR updated