@intlayer/docs 8.11.1 → 8.11.3

package/docs/en/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - How to translate a Tanstack Start app using Solid.js in 2026
-description: Learn how to add internationalization (i18n) to your Tanstack Start application using Intlayer and Solid.js. Follow this comprehensive guide to make your app multilingual with locale-aware routing.
+updatedAt: 2026-05-31
+title: TanStack Start + Solid i18n - Complete guide to translate a TanStack Start app
+description: Best solution for bundle size, SEO, performances & maintainability. Make your TanStack Start and Solid app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Internationalization
   - Documentation
@@ -41,17 +41,47 @@ history:
 
 This guide demonstrates how to integrate **Intlayer** for seamless internationalization in Tanstack Start projects with Solid.js, locale-aware routing, TypeScript support, and modern development practices.
 
-## What is Intlayer?
+## Why Intlayer over alternatives?
 
-**Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications.
+Compared to main solutions like `react-i18next` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:
 
-With Intlayer, you can:
+<AccordionGroup>
+<Accordion header="Full TanStack Start coverage">
 
-- **Easily manage translations** using declarative dictionaries at the component level.
-- **Dynamically localize metadata**, routes, and content.
-- **Ensure TypeScript support** with autogenerated types, improving autocompletion and error detection.
-- **Benefit from advanced features**, like dynamic locale detection and switching.
-- **Enable locale-aware routing** with Tanstack Start's file-based routing system.
+Intlayer is optimized to work perfectly with TanStack Start and Solid by offering **multilingual routing**, **sitemap**, and all the features needed for scaling internationalization (i18n).
+
+</Accordion>
+<Accordion header="Bundle size">
+
+Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
+
+</Accordion>
+<Accordion header="Maintainability">
+
+Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
+
+</Accordion>
+<Accordion header="AI Agent">
+
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+
+</Accordion>
+<Accordion header="Automation">
+
+Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) to help **translate in the background**.
+
+</Accordion>
+<Accordion header="Performance">
+
+Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.
+
+</Accordion>
+<Accordion header="Scaling with none-dev">
+
+More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -89,11 +119,15 @@ With Intlayer, you can:
 
 See [Application Template](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) on GitHub.
 
