From c65d39d7a4217d63ec3ada667851b9aded9eaed5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sat, 10 Jan 2026 20:38:13 -0300 Subject: [PATCH 01/24] split --- .../react/guide/internationalization-i18n.md | 65 ++--------------- .../react/guide/internationalization-i18n.md | 73 +++++++++++++++++++ 2 files changed, 79 insertions(+), 59 deletions(-) create mode 100644 docs/start/framework/react/guide/internationalization-i18n.md diff --git a/docs/router/framework/react/guide/internationalization-i18n.md b/docs/router/framework/react/guide/internationalization-i18n.md index 49397717772..071e1b51a0c 100644 --- a/docs/router/framework/react/guide/internationalization-i18n.md +++ b/docs/router/framework/react/guide/internationalization-i18n.md @@ -26,7 +26,7 @@ This pattern relies exclusively on TanStack Router features. It is suitable when Optional path parameters are ideal for implementing locale-aware routing without duplicating routes. ```ts -;/{-$locale}/abotu +/{-$locale}/about ``` This single route matches: @@ -125,7 +125,7 @@ Paraglide provides type-safe translations, locale detection, and URL localizatio **GitHub example:** [https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide) -### Project Setup +#### Project Setup ```bash npx @inlang/paraglide-js@latest init @@ -140,7 +140,7 @@ paraglideVitePlugin({ }) ``` -### URL Localization via Router Rewrite +#### URL Localization via Router Rewrite ```ts import { deLocalizeUrl, localizeUrl } from './paraglide/runtime' @@ -156,43 +156,9 @@ const router = createRouter({ --- -## Server-side i18n (TanStack Start) - -This pattern integrates i18n at the routing and server layers. It is suitable when: - -- You use TanStack Start -- You need SSR or streaming -- You want locale-aware redirects and metadata - -### TanStack Start + Paraglide - -**GitHub example:** -[https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide) - -### Server Middleware (SSR) - -```ts -import { paraglideMiddleware } from './paraglide/server' - -export default { - fetch(req: Request) { - return paraglideMiddleware(req, () => handler.fetch(req)) - }, -} -``` - -### HTML Language Attribute - -```tsx -import { getLocale } from '../paraglide/runtime' -; -``` - ---- - ## Offline-safe Redirects -For offline or client-only environments: +For offline or client-only environments (don't use with TanStack STart/SS): ```ts import { shouldRedirect } from '../paraglide/runtime' @@ -224,25 +190,6 @@ This guarantees: --- -## Prerendering Localized Routes - -```ts -import { localizeHref } from './paraglide/runtime' - -export const prerenderRoutes = ['/', '/about'].map((path) => ({ - path: localizeHref(path), - prerender: { enabled: true }, -})) -``` - ---- - -## Additional i18n Integration Patterns - -### Intlayer (TanStack Start integration) - -[https://intlayer.org/doc/environment/tanstack-start](https://intlayer.org/doc/environment/tanstack-start) - -### use-intl (TanStack Start integration) +## Looking for i18n with SSR/TanStack Start? -[https://nikuscs.com/blog/13-tanstackstart-i18n/](https://nikuscs.com/blog/13-tanstackstart-i18n/) +Check out the guide on integrating [i18n in TanStack Start](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md new file mode 100644 index 00000000000..258a3c26b23 --- /dev/null +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -0,0 +1,73 @@ +--- +title: Internationalization (i18n) +--- + +TanStack Router provides flexible and highly customizable primitives that can be composed to support common internationalization (i18n) routing patterns, such as **optional path parameters**, **route rewriting**, and **type-safe params**. This enables clean, SEO-friendly URLs, flexible locale handling, and seamless integration with i18n libraries. + +This guide covers: + +- Prefix-based and optional-locale routing +- Advanced routing patterns for i18n +- Language navigation and switching +- SEO considerations +- Type safety +- Integration patterns with i18n libraries (Paraglide) + + +## Server-side i18n (TanStack Start) + +This pattern integrates i18n at the routing and server layers. It is suitable when: + +- You use TanStack Start +- You need SSR or streaming +- You want locale-aware redirects and metadata + +### TanStack Start + Paraglide + +**GitHub example:** +[https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide) + +### Server Middleware (SSR) + +```ts +import { paraglideMiddleware } from './paraglide/server' + +export default { + fetch(req: Request) { + return paraglideMiddleware(req, () => handler.fetch(req)) + }, +} +``` + +### HTML Language Attribute + +```tsx +import { getLocale } from '../paraglide/runtime' + + +``` + +--- + +## Prerendering Localized Routes + +```ts +import { localizeHref } from './paraglide/runtime' + +export const prerenderRoutes = ['/', '/about'].map((path) => ({ + path: localizeHref(path), + prerender: { enabled: true }, +})) +``` + +--- + +## Additional i18n Integration Patterns + +### Intlayer (TanStack Start integration) + +[https://intlayer.org/doc/environment/tanstack-start](https://intlayer.org/doc/environment/tanstack-start) + +### use-intl (TanStack Start integration) + +[https://nikuscs.com/blog/13-tanstackstart-i18n/](https://nikuscs.com/blog/13-tanstackstart-i18n/) From b6f566e952d35b508cfcd2bf861f98ce8a64f313 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 11:53:52 -0300 Subject: [PATCH 02/24] add to config,json --- docs/router/config.json | 4 ++++ docs/start/config.json | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/router/config.json b/docs/router/config.json index 808c3fe38f9..8c7a81a2648 100644 --- a/docs/router/config.json +++ b/docs/router/config.json @@ -324,6 +324,10 @@ { "label": "Render Optimizations", "to": "framework/react/guide/render-optimizations" + }, + { + "label": "Internationalization (i18n)", + "to": "framework/react/guide/Internationalization-18n" } ] }, diff --git a/docs/start/config.json b/docs/start/config.json index c5851d41e99..83be1c00d7f 100644 --- a/docs/start/config.json +++ b/docs/start/config.json @@ -176,6 +176,10 @@ { "label": "LLM Optimization (LLMO)", "to": "framework/react/guide/llmo" + }, + { + "label": "Internationalization (i18n)", + "to": "framework/react/guide/Internationalization-i18n" } ] }, From 3ed7b1e2a8a0a344dcffc7f7443030c3a6d9c7b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 12:50:33 -0300 Subject: [PATCH 03/24] router --- .../react/guide/internationalization-i18n.md | 422 +++++++++++++++--- .../framework/react/guide/path-params.md | 324 -------------- .../react/guide/internationalization-i18n.md | 3 +- .../react/start-i18n-paraglide/vite.config.ts | 6 +- 4 files changed, 357 insertions(+), 398 deletions(-) diff --git a/docs/router/framework/react/guide/internationalization-i18n.md b/docs/router/framework/react/guide/internationalization-i18n.md index 071e1b51a0c..38cc78abfff 100644 --- a/docs/router/framework/react/guide/internationalization-i18n.md +++ b/docs/router/framework/react/guide/internationalization-i18n.md @@ -11,33 +11,16 @@ This guide covers: - Language navigation and switching - SEO considerations - Type safety -- Integration patterns with i18n libraries (Paraglide) +- Integration patterns with i18n libraries (e.g. Paraglide) ---- - -## i18n with Optional Path Parameters - -This pattern relies exclusively on TanStack Router features. It is suitable when: - -- You want full control over translations -- You already manage translations manually -- You do not need automatic locale detection +## Internationalization (i18n) with Optional Path Parameters -Optional path parameters are ideal for implementing locale-aware routing without duplicating routes. - -```ts -/{-$locale}/about -``` - -This single route matches: - -- `/about` (default locale) -- `/en/about` -- `/fr/about` -- `/es/about` +Optional path parameters are excellent for implementing internationalization (i18n) routing patterns. You can use prefix patterns to handle multiple languages while maintaining clean, SEO-friendly URLs. ### Prefix-based i18n +Use optional language prefixes to support URLs like `/en/about`, `/fr/about`, or just `/about` (default language): + ```tsx // Route: /{-$locale}/about export const Route = createFileRoute('/{-$locale}/about')({ @@ -46,79 +29,321 @@ export const Route = createFileRoute('/{-$locale}/about')({ function AboutComponent() { const { locale } = Route.useParams() - const currentLocale = locale || 'en' + const currentLocale = locale || 'en' // Default to English const content = { - en: { title: 'About Us' }, - fr: { title: 'À Propos' }, - es: { title: 'Acerca de' }, + en: { title: 'About Us', description: 'Learn more about our company.' }, + fr: { + title: 'À Propos', + description: 'En savoir plus sur notre entreprise.', + }, + es: { + title: 'Acerca de', + description: 'Conoce más sobre nuestra empresa.', + }, } - return

