@intlayer/docs 8.5.2 → 8.6.0

package/docs/de/intlayer_with_vite+svelte.md

@@ -233,7 +233,7 @@ module.exports = appContent;
 <!-- Inhalt als einfachen Inhalt rendern -->
 <h1>{$content.title}</h1>
 <!-- Um den Inhalt editierbar mit dem Editor zu rendern -->
-<h1><svelte:component this={$content.title} /></h1>
+<h1>{@const Title = $content.title}<Title /></h1>
 <!-- Um den Inhalt als String zu rendern -->
 <div aria-label={$content.title.value}></div>
 ```

package/docs/en/intlayer_with_react_router_v7.md

@@ -184,10 +184,9 @@ Add the intlayer plugin into your configuration:
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
+  plugins: [reactRouter(), intlayer()],
 });
 ```
 

package/docs/en/intlayer_with_react_router_v7_fs_routes.md

@@ -172,10 +172,9 @@ Add the intlayer plugin into your configuration:
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
+  plugins: [reactRouter(), intlayer()],
 });
 ```
 
@@ -586,13 +585,12 @@ You can also use the `intlayerProxy` to add server-side routing to your applicat
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // should be placed first
     reactRouter(),
-    tsconfigPaths(),
+
     intlayer(),
   ],
 });

package/docs/en/intlayer_with_svelte_kit.md

@@ -198,7 +198,7 @@ Now you can use the `useIntlayer` function in any Svelte component. It returns a
 <!-- Render content as simple content  -->
 <h1>{$content.title}</h1>
 <!-- To render the content editable using the editor -->
-<h1><svelte:component this={$content.title} /></h1>
+<h1>{@const Title = $content.title}<Title /></h1>
 <!-- To render the content as a string -->
 <div aria-label={$content.title.value}></div>
 ```
@@ -554,7 +554,7 @@ To be able to visualize the intlayer editor selector, you will have to use the c
   <h1>{$content.title}</h1>
 
   <!-- Render content as a component (required by the editor) -->
-  <svelte:component this={$content.component} />
+  {@const Component = $content.component}<Component />
 </div>
 ```
 

package/docs/en/intlayer_with_tanstack+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-03-25
+updatedAt: 2026-03-29
 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.
 keywords:
@@ -12,6 +12,7 @@ keywords:
   - i18n
   - TypeScript
   - Locale Routing
+  - Sitemap
 slugs:
   - doc
   - environment
@@ -19,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-solid-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 8.6.0
+    date: 2026-03-29
+    changes: "Add pre-render & sitemap"
   - version: 8.5.1
     date: 2026-03-25
     changes: "Added for Tanstack Start Solid.js"
@@ -140,16 +144,12 @@ Add the intlayer plugin into your configuration:
 import { intlayer } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [
     devtools(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
@@ -221,9 +221,6 @@ function RootComponent() {
 }
 ```
 
-> [!NOTE]
-> In Solid, `useMatches` returns a **signal** (reactive accessor). Use `matches()` (with parentheses) to access the current value reactively.
-
 ### Step 6: Create Locale Layout (Optional)
 
 Create a layout that handles the locale prefix and performs validation. This layout will ensure that only valid locales are processed.
@@ -415,7 +412,6 @@ function RouteComponent() {
 }
 ```
 
-> [!NOTE]
 > In Solid, `useIntlayer` returns an **accessor** function (e.g., `content()`). You must call this function to access the reactive content.
 >
 > 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).
@@ -460,7 +456,6 @@ export const LocaleSwitcher = () => {
 export default LocaleSwitcher;
 ```
 
-> [!NOTE]
 > In Solid, `locale` from `useLocale` is a **signal accessor**. Use `locale()` (with parentheses) to read its current value reactively.
 >
 > 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).