-### Step 1: Create Project
+<Steps>
+
+<Step number={1} title="Create Project">
 
 Start by creating a new TanStack Start project by following the [Start new project](https://tanstack.com/start/latest/docs/framework/solid/quick-start) guide on the TanStack Start website.
 
-### Step 2: Install Intlayer Packages
+</Step>
+
+<Step number={2} title="Install Intlayer Packages">
 
 Install the necessary packages using your preferred package manager:
 
@@ -131,7 +165,9 @@ bun x intlayer init
 - **vite-intlayer**
   Includes the Vite plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
 
-### Step 3: Configuration of your project
+</Step>
+
+<Step number={3} title="Configuration of your project">
 
 Create a config file to configure the languages of your application:
 
@@ -152,7 +188,9 @@ export default config;
 
 > Through this configuration file, you can set up localized URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
-### Step 4: Integrate Intlayer in Your Vite Configuration
+</Step>
+
+<Step number={4} title="Integrate Intlayer in Your Vite Configuration">
 
 Add the intlayer plugin into your configuration:
 
@@ -180,7 +218,9 @@ export default defineConfig({
 
 > The `intlayer()` Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimize performance.
 
-### Step 5: Create Root Layout
+</Step>
+
+<Step number={5} title="Create Root Layout">
 
 Configure your root layout to support internationalization by using `useParams` to detect the current locale and setting the `lang` and `dir` attributes on the `html` tag.
 
@@ -221,7 +261,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Step 6: Create Locale Layout (Optional)
+</Step>
+
+<Step number={6} title="Create Locale Layout">
 
 Create a layout that handles the locale prefix and performs validation. This layout will ensure that only valid locales are processed.
 
@@ -256,7 +298,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > For the `'prefix-all'` mode, you may prefer switching the slot to `$locale` instead.
 > For the `'no-prefix'` or `'search-params'` mode, you can remove the slot entirely.
 
-### Step 7: Declare Your Content
+</Step>
+
+<Step number={7} title="Declare Your Content">
 
 Create and manage your content declarations to store translations:
 
@@ -302,7 +346,9 @@ export default appContent;
 
 > For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
-### Step 7: Create Locale-Aware Components and Hooks
+</Step>
+
+<Step number={7} title="Create Locale-Aware Components and Hooks">
 
 Create a `LocalizedLink` component for locale-aware navigation:
 
@@ -381,7 +427,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Step 8: Utilize Intlayer in Your Pages
+</Step>
+
+<Step number={8} title="Utilize Intlayer in Your Pages">
 
 Access your content dictionaries throughout your application:
 
@@ -424,7 +472,9 @@ function RouteComponent() {
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useIntlayer.md).
 
-### Step 9: Create a Locale Switcher Component
+</Step>
+
+<Step number={9} title="Create a Locale Switcher Component">
 
 Create a component to allow users to change languages:
 
@@ -468,7 +518,9 @@ export default LocaleSwitcher;
 >
 > To Learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useLocale.md).
 
-### Step 10: HTML Attributes Management
+</Step>
+
+<Step number={10} title="HTML Attributes Management">
 
 As seen in Step 5, you can manage the `lang` and `dir` attributes of the `html` tag using `useParams` in your root component. This ensures that the correct attributes are set on the server and client.
 
@@ -487,7 +539,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Step 11: Add middleware (Optional)
+</Step>
+
+<Step number={11} title="Add middleware">
 
 You can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
 
@@ -518,7 +572,9 @@ export default defineConfig({
 
 ---
 
-### Step 12: Internationalize your Metadata (Optional)
+</Step>
+
+<Step number={12} title="Internationalize your Metadata">
 
 You can also use the `getIntlayer` function to access your content dictionaries inside the `head` loader for locale-aware metadata:
 
@@ -565,7 +621,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Step 13: Retrieve the locale in your server actions (Optional)
+</Step>
+
+<Step number={13} title="Retrieve the locale in your server actions">
 
 You may want to access the current locale from inside your server actions or API endpoints.
 You can do this using the `getLocale` helper from `intlayer`.
@@ -602,7 +660,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Step 14: Manage not found pages (Optional)
+</Step>
+
+<Step number={14} title="Manage not found pages">
 
 When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.
 
@@ -676,7 +736,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Optional) Step 15: Extract the content of your components
+</Step>
+
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -789,7 +851,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Step 16: Pre-render & Generate Sitemap (Optional)
+</Step>
+
+<Step number={16} title="Pre-render & Generate Sitemap">
 
 Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
 
@@ -862,7 +926,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Step 17: Configure TypeScript (Optional)
+</Step>
+
+<Step number={17} title="Configure TypeScript">
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
 
@@ -893,6 +959,10 @@ To do this, you can add the following instructions to your `.gitignore` file:
 
 ---
 
+</Step>
+
+</Steps>
+
 ## VS Code Extension
 
 To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.

package/docs/en/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - How to translate an Tanstack Start app in 2026
-description: Learn how to add internationalization (i18n) to your Tanstack Start application using Intlayer. Follow this comprehensive guide to make your app multilingual with locale-aware routing.
+updatedAt: 2026-05-31
+title: TanStack Start i18n - Complete guide to translate a TanStack Start app
+description: Best solution for bundle size, SEO, performances & maintainability. Make your TanStack Start app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Internationalization
   - Documentation
@@ -58,17 +58,47 @@ history:
 
 This guide demonstrates how to integrate **Intlayer** for seamless internationalization in Tanstack Start projects with locale-aware routing, TypeScript support, and modern development practices.
 
-## What is Intlayer?
+## Why Intlayer over alternatives?
 
-**Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications.
+Compared to main solutions like `react-i18next` or `use-intl`, or `paraglide`, Intlayer is a solution that comes with integrated optimizations such as:
 
-With Intlayer, you can:
+<AccordionGroup>
+<Accordion header="Full TanStack Start coverage">
 
-- **Easily manage translations** using declarative dictionaries at the component level.
-- **Dynamically localize metadata**, routes, and content.
-- **Ensure TypeScript support** with autogenerated types, improving autocompletion and error detection.
-- **Benefit from advanced features**, like dynamic locale detection and switching.
-- **Enable locale-aware routing** with Tanstack Start's file-based routing system.
+Intlayer is fully optimized for TanStack Start, providing **multilingual routing**, **cookie management**, **sitemap generation**, **dynamic content loading**, and all the features needed to scale your internationalization (i18n) efforts.
+
+</Accordion>
+<Accordion header="Bundle size">
+
+Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
+
+</Accordion>
+<Accordion header="Maintainability">
+
+Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
+
+</Accordion>
+<Accordion header="AI Agent">
+
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+
+</Accordion>
+<Accordion header="Automation">
+
+Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) to help **translate in the background**.
+
+</Accordion>
+<Accordion header="Performance">
+
+Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.
+
+</Accordion>
+<Accordion header="Scaling with none-dev">
+
+More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -106,11 +136,15 @@ With Intlayer, you can:
 
 See [Application Template](https://github.com/aymericzip/intlayer-tanstack-start-template) on GitHub.
 
-### Step 1: Create Project
+<Steps>
+
+<Step number={1} title="Create Project">
 
 Start by creating a new TanStack Start project by following the [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) guide on the TanStack Start website.
 
-### Step 2: Install Intlayer Packages
+</Step>
+
+<Step number={2} title="Install Intlayer Packages">
 
 Install the necessary packages using your preferred package manager:
 
@@ -148,7 +182,9 @@ bun x intlayer init
 - **vite-intlayer**
   Includes the Vite plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
 
-### Step 3: Configuration of your project
+</Step>
+
+<Step number={3} title="Configuration of your project">
 
 Create a config file to configure the languages of your application:
 
@@ -169,7 +205,9 @@ export default config;
 
 > Through this configuration file, you can set up localized URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
-### Step 4: Integrate Intlayer in Your Vite Configuration
+</Step>
+
+<Step number={4} title="Integrate Intlayer in Your Vite Configuration">
 
 Add the intlayer plugin into your configuration:
 
@@ -199,7 +237,9 @@ export default config;
 
 > The `intlayer()` Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimize performance.
 
-### Step 5: Create Root Layout
+</Step>
+
+<Step number={5} title="Create Root Layout">
 
 Configure your root layout to support internationalization by using `useParams` to detect the current locale and setting the `lang` and `dir` attributes on the `html` tag.
 
@@ -251,7 +291,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
-### Step 6: Create Locale Layout
+</Step>
+
+<Step number={6} title="Create Locale Layout">
 
 Create a layout that handles the locale prefix and performs validation.
 
@@ -283,7 +325,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > For the `'prefix-all'` mode, you may prefer switching the slot to `$locale` instead.
 > For the `'no-prefix'` or `'search-params'` mode, you can remove the slot entirely.
 
-### Step 7: Declare Your Content
+</Step>
+
+<Step number={7} title="Declare Your Content">
 
 Create and manage your content declarations to store translations:
 
@@ -329,7 +373,9 @@ export default appContent;
 
 > For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
-### Step 7: Create Locale-Aware Components and Hooks
+</Step>
+
+<Step number={7} title="Create Locale-Aware Components and Hooks">
 
 Create a `LocalizedLink` component for locale-aware navigation:
 
@@ -433,7 +479,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Step 8: Utilize Intlayer in Your Pages
+</Step>
+
+<Step number={8} title="Utilize Intlayer in Your Pages">
 
 Access your content dictionaries throughout your application:
 
@@ -489,7 +537,9 @@ function RouteComponent() {
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md).
 
-### Step 9: Create a Locale Switcher Component
+</Step>
+
+<Step number={9} title="Create a Locale Switcher Component">
 
 Create a component to allow users to change languages:
 
@@ -550,7 +600,9 @@ export const LocaleSwitcher: FC = () => {
 
 > To Learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md).
 
-### Step 10: HTML Attributes Management
+</Step>
+
+<Step number={10} title="HTML Attributes Management">
 
 As seen in Step 5, you can manage the `lang` and `dir` attributes of the `html` tag using `useParams` in your root component. This ensures that the correct attributes are set on the server and client.
 
@@ -569,7 +621,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Step 11: Add middleware (Optional)
+</Step>
+
+<Step number={11} title="Add middleware">
 
 You can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
 
@@ -600,7 +654,9 @@ export default defineConfig({
 
 ---
 
-### Step 12: Internationalize your Metadata (Optional)
+</Step>
+
+<Step number={12} title="Internationalize your Metadata">
 
 You can also use the `getIntlayer` hook to access your content dictionaries throughout your application:
 
@@ -647,7 +703,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Step 13: Retrieve the locale in your server actions (Optional)
+</Step>
+
+<Step number={13} title="Retrieve the locale in your server actions">
 
 You may want to access the current locale from inside your server actions or API endpoints.
 You can do this using the `getLocale` helper from `intlayer`.
@@ -684,7 +742,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Step 14: Manage not found pages (Optional)
+</Step>
+
+<Step number={14} title="Manage not found pages">
 
 When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.
 
@@ -758,7 +818,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Optional) Step 15: Extract the content of your components
+</Step>
+
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -860,7 +922,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Step 16: Pre-render & Generate Sitemap (Optional)
+</Step>
+
+<Step number={16} title="Pre-render & Generate Sitemap">
 
 Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
 
@@ -935,7 +999,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Step 17: Configure TypeScript (Optional)
+</Step>
+
+<Step number={17} title="Configure TypeScript">
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
 
@@ -966,6 +1032,10 @@ To do this, you can add the following instructions to your `.gitignore` file:
 
 ---
 
+</Step>
+
+</Steps>
+
 ## VS Code Extension
 
 To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.