{content[currentLocale].title}

+ return ( +
+

{content[currentLocale]?.title}

+

{content[currentLocale]?.description}

+
+ ) } ``` -### Complex Routing Patterns +This pattern matches: + +- `/about` (default locale) +- `/en/about` (explicit English) +- `/fr/about` (French) +- `/es/about` (Spanish) + +### Complex i18n Patterns + +Combine optional parameters for more sophisticated i18n routing: ```tsx // Route: /{-$locale}/blog/{-$category}/$slug export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({ - beforeLoad: ({ params }) => { + beforeLoad: async ({ params }) => { const locale = params.locale || 'en' - const validLocales = ['en', 'fr', 'es', 'de'] + const category = params.category - if (params.locale && !validLocales.includes(params.locale)) { + // Validate locale and category + const validLocales = ['en', 'fr', 'es', 'de'] + if (locale && !validLocales.includes(locale)) { throw new Error('Invalid locale') } - return { locale } + return { locale, category } + }, + loader: async ({ params, context }) => { + const { locale } = context + const { slug, category } = params + + return fetchBlogPost({ slug, category, locale }) }, + component: BlogPostComponent, }) + +function BlogPostComponent() { + const { locale, category, slug } = Route.useParams() + const data = Route.useLoaderData() + + return ( +
+

{data.title}

+

+ Category: {category || 'All'} | Language: {locale || 'en'} +