@@ -502,15 +497,11 @@ import solid from "vite-plugin-solid";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // The proxy should be placed before server if you use Nitro
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -803,16 +794,12 @@ Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [
     devtools(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
@@ -847,7 +834,82 @@ bun run build # Or bun run dev
 
 ---
 
-### Step 16: Configure TypeScript (Optional)
+### Step 16: Pre-render & Generate Sitemap (Optional)
+
+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.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+To use it, you first need to configure your `vite.config.ts` to enable pre-rendering for your localized routes and disable the default TanStack Start sitemap generation.
+
+```typescript fileName="vite.config.ts"
+import { localeMap, localeFlatMap } from "intlayer";
+// ... other imports
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
+
+export default defineConfig({
+  plugins: [
+    // ... other plugins
+    tanstackStart({
+      // ... other config
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
+  ],
+});
+```
+
+Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:
+
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/solid-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
+### Step 17: Configure TypeScript (Optional)
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
 

package/docs/en/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2025-12-30
+updatedAt: 2026-03-29
 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.
 keywords:
@@ -12,6 +12,7 @@ keywords:
   - i18n
   - TypeScript
   - Locale Routing
+  - Sitemap
 slugs:
   - doc
   - environment
@@ -19,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 8.6.0
+    date: 2026-03-29
+    changes: "Add pre-render & sitemap"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
@@ -160,14 +164,10 @@ import viteReact from "@vitejs/plugin-react";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 const config = defineConfig({
   plugins: [
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -593,15 +593,11 @@ import viteReact from "@vitejs/plugin-react";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // The proxy should be placed before server if you use Nitro
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -923,7 +919,82 @@ bun run build # Or bun run dev
 
 ---
 
-### Step 16: Configure TypeScript (Optional)
+### Step 16: Pre-render & Generate Sitemap (Optional)
+
+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.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+To use it, you first need to configure your `vite.config.ts` to enable pre-rendering for your localized routes and disable the default TanStack Start sitemap generation.
+
+```typescript fileName="vite.config.ts"
+import { localeFlatMap } from "intlayer";
+// ... other imports
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
+
+export default defineConfig({
+  plugins: [
+    // ... other plugins
+    tanstackStart({
+      // ... other config
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
+  ],
+});
+```
+
+Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:
+
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
+### Step 17: Configure TypeScript (Optional)
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
 

package/docs/en/intlayer_with_vite+lit.md

@@ -411,7 +411,6 @@ export class MyElement extends LitElement {
 }
 ```
 
-> [!NOTE]
 > When you need the translated string in a native HTML attribute (e.g. `alt`, `aria-label`, `title`), call `.value` on the leaf node:
 >
 > ```typescript

package/docs/en/intlayer_with_vite+solid.md

@@ -438,7 +438,6 @@ const App: Component = () => (
 export default App;
 ```
 
-> [!NOTE]
 > In Solid, `useIntlayer` returns an **accessor** function (e.g., `content()`). You must call this function to access the reactive content.
 
 > If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:

package/docs/en/intlayer_with_vite+svelte.md

@@ -230,7 +230,7 @@ module.exports = appContent;
 <!-- Render content as simple content  -->
 <h1>{$content.title}</h1>
 <!-- To render the content editable using the editor -->
-<h1><svelte:component this={$content.title} /></h1>
+<h1>{@const Title = $content.title}<Title /></h1>
 <!-- To render the content as a string -->
 <div aria-label={$content.title.value}></div>
 ```
@@ -270,7 +270,7 @@ const changeLocale = (event: Event) => {
 
 Intlayer supports rendering Markdown and HTML content in Svelte.
 
-By default, Intlayer treats Markdown and HTML as interactive components or strings. To render them in Svelte, you can use the `<svelte:component this={...} />` for components or `{@html ...}` for plain strings.
+By default, Intlayer treats Markdown and HTML as interactive components or strings. To render them in Svelte, you can use the `{@const Component = ...}<Component />` for components or `{@html ...}` for plain strings.
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -280,14 +280,13 @@ By default, Intlayer treats Markdown and HTML as interactive components or strin
 </script>
 
 <!-- Render Markdown as a Component -->
-<svelte:component this={$content.myMarkdownContent} />
+{@const MyMarkdownContent = $content.myMarkdownContent}<MyMarkdownContent />
 
 <!-- Render HTML Content -->
 {@html $content.myHtmlContent.toString()}
 
 <!-- Render with custom component overrides -->
-<svelte:component
-  this={$content.myMarkdownContent.use({
+{@const MyMarkdownContent = $content.myMarkdownContent.use({
     h1: (props) => {
       const h1 = document.createElement('h1');
       h1.style.color = 'red';
@@ -300,7 +299,7 @@ By default, Intlayer treats Markdown and HTML as interactive components or strin
        return div;
     }
   })}
-/>
+<MyMarkdownContent />
 ```
 
 > [!TIP]

package/docs/en-GB/intlayer_with_react_router_v7.md

@@ -174,10 +174,9 @@ Add the intlayer plugin into your configuration:
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
+  plugins: [reactRouter(), intlayer()],
 });
 ```
 
@@ -512,13 +511,12 @@ You can also use the `intlayerProxy` to add server-side routing to your applicat
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // should be placed first
     reactRouter(),
-    tsconfigPaths(),
+
     intlayer(),
   ],
 });

package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md

@@ -173,10 +173,9 @@ Add the intlayer plugin into your configuration:
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
+  plugins: [reactRouter(), intlayer()],
 });
 ```
 
@@ -457,13 +456,12 @@ You can also use the `intlayerProxy` to add server-side routing to your applicat
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // should be placed first
     reactRouter(),
-    tsconfigPaths(),
+
     intlayer(),
   ],
 });

package/docs/en-GB/intlayer_with_svelte_kit.md

@@ -370,7 +370,7 @@ prefix to access its reactive value (e.g., `$content.title`).
 <!-- Render content as simple content  -->
 <h1>{$content.title}</h1>
 <!-- To render the content editable using the editor -->
-<h1><svelte:component this={$content.title} /></h1>
+<h1>{@const Title = $content.title}<Title /></h1>
 <!-- To render the content as a string -->
 <div aria-label={$content.title.value}></div>
 ```
@@ -728,7 +728,7 @@ To be able to visualise the intlayer editor selector, you will have to use the c
   <h1>{$content.title}</h1>
 
   <!-- Render content as a component (required by the editor) -->
-  <svelte:component this={$content.component} />
+  {@const Component = $content.component}<Component />
 </div>
 ```
 

package/docs/en-GB/intlayer_with_tanstack+solid.md

@@ -140,16 +140,12 @@ Add the intlayer plugin in your configuration:
 import { intlayer } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [
     devtools(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
@@ -221,9 +217,6 @@ function RootComponent() {
 }
 ```
 
-> [!NOTE]
-> in Solid files, `useMatches` returns a **signal** (reactive accessor). Use `matches()` (with parentheses) to reactively access the current value.
-
 ### Step 6: Create the Locale Layout (Optional)
 
 Create a layout that handles the locale prefix and performs validation. This layout will ensure only valid locales are processed.
@@ -416,7 +409,6 @@ function RouteComponent() {
 }
 ```
 
-> [!NOTE]
 > in Solid, `useIntlayer` returns an **accessor** function (ex: `content()`). You must call this function to access the reactive content.
 >
 > To learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/solid-intlayer/useIntlayer.md).
@@ -461,7 +453,6 @@ export const LocaleSwitcher = () => {
 export default LocaleSwitcher;
 ```
 
-> [!NOTE]
 > in Solid files, `locale` from `useLocale` is a **signal accessor**. Use `locale()` (with parentheses) to reactively read its current value.
 >
 > To learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/solid-intlayer/useLocale.md).
@@ -503,15 +494,11 @@ import solid from "vite-plugin-solid";
 import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 import { intlayer, intlayerProxy } from "vite-intlayer";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
     intlayerProxy(), // The Proxy should be placed before the server if you use Nitro
     nitro(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     intlayer(),
     tanstackStart({
       router: {
@@ -804,16 +791,12 @@ Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
-import viteTsConfigPaths from "vite-tsconfig-paths";
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [
     devtools(),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json"],
-    }),
     tanstackStart({
       router: {
         routeFileIgnorePattern:
@@ -848,6 +831,79 @@ bun run build # Or bun run dev
 
 ---
 
+### Step 16: Generate Sitemap (Optional)
+
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localised routes and adds the necessary metadata for search engines.
+
+To use it, you first need to configure your `vite.config.ts` to enable pre-rendering for your localised routes and disable the default TanStack Start sitemap generation.
+
+```typescript fileName="vite.config.ts"
+import { localeMap, localeFlatMap } from "intlayer";
+// ... other imports
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
+
+export default defineConfig({
+  plugins: [
+    // ... other plugins
+    tanstackStart({
+      // ... other config
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
+  ],
+});
+```
+
+Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:
+
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/solid-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ### Step 17: Configure TypeScript (Optional)
 
 Intlayer uses module augmentation to get the benefits of TypeScript and make your codebase stronger.