+
{data.content}
+
+ ) +} ``` -### Language Switching +This supports URLs like: + +- `/blog/tech/my-post` (default locale, tech category) +- `/fr/blog/my-post` (French, no category) +- `/en/blog/tech/my-post` (explicit English, tech category) +- `/es/blog/tecnologia/mi-post` (Spanish, Spanish category) + +### Language Navigation + +Create language switchers using optional i18n parameters with function-style params: ```tsx - ({ - ...prev, - locale: prev.locale === 'en' ? undefined : 'fr', - })} -> - Français - +function LanguageSwitcher() { + const currentParams = useParams({ strict: false }) + + const languages = [ + { code: 'en', name: 'English' }, + { code: 'fr', name: 'Français' }, + { code: 'es', name: 'Español' }, + ] + + return ( +
+ {languages.map(({ code, name }) => ( + ({ + ...prev, + locale: code === 'en' ? undefined : code, // Remove 'en' for clean URLs + })} + className={currentParams.locale === code ? 'active' : ''} + > + {name} + + ))} +
+ ) +} ``` -### Type-safe Locales +You can also create more sophisticated language switching logic: -```ts -type Locale = 'en' | 'fr' | 'es' | 'de' +```tsx +function AdvancedLanguageSwitcher() { + const currentParams = useParams({ strict: false }) + + const handleLanguageChange = (newLocale: string) => { + return (prev: any) => { + // Preserve all existing params but update locale + const updatedParams = { ...prev } + + if (newLocale === 'en') { + // Remove locale for clean English URLs + delete updatedParams.locale + } else { + updatedParams.locale = newLocale + } + + return updatedParams + } + } -function isLocale(value?: string): value is Locale { - return ['en', 'fr', 'es', 'de'].includes(value as Locale) + return ( +
+ + Français + + + + Español + + + + English + +
+ ) } ``` ---- +### Advanced i18n with Optional Parameters -## i18n Library Integration Patterns +Organize i18n routes using optional parameters for flexible locale handling: -TanStack Router is **library-agnostic**. You can integrate any i18n solution by mapping locale state to routing behavior. +```tsx +// Route structure: +// routes/ +// {-$locale}/ +// index.tsx // /, /en, /fr +// about.tsx // /about, /en/about, /fr/about +// blog/ +// index.tsx // /blog, /en/blog, /fr/blog +// $slug.tsx // /blog/post, /en/blog/post, /fr/blog/post + +// routes/{-$locale}/index.tsx +export const Route = createFileRoute('/{-$locale}/')({ + component: HomeComponent, +}) -Below is a recommended pattern using **Paraglide**. +function HomeComponent() { + const { locale } = Route.useParams() + const isRTL = ['ar', 'he', 'fa'].includes(locale || '') + + return ( +
+

Welcome ({locale || 'en'})

+ {/* Localized content */} +
+ ) +} ---- +// routes/{-$locale}/about.tsx +export const Route = createFileRoute('/{-$locale}/about')({ + component: AboutComponent, +}) +``` + +### SEO and Canonical URLs + +Handle SEO for i18n routes properly: + +```tsx +export const Route = createFileRoute('/{-$locale}/products/$id')({ + component: ProductComponent, + head: ({ params, loaderData }) => { + const locale = params.locale || 'en' + const product = loaderData + + return { + title: product.title[locale] || product.title.en, + meta: [ + { + name: 'description', + content: product.description[locale] || product.description.en, + }, + { + property: 'og:locale', + content: locale, + }, + ], + links: [ + // Canonical URL (always use default locale format) + { + rel: 'canonical', + href: `https://example.com/products/${params.id}`, + }, + // Alternate language versions + { + rel: 'alternate', + hreflang: 'en', + href: `https://example.com/products/${params.id}`, + }, + { + rel: 'alternate', + hreflang: 'fr', + href: `https://example.com/fr/products/${params.id}`, + }, + { + rel: 'alternate', + hreflang: 'es', + href: `https://example.com/es/products/${params.id}`, + }, + ], + } + }, +}) +``` -## Client-side i18n with a Library (TanStack Router) +### Type Safety for i18n -This pattern combines TanStack Router with a client-side i18n library. It is suitable when: +Ensure type safety for your i18n implementations: -- You want type-safe translations -- You want localized URLs -- You do not need server-side rendering +```tsx +// Define supported locales +type Locale = 'en' | 'fr' | 'es' | 'de' + +// Type-safe locale validation +function validateLocale(locale: string | undefined): locale is Locale { + return ['en', 'fr', 'es', 'de'].includes(locale as Locale) +} -### TanStack Router + Paraglide (Client-only) +export const Route = createFileRoute('/{-$locale}/shop/{-$category}')({ + beforeLoad: async ({ params }) => { + const { locale } = params + + // Type-safe locale validation + if (locale && !validateLocale(locale)) { + throw redirect({ + to: '/shop/{-$category}', + params: { category: params.category }, + }) + } + + return { + locale: (locale as Locale) || 'en', + isDefaultLocale: !locale || locale === 'en', + } + }, + component: ShopComponent, +}) + +function ShopComponent() { + const { locale, category } = Route.useParams() + const { isDefaultLocale } = Route.useRouteContext() + + // TypeScript knows locale is Locale | undefined + // and we have validated it in beforeLoad + + return ( +
+

Shop {category ? `- ${category}` : ''}

+

Language: {locale || 'en'}

+ {!isDefaultLocale && ( + + View in English + + )} +
+ ) +} +``` + +Optional path parameters provide a powerful and flexible foundation for implementing internationalization in your TanStack Router applications. Whether you prefer prefix-based or combined approaches, you can create clean, SEO-friendly URLs while maintaining excellent developer experience and type safety. + +## i18n Library Integration Patterns + +TanStack Router is **library-agnostic**. You can integrate any i18n solution by mapping locale state to routing behavior. + +Below is a recommended pattern using **Paraglide**. + +### TanStack Router + Paraglide Paraglide provides type-safe translations, locale detection, and URL localization that pair naturally with TanStack Router. @@ -140,7 +365,7 @@ paraglideVitePlugin({ }) ``` -#### URL Localization via Router Rewrite +#### URL Localization via Router rewrite ```ts import { deLocalizeUrl, localizeUrl } from './paraglide/runtime' @@ -154,11 +379,7 @@ const router = createRouter({ }) ``` ---- - -## Offline-safe Redirects - -For offline or client-only environments (don't use with TanStack STart/SS): +## URL redirects ```ts import { shouldRedirect } from '../paraglide/runtime' @@ -171,15 +392,78 @@ beforeLoad: async () => { } ``` ---- +If you use TanStack Start and do not need offline capabilities, you don`t need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. ## Type-safe Translated Pathnames -To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. +If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. ```ts -import { FileRoutesByTo } from '../routeTree.gen' -import { Locale } from '@/paraglide/runtime' +import { Locale } from "@reland/i18n/runtime" +import { RoutePath } from "../../types/Routes" + +const excludedPaths = ["admin", "partner", "tests", "api"] as const + +type PublicRoutePath = Exclude< + RoutePath, + `${string}${(typeof excludedPaths)[number]}${string}` +> + +type TranslatedPathname = { + pattern: string + localized: Array<[Locale, string]> +} + +function toUrlPattern(path: string) { + return ( + path + // explicit catch-all: "/$" → "/:path(.*)?" + .replace(/\/\$$/, "/:path(.*)?") + // optional params like {-$param} → ":param(.*)?" + .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1(.*)?") + // normal params like $param → ":param(.*)?" + .replace(/\$([a-zA-Z0-9_]+)/g, ":$1(.*)?") + // remove any remaining braces (safety) + .replace(/[{}]/g, "") + // remove trailing slash + .replace(/\/+$/, "") + ) +} + +function createTranslatedPathnames( + input: Record>, +): TranslatedPathname[] { + return Object.entries(input).map(([pattern, locales]) => ({ + pattern: toUrlPattern(pattern), + localized: Object.entries(locales).map( + ([locale, path]) => + [locale as Locale, `/${locale}${toUrlPattern(path)}`] satisfies [ + Locale, + string, + ], + ), + })) +} + +export const translatedPathnames = createTranslatedPathnames({ + "/": { + en: "/", + es: "/" + }, + "/about": { + en: "/about", + es: "/nosotros" + } +``` + +Use in vite.config.ts: + +```ts +paraglideVitePlugin({ + project: './project.inlang', + outdir: './app/paraglide', + urlPatterns: translatedPathnames +}) ``` This guarantees: @@ -188,8 +472,6 @@ This guarantees: - Full type safety - Compiler feedback for routing mistakes ---- - ## Looking for i18n with SSR/TanStack Start? Check out the guide on integrating [i18n in TanStack Start](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). diff --git a/docs/router/framework/react/guide/path-params.md b/docs/router/framework/react/guide/path-params.md index 4ebd477ace2..8925812cb44 100644 --- a/docs/router/framework/react/guide/path-params.md +++ b/docs/router/framework/react/guide/path-params.md @@ -414,330 +414,6 @@ function PostsComponent() { ``` -## Internationalization (i18n) with Optional Path Parameters - -Optional path parameters are excellent for implementing internationalization (i18n) routing patterns. You can use prefix patterns to handle multiple languages while maintaining clean, SEO-friendly URLs. - -### Prefix-based i18n - -Use optional language prefixes to support URLs like `/en/about`, `/fr/about`, or just `/about` (default language): - -```tsx -// Route: /{-$locale}/about -export const Route = createFileRoute('/{-$locale}/about')({ - component: AboutComponent, -}) - -function AboutComponent() { - const { locale } = Route.useParams() - const currentLocale = locale || 'en' // Default to English - - const content = { - en: { title: 'About Us', description: 'Learn more about our company.' }, - fr: { - title: 'À Propos', - description: 'En savoir plus sur notre entreprise.', - }, - es: { - title: 'Acerca de', - description: 'Conoce más sobre nuestra empresa.', - }, - } - - return ( -
-

{content[currentLocale]?.title}

-

{content[currentLocale]?.description}

-
- ) -} -``` - -This pattern matches: - -- `/about` (default locale) -- `/en/about` (explicit English) -- `/fr/about` (French) -- `/es/about` (Spanish) - -### Complex i18n Patterns - -Combine optional parameters for more sophisticated i18n routing: - -```tsx -// Route: /{-$locale}/blog/{-$category}/$slug -export const Route = createFileRoute('/{-$locale}/blog/{-$category}/$slug')({ - beforeLoad: async ({ params }) => { - const locale = params.locale || 'en' - const category = params.category - - // Validate locale and category - const validLocales = ['en', 'fr', 'es', 'de'] - if (locale && !validLocales.includes(locale)) { - throw new Error('Invalid locale') - } - - return { locale, category } - }, - loader: async ({ params, context }) => { - const { locale } = context - const { slug, category } = params - - return fetchBlogPost({ slug, category, locale }) - }, - component: BlogPostComponent, -}) - -function BlogPostComponent() { - const { locale, category, slug } = Route.useParams() - const data = Route.useLoaderData() - - return ( -
-

{data.title}

-

- Category: {category || 'All'} | Language: {locale || 'en'} -

-
{data.content}
-
- ) -} -``` - -This supports URLs like: - -- `/blog/tech/my-post` (default locale, tech category) -- `/fr/blog/my-post` (French, no category) -- `/en/blog/tech/my-post` (explicit English, tech category) -- `/es/blog/tecnologia/mi-post` (Spanish, Spanish category) - -### Language Navigation - -Create language switchers using optional i18n parameters with function-style params: - -```tsx -function LanguageSwitcher() { - const currentParams = useParams({ strict: false }) - - const languages = [ - { code: 'en', name: 'English' }, - { code: 'fr', name: 'Français' }, - { code: 'es', name: 'Español' }, - ] - - return ( -
- {languages.map(({ code, name }) => ( - ({ - ...prev, - locale: code === 'en' ? undefined : code, // Remove 'en' for clean URLs - })} - className={currentParams.locale === code ? 'active' : ''} - > - {name} - - ))} -
- ) -} -``` - -You can also create more sophisticated language switching logic: - -```tsx -function AdvancedLanguageSwitcher() { - const currentParams = useParams({ strict: false }) - - const handleLanguageChange = (newLocale: string) => { - return (prev: any) => { - // Preserve all existing params but update locale - const updatedParams = { ...prev } - - if (newLocale === 'en') { - // Remove locale for clean English URLs - delete updatedParams.locale - } else { - updatedParams.locale = newLocale - } - - return updatedParams - } - } - - return ( -
- - Français - - - - Español - - - - English - -
- ) -} -``` - -### Advanced i18n with Optional Parameters - -Organize i18n routes using optional parameters for flexible locale handling: - -```tsx -// Route structure: -// routes/ -// {-$locale}/ -// index.tsx // /, /en, /fr -// about.tsx // /about, /en/about, /fr/about -// blog/ -// index.tsx // /blog, /en/blog, /fr/blog -// $slug.tsx // /blog/post, /en/blog/post, /fr/blog/post - -// routes/{-$locale}/index.tsx -export const Route = createFileRoute('/{-$locale}/')({ - component: HomeComponent, -}) - -function HomeComponent() { - const { locale } = Route.useParams() - const isRTL = ['ar', 'he', 'fa'].includes(locale || '') - - return ( -
-

Welcome ({locale || 'en'})

- {/* Localized content */} -
- ) -} - -// routes/{-$locale}/about.tsx -export const Route = createFileRoute('/{-$locale}/about')({ - component: AboutComponent, -}) -``` - -### SEO and Canonical URLs - -Handle SEO for i18n routes properly: - -```tsx -export const Route = createFileRoute('/{-$locale}/products/$id')({ - component: ProductComponent, - head: ({ params, loaderData }) => { - const locale = params.locale || 'en' - const product = loaderData - - return { - title: product.title[locale] || product.title.en, - meta: [ - { - name: 'description', - content: product.description[locale] || product.description.en, - }, - { - property: 'og:locale', - content: locale, - }, - ], - links: [ - // Canonical URL (always use default locale format) - { - rel: 'canonical', - href: `https://example.com/products/${params.id}`, - }, - // Alternate language versions - { - rel: 'alternate', - hreflang: 'en', - href: `https://example.com/products/${params.id}`, - }, - { - rel: 'alternate', - hreflang: 'fr', - href: `https://example.com/fr/products/${params.id}`, - }, - { - rel: 'alternate', - hreflang: 'es', - href: `https://example.com/es/products/${params.id}`, - }, - ], - } - }, -}) -``` - -### Type Safety for i18n - -Ensure type safety for your i18n implementations: - -```tsx -// Define supported locales -type Locale = 'en' | 'fr' | 'es' | 'de' - -// Type-safe locale validation -function validateLocale(locale: string | undefined): locale is Locale { - return ['en', 'fr', 'es', 'de'].includes(locale as Locale) -} - -export const Route = createFileRoute('/{-$locale}/shop/{-$category}')({ - beforeLoad: async ({ params }) => { - const { locale } = params - - // Type-safe locale validation - if (locale && !validateLocale(locale)) { - throw redirect({ - to: '/shop/{-$category}', - params: { category: params.category }, - }) - } - - return { - locale: (locale as Locale) || 'en', - isDefaultLocale: !locale || locale === 'en', - } - }, - component: ShopComponent, -}) - -function ShopComponent() { - const { locale, category } = Route.useParams() - const { isDefaultLocale } = Route.useRouteContext() - - // TypeScript knows locale is Locale | undefined - // and we have validated it in beforeLoad - - return ( -
-

Shop {category ? `- ${category}` : ''}

-

Language: {locale || 'en'}

- {!isDefaultLocale && ( - - View in English - - )} -
- ) -} -``` - -Optional path parameters provide a powerful and flexible foundation for implementing internationalization in your TanStack Router applications. Whether you prefer prefix-based or combined approaches, you can create clean, SEO-friendly URLs while maintaining excellent developer experience and type safety. - ## Allowed Characters By default, path params are escaped with `encodeURIComponent`. If you want to allow other valid URI characters (e.g. `@` or `+`), you can specify that in your [RouterOptions](../api/router/RouterOptionsType.md#pathparamsallowedcharacters-property). diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 258a3c26b23..2e7af7eee82 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -11,8 +11,9 @@ This guide covers: - Language navigation and switching - SEO considerations - Type safety -- Integration patterns with i18n libraries (Paraglide) +- Integration patterns with i18n libraries (e.g. Paraglide) +--- ## Server-side i18n (TanStack Start) diff --git a/examples/react/start-i18n-paraglide/vite.config.ts b/examples/react/start-i18n-paraglide/vite.config.ts index a0d8a6f77e1..ca6ad1c24dc 100644 --- a/examples/react/start-i18n-paraglide/vite.config.ts +++ b/examples/react/start-i18n-paraglide/vite.config.ts @@ -17,21 +17,21 @@ const config = defineConfig({ { pattern: '/', localized: [ - ['en', '/en'], + ['en', '/'], ['de', '/de'], ], }, { pattern: '/about', localized: [ - ['en', '/en/about'], + ['en', '/about'], ['de', '/de/ueber'], ], }, { pattern: '/:path(.*)?', localized: [ - ['en', '/en/:path(.*)?'], + ['en', '/:path(.*)?'], ['de', '/de/:path(.*)?'], ], }, From 87280188fd978c514281e2df1ccb34217adda622 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 12:51:58 -0300 Subject: [PATCH 04/24] update readme --- examples/react/i18n-paraglide/README.md | 200 ++++++++---------------- 1 file changed, 61 insertions(+), 139 deletions(-) diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 98b25f6d0fe..367b4141c68 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -1,132 +1,63 @@ -# TanStack Router - i18n with Paraglide Example +### TanStack Router + Paraglide -This example shows how to use Paraglide with TanStack Router. +Paraglide provides type-safe translations, locale detection, and URL localization that pair naturally with TanStack Router. -- [TanStack Router Docs](https://tanstack.com/router) -- [Paraglide Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) +**GitHub example:** +[https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide) -## Start a new project based on this example - -To start a new project based on this example, run: - -```sh -npx gitpick TanStack/router/tree/main/examples/react/i18n-paraglide i18n-paraglide -``` - -## Getting started - -1. Init Paraglide JS +#### Project Setup ```bash npx @inlang/paraglide-js@latest init ``` -2. Add the vite plugin to your `vite.config.ts`: - -```diff -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' -import { tanstackRouter } from '@tanstack/router-plugin/vite' -+import { paraglideVitePlugin } from "@inlang/paraglide-js"; - -export default defineConfig({ - plugins: [ - tanstackRouter({ target: 'react', autoCodeSplitting: true }), - react(), -+ paraglideVitePlugin({ -+ project: "./project.inlang", -+ outdir: "./app/paraglide", -+ }), - ], -}); -``` - -3. Done :) - -Run the app and start translating. See the [basics documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/basics) for information on how to use Paraglide's messages, parameters, and locale management. +```ts +import { paraglideVitePlugin } from '@inlang/paraglide-js' -## Rewrite URL +paraglideVitePlugin({ + project: './project.inlang', + outdir: './app/paraglide', +}) +``` -If you want to handle how the URL looks when the user changes the locale, you can rewrite the URL in the router. +#### URL Localization via Router rewrite -```diff -import { createRouter } from "@tanstack/react-router"; -import { routeTree } from "./routeTree.gen"; -+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime.js"; +```ts +import { deLocalizeUrl, localizeUrl } from './paraglide/runtime' const router = createRouter({ routeTree, -+ rewrite: { -+ input: ({ url }) => deLocalizeUrl(url), -+ output: ({ url }) => localizeUrl(url), + rewrite: { + input: ({ url }) => deLocalizeUrl(url), + output: ({ url }) => localizeUrl(url), }, -}); +}) ``` -In `__root.tsx` add a `beforeLoad` hook to check if the user should be redirected and set the html `lang` attribute. - -Intercept the request in `server.ts` with the paraglideMiddleware: +## URL redirects ```ts -import { paraglideMiddleware } from './paraglide/server.js' -import handler from '@tanstack/react-start/server-entry' -export default { - fetch(req: Request): Promise { - return paraglideMiddleware(req, ({ request }) => handler.fetch(request)) - }, -} -``` - -In `__root.tsx` change the html lang attribute to the current locale. - -```tsx -import { getLocale } from '../paraglide/runtime.js' +import { shouldRedirect } from '../paraglide/runtime' -function RootDocument({ children }: { children: React.ReactNode }) { - return ( - - - - - - {children} - - - - ) +beforeLoad: async () => { + const decision = await shouldRedirect({ url: window.location.href }) + if (decision.redirectUrl) { + throw redirect({ href: decision.redirectUrl.href }) + } } ``` -## Offline redirect - -If you have an application that needs to work offline, you will need to handle the redirect in the client like this. - -```ts -import { shouldRedirect } from "../paraglide/runtime"; - -export const Route = createRootRoute({ - beforeLoad: async () => { - const decision = await shouldRedirect({ url: window.location.href }); +If you use TanStack Start and do not need offline capabilities, you don`t need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. - if (decision.redirectUrl) { - throw redirect({ href: decision.redirectUrl.href }); - } - }, - ... -}); -``` +## Type-safe Translated Pathnames -## Typesafe translated pathnames - -If you don't want to miss any translated path, you can create a `createTranslatedPathnames` function and pass it to the vite plugin. +If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. ```ts -import { Locale } from '@/paraglide/runtime' -import { FileRoutesByTo } from '../routeTree.gen' - -type RoutePath = keyof FileRoutesByTo +import { Locale } from "@reland/i18n/runtime" +import { RoutePath } from "../../types/Routes" -const excludedPaths = ['admin', 'docs', 'api'] as const +const excludedPaths = ["admin", "partner", "tests", "api"] as const type PublicRoutePath = Exclude< RoutePath, @@ -141,14 +72,16 @@ type TranslatedPathname = { function toUrlPattern(path: string) { return ( path - // catch-all - .replace(/\/\$$/, '/:path(.*)?') - // optional parameters: {-$param} - .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ':$1?') - // named parameters: $param - .replace(/\$([a-zA-Z0-9_]+)/g, ':$1') + // explicit catch-all: "/$" → "/:path(.*)?" + .replace(/\/\$$/, "/:path(.*)?") + // optional params like {-$param} → ":param(.*)?" + .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1(.*)?") + // normal params like $param → ":param(.*)?" + .replace(/\$([a-zA-Z0-9_]+)/g, ":$1(.*)?") + // remove any remaining braces (safety) + .replace(/[{}]/g, "") // remove trailing slash - .replace(/\/+$/, '') + .replace(/\/+$/, "") ) } @@ -168,43 +101,32 @@ function createTranslatedPathnames( } export const translatedPathnames = createTranslatedPathnames({ - '/': { - en: '/', - de: '/', + "/": { + en: "/", + es: "/" }, - '/about': { - en: '/about', - de: '/ueber', - }, -}) + "/about": { + en: "/about", + es: "/nosotros" + } ``` -And import into the Paraglide Vite plugin. - -## Server-side rendering - -For server-side rendering, check out the [TanStack Start guide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide). - -## Prerender routes - -You can use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +Use in vite.config.ts: ```ts -import { localizeHref } from './paraglide/runtime' -export const prerenderRoutes = ['/', '/about'].map((path) => ({ - path: localizeHref(path), - prerender: { - enabled: true, - }, -})) +paraglideVitePlugin({ + project: './project.inlang', + outdir: './app/paraglide', + urlPatterns: translatedPathnames +}) ``` -## About This Example +This guarantees: + +- No missing translations +- Full type safety +- Compiler feedback for routing mistakes -This example demonstrates: +## Looking for i18n with SSR/TanStack Start? -- Multi-language support with Paraglide -- Type-safe translations -- Locale-based routing -- Language switching -- i18n best practices +Check out the guide on integrating [i18n in TanStack Start](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). From 54dfb0d1a9a019e2c49411c954b04fb7b1aae562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:21:32 -0300 Subject: [PATCH 05/24] readme --- .../react/guide/internationalization-i18n.md | 38 ++- examples/react/i18n-paraglide/README.md | 3 - examples/react/start-i18n-paraglide/README.md | 239 +++++++----------- 3 files changed, 128 insertions(+), 152 deletions(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 2e7af7eee82..84d1d47fa94 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -13,22 +13,26 @@ This guide covers: - Type safety - Integration patterns with i18n libraries (e.g. Paraglide) ---- +# Integration with TanStack Router -## Server-side i18n (TanStack Start) +The base of this guide is built with TansTack Router. Check out the guide on integrating [i18n in TanStack Router](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). -This pattern integrates i18n at the routing and server layers. It is suitable when: +If you already set up the TanStack Router with i18n. This guide will be suitable when: - You use TanStack Start - You need SSR or streaming - You want locale-aware redirects and metadata +## Library integrations + ### TanStack Start + Paraglide **GitHub example:** [https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/start-i18n-paraglide) -### Server Middleware (SSR) +First, check out [TanStack Router + Paraglide integration guide](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n#tanstack-router-paraglide) + +#### Server Middleware (SSR) ```ts import { paraglideMiddleware } from './paraglide/server' @@ -40,7 +44,9 @@ export default { } ``` -### HTML Language Attribute +#### HTML Language Attribute + +Set the lang atribute in html at __root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' @@ -50,7 +56,7 @@ import { getLocale } from '../paraglide/runtime' --- -## Prerendering Localized Routes +### Prerendering Localized Routes ```ts import { localizeHref } from './paraglide/runtime' @@ -61,7 +67,25 @@ export const prerenderRoutes = ['/', '/about'].map((path) => ({ })) ``` ---- +In vite.config.ts: + +```ts +tanstackStart({ + prerender: { + // Enable prerendering + enabled: true, + + // Whether to extract links from the HTML and prerender them also + crawlLinks: true, + }, + pages: [ + { + path: '/my-page', + prerender: { enabled: true, outputPath: '/my-page/index.html' }, + }, + ], +}) +``` ## Additional i18n Integration Patterns diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 367b4141c68..eed50ae7b25 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -2,9 +2,6 @@ Paraglide provides type-safe translations, locale detection, and URL localization that pair naturally with TanStack Router. -**GitHub example:** -[https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide](https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide) - #### Project Setup ```bash diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 7f481e133c7..d84a7053771 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -1,141 +1,45 @@ -# TanStack Start example with Paraglide +### TanStack Start + Paraglide -This example shows how to use Paraglide with TanStack Start. +Paraglide provides type-safe translations, locale detection, and URL localization that pair naturally with TanStack Start. -- [TanStack Router Docs](https://tanstack.com/router) -- [Paraglide Documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) - -## Start a new project based on this example - -To start a new project based on this example, run: - -```sh -npx gitpick TanStack/router/tree/main/examples/react/start-i18n-paraglide start-i18n-paraglide -``` - -## Getting started - -1. Init Paraglide JS +#### Project Setup ```bash npx @inlang/paraglide-js@latest init ``` -2. Add the vite plugin to your `vite.config.ts`: - -```diff -import { defineConfig } from 'vite' -import { tanstackStart } from "@tanstack/react-start/plugin/vite"; -import react from '@vitejs/plugin-react' -+import { paraglideVitePlugin } from "@inlang/paraglide-js"; - -export default defineConfig({ - plugins: [ - tanstackStart(), - react(), -+ paraglideVitePlugin({ -+ project: "./project.inlang", -+ outdir: "./app/paraglide", -+ outputStructure: "message-modules", -+ cookieName: "PARAGLIDE_LOCALE", -+ strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], -+ urlPatterns: [ -+ { -+ pattern: "/:path(.*)?", -+ localized: [ -+ ["en", "/en/:path(.*)?"], -+ ], -+ }, -+ ], -+ }), - ], -}); -``` - -3. Done :) - -Run the app and start translating. See the [basics documentation](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/basics) for information on how to use Paraglide's messages, parameters, and locale management. - -## Rewrite URL - -If you want to handle how the URL looks when the user changes the locale, you can rewrite the URL in the router. - -```diff -import { createRouter } from "@tanstack/react-router"; -import { routeTree } from "./routeTree.gen"; -+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime.js"; - -const router = createRouter({ - routeTree, -+ rewrite: { -+ input: ({ url }) => deLocalizeUrl(url), -+ output: ({ url }) => localizeUrl(url), - }, -}); -``` - -In `server.ts` intercept the request with the paraglideMiddleware. - ```ts -import { paraglideMiddleware } from './paraglide/server.js' -import handler from '@tanstack/react-start/server-entry' -export default { - fetch(req: Request): Promise { - return paraglideMiddleware(req, () => handler.fetch(req)) - }, -} -``` +import { paraglideVitePlugin } from '@inlang/paraglide-js' -In `__root.tsx` change the html lang attribute to the current locale. - -```tsx -import { getLocale } from '../paraglide/runtime.js' - -function RootDocument({ children }: { children: React.ReactNode }) { - return ( - - - - - - {children} - - - - ) -} +paraglideVitePlugin({ + project: './project.inlang', + outdir: './app/paraglide', +}) ``` -## Offline redirect - -If you have an application that needs to work offline, you will need to handle the redirect in the client like this. +#### URL Localization via Router rewrite ```ts -import { shouldRedirect } from "../paraglide/runtime"; +import { deLocalizeUrl, localizeUrl } from './paraglide/runtime' -export const Route = createRootRoute({ - beforeLoad: async () => { - const decision = await shouldRedirect({ url: window.location.href }); - - if (decision.redirectUrl) { - throw redirect({ href: decision.redirectUrl.href }); - } +const router = createRouter({ + routeTree, + rewrite: { + input: ({ url }) => deLocalizeUrl(url), + output: ({ url }) => localizeUrl(url), }, - ... -}); +}) ``` -## Typesafe translated pathnames +## Type-safe Translated Pathnames -If you don't want to miss any translated path, you can create a `createTranslatedPathnames` function and pass it to the vite plugin. +If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. ```ts -import { Locale } from '@/paraglide/runtime' -import { FileRoutesByTo } from '../routeTree.gen' - -type RoutePath = keyof FileRoutesByTo +import { Locale } from "@reland/i18n/runtime" +import { RoutePath } from "../../types/Routes" -const excludedPaths = ['admin', 'docs', 'api'] as const +const excludedPaths = ["admin", "partner", "tests", "api"] as const type PublicRoutePath = Exclude< RoutePath, @@ -150,14 +54,16 @@ type TranslatedPathname = { function toUrlPattern(path: string) { return ( path - // catch-all - .replace(/\/\$$/, '/:path(.*)?') - // optional parameters: {-$param} - .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ':$1?') - // named parameters: $param - .replace(/\$([a-zA-Z0-9_]+)/g, ':$1') + // explicit catch-all: "/$" → "/:path(.*)?" + .replace(/\/\$$/, "/:path(.*)?") + // optional params like {-$param} → ":param(.*)?" + .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1(.*)?") + // normal params like $param → ":param(.*)?" + .replace(/\$([a-zA-Z0-9_]+)/g, ":$1(.*)?") + // remove any remaining braces (safety) + .replace(/[{}]/g, "") // remove trailing slash - .replace(/\/+$/, '') + .replace(/\/+$/, "") ) } @@ -177,38 +83,87 @@ function createTranslatedPathnames( } export const translatedPathnames = createTranslatedPathnames({ - '/': { - en: '/', - de: '/', - }, - '/about': { - en: '/about', - de: '/ueber', + "/": { + en: "/", + es: "/" }, + "/about": { + en: "/about", + es: "/nosotros" + } +``` + +Use in vite.config.ts: + +```ts +paraglideVitePlugin({ + project: './project.inlang', + outdir: './app/paraglide', + urlPatterns: translatedPathnames }) ``` -And import into the Paraglide Vite plugin. +This guarantees: + +- No missing translations +- Full type safety +- Compiler feedback for routing mistakes + +#### Server Middleware (SSR) + +```ts +import { paraglideMiddleware } from './paraglide/server' + +export default { + fetch(req: Request) { + return paraglideMiddleware(req, () => handler.fetch(req)) + }, +} +``` + +#### HTML Language Attribute -## Prerender routes +Set the lang atribute in html at __root.tsx: -You can use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +```tsx +import { getLocale } from '../paraglide/runtime' + + +``` + +--- + +### Prerendering Localized Routes ```ts import { localizeHref } from './paraglide/runtime' + export const prerenderRoutes = ['/', '/about'].map((path) => ({ path: localizeHref(path), + prerender: { enabled: true }, +})) +``` + +In vite.config.ts: + +```ts +tanstackStart({ prerender: { + // Enable prerendering enabled: true, + + // Whether to extract links from the HTML and prerender them also + crawlLinks: true, }, -})) + pages: [ + { + path: '/my-page', + prerender: { enabled: true, outputPath: '/my-page/index.html' }, + }, + ], +}) ``` -## About This Example - -This example demonstrates: +## Looking for i18n with SSR/TanStack Start? -- Multi-language support with Paraglide in TanStack Start -- Server-side translation -- Type-safe translations -- Locale-based routing +Check out the guide on integrating [i18n in TanStack Start](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). From ecebaf952772b657239bf9bae0546baab816bfa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:23:04 -0300 Subject: [PATCH 06/24] standardize examples e2e --- e2e/react-start/i18n-paraglide/vite.config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/e2e/react-start/i18n-paraglide/vite.config.ts b/e2e/react-start/i18n-paraglide/vite.config.ts index a0d8a6f77e1..ca6ad1c24dc 100644 --- a/e2e/react-start/i18n-paraglide/vite.config.ts +++ b/e2e/react-start/i18n-paraglide/vite.config.ts @@ -17,21 +17,21 @@ const config = defineConfig({ { pattern: '/', localized: [ - ['en', '/en'], + ['en', '/'], ['de', '/de'], ], }, { pattern: '/about', localized: [ - ['en', '/en/about'], + ['en', '/about'], ['de', '/de/ueber'], ], }, { pattern: '/:path(.*)?', localized: [ - ['en', '/en/:path(.*)?'], + ['en', '/:path(.*)?'], ['de', '/de/:path(.*)?'], ], }, From ace1f4f0a2126a3a64b4aec8fe5997ee09535852 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 17:25:07 +0000 Subject: [PATCH 07/24] ci: apply automated fixes --- .../framework/react/guide/internationalization-i18n.md | 2 +- .../framework/react/guide/internationalization-i18n.md | 4 ++-- examples/react/i18n-paraglide/README.md | 2 +- examples/react/start-i18n-paraglide/README.md | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/router/framework/react/guide/internationalization-i18n.md b/docs/router/framework/react/guide/internationalization-i18n.md index 38cc78abfff..8249886bb06 100644 --- a/docs/router/framework/react/guide/internationalization-i18n.md +++ b/docs/router/framework/react/guide/internationalization-i18n.md @@ -462,7 +462,7 @@ Use in vite.config.ts: paraglideVitePlugin({ project: './project.inlang', outdir: './app/paraglide', - urlPatterns: translatedPathnames + urlPatterns: translatedPathnames, }) ``` diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 84d1d47fa94..01c388c9bd9 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -46,12 +46,12 @@ export default { #### HTML Language Attribute -Set the lang atribute in html at __root.tsx: +Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - +; ``` --- diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index eed50ae7b25..78c3d4e9a75 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -114,7 +114,7 @@ Use in vite.config.ts: paraglideVitePlugin({ project: './project.inlang', outdir: './app/paraglide', - urlPatterns: translatedPathnames + urlPatterns: translatedPathnames, }) ``` diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index d84a7053771..d9e51c62a10 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -99,7 +99,7 @@ Use in vite.config.ts: paraglideVitePlugin({ project: './project.inlang', outdir: './app/paraglide', - urlPatterns: translatedPathnames + urlPatterns: translatedPathnames, }) ``` @@ -123,12 +123,12 @@ export default { #### HTML Language Attribute -Set the lang atribute in html at __root.tsx: +Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - +; ``` --- From 8c4efc62ad03984209d0304836c2bfd7d119c423 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 17:26:14 +0000 Subject: [PATCH 08/24] ci: apply automated fixes (attempt 2/3) --- docs/start/framework/react/guide/internationalization-i18n.md | 1 - examples/react/start-i18n-paraglide/README.md | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 01c388c9bd9..c2350d55695 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -50,7 +50,6 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - ; ``` diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index d9e51c62a10..b5e66142c15 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -127,7 +127,6 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - ; ``` From 56378843ad9c8052369729db4f8da57ef38b1e98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:27:09 -0300 Subject: [PATCH 09/24] standardize to de --- .../router/framework/react/guide/internationalization-i18n.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/router/framework/react/guide/internationalization-i18n.md b/docs/router/framework/react/guide/internationalization-i18n.md index 8249886bb06..ea7a429f3c6 100644 --- a/docs/router/framework/react/guide/internationalization-i18n.md +++ b/docs/router/framework/react/guide/internationalization-i18n.md @@ -448,11 +448,11 @@ function createTranslatedPathnames( export const translatedPathnames = createTranslatedPathnames({ "/": { en: "/", - es: "/" + de: "/" }, "/about": { en: "/about", - es: "/nosotros" + de: "/ueber" } ``` From f1bdfccac0f4dede0566acadfbb219ab1062f398 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:27:38 -0300 Subject: [PATCH 10/24] gtml new line --- docs/start/framework/react/guide/internationalization-i18n.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index c2350d55695..8da7e6e2ef2 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -50,7 +50,8 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' -; + + ``` --- From 0a4443564e2a7af34cc925aa2cb2af6b6171f6a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:28:02 -0300 Subject: [PATCH 11/24] update readme --- examples/react/start-i18n-paraglide/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index b5e66142c15..34864e88714 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -127,7 +127,8 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' -; + + ``` --- From 0284fdcd630dc00073ad041694c6c213c98effb6 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 17:29:15 +0000 Subject: [PATCH 12/24] ci: apply automated fixes --- docs/start/framework/react/guide/internationalization-i18n.md | 2 +- examples/react/start-i18n-paraglide/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 8da7e6e2ef2..01c388c9bd9 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -51,7 +51,7 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - +; ``` --- diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 34864e88714..d9e51c62a10 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -128,7 +128,7 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - +; ``` --- From 86e8fac01674b4dfe7cdf7bce878af458c9254ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:29:58 -0300 Subject: [PATCH 13/24] fix html --- docs/start/framework/react/guide/internationalization-i18n.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 01c388c9bd9..8da7e6e2ef2 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -51,7 +51,7 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' -; + ``` --- From d990a68f904b779b8222115142bf152b12a49fb4 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 17:31:16 +0000 Subject: [PATCH 14/24] ci: apply automated fixes --- docs/start/framework/react/guide/internationalization-i18n.md | 2 +- examples/react/start-i18n-paraglide/README.md | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 8da7e6e2ef2..01c388c9bd9 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -51,7 +51,7 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - +; ``` --- diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index d9e51c62a10..b5e66142c15 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -127,7 +127,6 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - ; ``` From b2a156182dc77d32d7106707f559bb2d6c51f62a Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 17:32:24 +0000 Subject: [PATCH 15/24] ci: apply automated fixes (attempt 2/3) --- docs/start/framework/react/guide/internationalization-i18n.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 01c388c9bd9..c2350d55695 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -50,7 +50,6 @@ Set the lang atribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' - ; ``` From 39e5d5581df2c3a82f8868d1ec9d7323c88b0422 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:40:23 -0300 Subject: [PATCH 16/24] fix spelling and example --- .../react/guide/internationalization-i18n.md | 19 +++++++++++++++---- examples/react/start-i18n-paraglide/README.md | 19 +++++++++++++++---- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index c2350d55695..5b2d7a5dee9 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -46,14 +46,25 @@ export default { #### HTML Language Attribute -Set the lang atribute in html at \_\_root.tsx: +Set the lang attribute in html at __root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' -; -``` ---- +function RootDocument({ children }: Readonly<{ children: ReactNode }>) { + return ( + + + + + + {children} + + + + ) +} +``` ### Prerendering Localized Routes diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index b5e66142c15..95adf46c53f 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -123,14 +123,25 @@ export default { #### HTML Language Attribute -Set the lang atribute in html at \_\_root.tsx: +Set the lang attribute in html at __root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' -; -``` ---- +function RootDocument({ children }: Readonly<{ children: ReactNode }>) { + return ( + + + + + + {children} + + + + ) +} +``` ### Prerendering Localized Routes From 45ba768e5613eac41c3dd23dd9491e4fa151c232 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 17:41:25 +0000 Subject: [PATCH 17/24] ci: apply automated fixes --- docs/start/framework/react/guide/internationalization-i18n.md | 2 +- examples/react/start-i18n-paraglide/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 5b2d7a5dee9..b0fbfb35108 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -46,7 +46,7 @@ export default { #### HTML Language Attribute -Set the lang attribute in html at __root.tsx: +Set the lang attribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 95adf46c53f..8c4328bf7f6 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -123,7 +123,7 @@ export default { #### HTML Language Attribute -Set the lang attribute in html at __root.tsx: +Set the lang attribute in html at \_\_root.tsx: ```tsx import { getLocale } from '../paraglide/runtime' From 7226fd9146f32df2d5c60826724aec89f1475531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:42:48 -0300 Subject: [PATCH 18/24] wording --- docs/router/config.json | 2 +- docs/start/config.json | 2 +- examples/react/i18n-paraglide/README.md | 6 +++--- examples/react/start-i18n-paraglide/README.md | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/router/config.json b/docs/router/config.json index 8c7a81a2648..cbe4da974da 100644 --- a/docs/router/config.json +++ b/docs/router/config.json @@ -327,7 +327,7 @@ }, { "label": "Internationalization (i18n)", - "to": "framework/react/guide/Internationalization-18n" + "to": "framework/react/guide/internationalization-18n" } ] }, diff --git a/docs/start/config.json b/docs/start/config.json index 83be1c00d7f..0fb2b2cbc48 100644 --- a/docs/start/config.json +++ b/docs/start/config.json @@ -179,7 +179,7 @@ }, { "label": "Internationalization (i18n)", - "to": "framework/react/guide/Internationalization-i18n" + "to": "framework/react/guide/internationalization-i18n" } ] }, diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index 78c3d4e9a75..fac8eb9249d 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -31,7 +31,7 @@ const router = createRouter({ }) ``` -## URL redirects +#### URL redirects ```ts import { shouldRedirect } from '../paraglide/runtime' @@ -44,9 +44,9 @@ beforeLoad: async () => { } ``` -If you use TanStack Start and do not need offline capabilities, you don`t need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. +If you use TanStack Start and do not need offline capabilities, you don't need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. -## Type-safe Translated Pathnames +#### Type-safe Translated Pathnames If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 8c4328bf7f6..80c5f9cc704 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -31,7 +31,7 @@ const router = createRouter({ }) ``` -## Type-safe Translated Pathnames +#### Type-safe Translated Pathnames If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. @@ -143,7 +143,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) { } ``` -### Prerendering Localized Routes +#### Prerendering Localized Routes ```ts import { localizeHref } from './paraglide/runtime' From cbde882ea9435988961806d20871bac4f5b3dd62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:49:32 -0300 Subject: [PATCH 19/24] fix path --- docs/router/config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/router/config.json b/docs/router/config.json index cbe4da974da..a1fab7b8bc9 100644 --- a/docs/router/config.json +++ b/docs/router/config.json @@ -327,7 +327,7 @@ }, { "label": "Internationalization (i18n)", - "to": "framework/react/guide/internationalization-18n" + "to": "framework/react/guide/internationalization-i18n" } ] }, From 197c69a1504fd1c3966798b3e4be6a434ee5779f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Sun, 11 Jan 2026 14:50:35 -0300 Subject: [PATCH 20/24] fix markdown structure --- .../router/framework/react/guide/internationalization-i18n.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/router/framework/react/guide/internationalization-i18n.md b/docs/router/framework/react/guide/internationalization-i18n.md index ea7a429f3c6..b026b19e992 100644 --- a/docs/router/framework/react/guide/internationalization-i18n.md +++ b/docs/router/framework/react/guide/internationalization-i18n.md @@ -379,7 +379,7 @@ const router = createRouter({ }) ``` -## URL redirects +#### URL redirects ```ts import { shouldRedirect } from '../paraglide/runtime' @@ -394,7 +394,7 @@ beforeLoad: async () => { If you use TanStack Start and do not need offline capabilities, you don`t need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. -## Type-safe Translated Pathnames +#### Type-safe Translated Pathnames If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. From 725e6e2ba86b32663219b5592e9938d4e9e9ed02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Wed, 14 Jan 2026 11:14:55 -0300 Subject: [PATCH 21/24] fix markdown structure --- docs/start/framework/react/guide/internationalization-i18n.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index b0fbfb35108..08724aa8ed7 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -66,7 +66,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) { } ``` -### Prerendering Localized Routes +#### Prerendering Localized Routes ```ts import { localizeHref } from './paraglide/runtime' From feb0e6f975244a000432a262f704dd361d4829fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Wed, 14 Jan 2026 11:26:46 -0300 Subject: [PATCH 22/24] fix wording --- .../framework/react/guide/internationalization-i18n.md | 6 +++--- .../framework/react/guide/internationalization-i18n.md | 2 +- examples/react/i18n-paraglide/README.md | 4 ++-- examples/react/start-i18n-paraglide/README.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/router/framework/react/guide/internationalization-i18n.md b/docs/router/framework/react/guide/internationalization-i18n.md index b026b19e992..06a6bd544d5 100644 --- a/docs/router/framework/react/guide/internationalization-i18n.md +++ b/docs/router/framework/react/guide/internationalization-i18n.md @@ -392,11 +392,11 @@ beforeLoad: async () => { } ``` -If you use TanStack Start and do not need offline capabilities, you don`t need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. +If you use TanStack Start and do not need offline capabilities, you don't need to use the shouldRedirect logic, only paraglideMiddleware in the TanStack Start Paraglide integration guide. #### Type-safe Translated Pathnames -If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. +If you use translated pathnames, you can derive them directly from the TanStack Router route tree to ensure every route has translations. ```ts import { Locale } from "@reland/i18n/runtime" @@ -453,7 +453,7 @@ export const translatedPathnames = createTranslatedPathnames({ "/about": { en: "/about", de: "/ueber" - } + }) ``` Use in vite.config.ts: diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 08724aa8ed7..89b365f1aad 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -17,7 +17,7 @@ This guide covers: The base of this guide is built with TansTack Router. Check out the guide on integrating [i18n in TanStack Router](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). -If you already set up the TanStack Router with i18n. This guide will be suitable when: +If you have already set up TanStack Router with i18n, this guide will be suitable when: - You use TanStack Start - You need SSR or streaming diff --git a/examples/react/i18n-paraglide/README.md b/examples/react/i18n-paraglide/README.md index fac8eb9249d..63402f30ca3 100644 --- a/examples/react/i18n-paraglide/README.md +++ b/examples/react/i18n-paraglide/README.md @@ -48,7 +48,7 @@ If you use TanStack Start and do not need offline capabilities, you don't need t #### Type-safe Translated Pathnames -If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. +If you use translated pathnames, you can derive them directly from the TanStack Router route tree to ensure every route has translations. ```ts import { Locale } from "@reland/i18n/runtime" @@ -105,7 +105,7 @@ export const translatedPathnames = createTranslatedPathnames({ "/about": { en: "/about", es: "/nosotros" - } + }) ``` Use in vite.config.ts: diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index 80c5f9cc704..d1256b77648 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -33,7 +33,7 @@ const router = createRouter({ #### Type-safe Translated Pathnames -If you use translated pathnames. To ensure every route has translations, you can derive translated pathnames directly from the TanStack Router route tree. +If you use translated pathnames, you can derive them directly from the TanStack Router route tree to ensure every route has translations. ```ts import { Locale } from "@reland/i18n/runtime" @@ -90,7 +90,7 @@ export const translatedPathnames = createTranslatedPathnames({ "/about": { en: "/about", es: "/nosotros" - } + }) ``` Use in vite.config.ts: From 131a38fddc2fd02805f8b96ba8c4e2acb1fa6b74 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 14 Jan 2026 14:27:58 +0000 Subject: [PATCH 23/24] ci: apply automated fixes --- examples/react/start-i18n-paraglide/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react/start-i18n-paraglide/README.md b/examples/react/start-i18n-paraglide/README.md index d1256b77648..b23d0164247 100644 --- a/examples/react/start-i18n-paraglide/README.md +++ b/examples/react/start-i18n-paraglide/README.md @@ -33,7 +33,7 @@ const router = createRouter({ #### Type-safe Translated Pathnames -If you use translated pathnames, you can derive them directly from the TanStack Router route tree to ensure every route has translations. +If you use translated pathnames, you can derive them directly from the TanStack Router route tree to ensure every route has translations. ```ts import { Locale } from "@reland/i18n/runtime" From a993a5a1755143686da8a418c853cad5faebfbdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlio=20M=C3=BChlbauer?= <53458125+juliomuhlbauer@users.noreply.github.com> Date: Wed, 14 Jan 2026 11:28:09 -0300 Subject: [PATCH 24/24] fix wording --- docs/start/framework/react/guide/internationalization-i18n.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/start/framework/react/guide/internationalization-i18n.md b/docs/start/framework/react/guide/internationalization-i18n.md index 89b365f1aad..e36e293a0a6 100644 --- a/docs/start/framework/react/guide/internationalization-i18n.md +++ b/docs/start/framework/react/guide/internationalization-i18n.md @@ -15,7 +15,7 @@ This guide covers: # Integration with TanStack Router -The base of this guide is built with TansTack Router. Check out the guide on integrating [i18n in TanStack Router](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). +The base of this guide is built with TanStack Router. Check out the guide on integrating [i18n in TanStack Router](https://tanstack.com/start/latest/docs/framework/react/guide/internationalization-i18n). If you have already set up TanStack Router with i18n, this guide will be suitable when: