@intlayer/docs 7.0.7 → 7.0.8-canary.0

package/{blog/en/_intlayer_with_next-i18next.md → docs/en-GB/intlayer_with_next-i18next.md}

@@ -1,3 +1,64 @@
+---
+createdAt: 2025-10-05
+updatedAt: 2025-10-05
+title: How to translate your Next.js 15 using next-i18next – i18n guide 2025
+description: A practical, production-ready guide to internationalise a Next.js 15 App Router app with i18next/next-i18next and enhance it with Intlayer.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Next.js 15
+  - next-i18next
+  - i18next
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - next-i18next
+applicationTemplate: https://github.com/aymericzip/intlayer-next-i18next-template
+---
+
+# Translate your Next.js 15 using next-i18next website using Intlayer | Internationalisation (i18n)
+
+### Who this guide is for
+
+- **Junior**: Follow the exact steps and copy the code blocks. You’ll get a working multilingual app.
+- **Mid-level**: Use the checklists and best-practice callouts to avoid common pitfalls.
+- **Senior**: Skim the high-level structure, SEO, and automation sections; you’ll find sensible defaults and extension points.
+
+### What you’ll build
+
+- App Router project with localised routes (e.g., `/`, `/fr/...`)
+- i18n config with locales, default locale, RTL support
+- Server-side i18n initialisation and a client provider
+- Namespaced translations loaded on-demand
+- SEO with `hreflang`, localised `sitemap`, `robots`
+- Middleware for locale routing
+- Intlayer integration to automate translation workflows (tests, AI fill, JSON sync)
+
+> Note: next-i18next is built on top of i18next. This guide uses the i18next primitives compatible with next-i18next in the App Router, while keeping the architecture simple and production-ready.
+> For a broader comparison, see [next-i18next vs next-i18next vs Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/{{locale}}/next-i18next_vs_next-i18next_vs_intlayer.md).
+
+---
+
+## 1) Project structure
+
+Install the next-i18next dependencies:
+
+```bash packageManager="npm"
+npm install next-i18next i18next react-i18next i18next-resources-to-backend
+```
+
+```bash packageManager="pnpm"
+pnpm add next-i18next i18next react-i18next i18next-resources-to-backend
+```
+
+```bash packageManager="yarn"
+yarn add next-i18next i18next react-i18next i18next-resources-to-backend
+```
+
+Start with a clear structure. Keep messages split by locale and namespace.
+
 ```bash
 .
 ├── i18n.config.ts
@@ -21,6 +82,32 @@
         └── ServerComponent.tsx
 ```
 
+Checklist (mid/senior):
+
+- Keep one JSON per namespace per locale
+- Do not over-centralise messages; use small, page/feature-scoped namespaces
+- Avoid importing all locales at once; load only what you need
+
+---
+
+## 2) Install dependencies
+
+```bash
+pnpm add i18next react-i18next i18next-resources-to-backend
+```
+
+If you plan to use next-i18next APIs or config interop, also:
+
+```bash
+pnpm add next-i18next
+```
+
+---
+
+## 3) Core i18n config
+
+Define locales, default locale, RTL, and helpers for localised paths/URLs.
+
 ```ts fileName="i18n.config.ts"
 export const locales = ["en", "fr"] as const;
 export type Locale = (typeof locales)[number];
@@ -41,6 +128,14 @@ export function abs(locale: string, path: string) {
 }
 ```
 
+Senior note: If you use `next-i18next.config.js`, keep it aligned with `i18n.config.ts` to avoid divergence.
+
+---
+
+## 4) Server-side i18n initialization
+
+Initialise i18next on the server with a dynamic backend that imports only the required locale/namespace JSON.
+
 ```ts fileName="src/app/i18n/server.ts"
 import { createInstance } from "i18next";
 import { initReactI18next } from "react-i18next/initReactI18next";
@@ -73,6 +168,14 @@ export async function initI18next(
 }
 ```
 
+Mid note: Keep the namespace list short per page to limit payload. Avoid global “catch-all” bundles.
+
+---
+
+## 5) Client provider for React components
+
+Wrap client components with a provider that mirrors the server config and loads only the requested namespaces.
+
 ```tsx fileName="src/components/I18nProvider.tsx"
 "use client";
 
@@ -123,6 +226,14 @@ export default function I18nProvider({
 }
 ```
 
+Junior tip: You don’t need to pass all messages to the client. Start with the page’s namespaces only.
+
+---
+
+## 6) Localised layout and routes
+
+Set language and direction, and pre-generate routes per locale to favour static rendering.
+
 ```tsx fileName="src/app/[locale]/layout.tsx"
 import type { ReactNode } from "react";
 import { locales, defaultLocale, isRtl, type Locale } from "@/i18n.config";
@@ -154,6 +265,10 @@ export default function LocaleLayout({
 }
 ```
 
+---
+
+## 7) Example page with server + client usage
+
 ```tsx fileName="src/app/[locale]/about.tsx"
 import I18nProvider from "@/components/I18nProvider";
 import { initI18next } from "@/app/i18n/server";
@@ -161,6 +276,9 @@ import type { Locale } from "@/i18n.config";
 import ClientComponent from "@/components/ClientComponent";
 import ServerComponent from "@/components/ServerComponent";
 
+// Force static rendering for the page
+export const dynamic = "force-static";
+
 export default async function AboutPage({
   params: { locale },
 }: {
@@ -184,7 +302,7 @@ export default async function AboutPage({
 }
 ```
 
-**Translations (one JSON per namespace under `src/locales/...`)**
+Translations (one JSON per namespace under `src/locales/...`):
 
 ```json fileName="src/locales/en/about.json"
 {
@@ -202,13 +320,13 @@ export default async function AboutPage({
   "title": "À propos",
   "description": "Description de la page À propos",
   "counter": {
-    "label": "Compteur",
-    "increment": "Incrémenter"
+    "label": "Counter",
+    "increment": "Increment"
   }
 }
 ```
 
-**Client component (loads only the required namespace)**
+Client component (loads only the required namespace):
 
 ```tsx fileName="src/components/ClientComponent.tsx"
 "use client";
@@ -238,14 +356,10 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-> Ensure the page/provider includes only the namespaces you need (e.g. `about`).
-> If you use React < 19, memoize heavy formatters like `Intl.NumberFormat`.
-
----
-
-### Usage in a sync server component
+> Ensure the page/provider includes only the namespaces you need (e.g., `about`).
+> If you use React < 19, memoise heavy formatters like `Intl.NumberFormat`.
 
-This server component can be inserted under a client component. Because it might be nested under a client boundary, it should be synchronous. Compute translations and locale-dependent formatting in the parent (or pass the `t` function) and provide data via props.
+Synchronous server component embedded under a client boundary:
 
 ```tsx fileName="src/components/ServerComponent.tsx"
 type ServerComponentProps = {
@@ -268,38 +382,18 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
-### Metadata / Sitemap / Robots
-
-Translating content is great. But people usually forget that the main goal of internationalization is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility.
+---
 
-Here's a list of good practices regarding multilingual SEO.
+## 8) SEO: Metadata, Hreflang, Sitemap, Robots
 
-- set hreflang meta tags in the `<head>` tag
-  > It helps search engines to understand what languages are available on the page
-- list all pages translations in the sitemap.xml using `http://www.w3.org/1999/xhtml` XML schema
-  >
-- do not forget to exclude prefixed pages from the robots.txt (e.g. `/dashboard`, and `/fr/dashboard`, `/es/dashboard`)
-  >
-- use custom Link component to redirect to the most localized page (e.g. in french `<a href="/fr/about">A propos</a>` )
-  >
+Translating content is a means to improve reach. Wire up multilingual SEO thoroughly.
 
-Developers often forget to properly reference their pages across locales.
+Best practices:
 
-```ts fileName="i18n.config.ts"
-export const locales = ["en", "fr"] as const;
-export type Locale = (typeof locales)[number];
-export const defaultLocale: Locale = "en";
-export const rtlLocales = ["ar", "he", "fa", "ur"] as const;
-export const isRtl = (locale: string) =>
-  (rtlLocales as readonly string[]).includes(locale);
-export function localizedPath(locale: string, path: string) {
-  return locale === defaultLocale ? path : "/" + locale + path;
-}
-const ORIGIN = "https://example.com";
-export function abs(locale: string, path: string) {
-  return ORIGIN + localizedPath(locale, path);
-}
-```
+- Set `lang` and `dir` at the root
+- Add `alternates.languages` for each locale (+ `x-default`)
+- List translated URLs in `sitemap.xml` and use `hreflang`
+- Exclude localised private areas (e.g., `/fr/admin`) in `robots.txt`
 
 ```tsx fileName="src/app/[locale]/about/layout.tsx"
 import type { Metadata } from "next";
@@ -385,9 +479,9 @@ export default function robots(): MetadataRoute.Robots {
 
 ---
 
-### Middleware for locale routing
+## 9) Middleware for locale routing
 
-Add a middleware to handle locale detection and routing:
+Detect locale and redirect to a localised route if missing.
 
 ```ts fileName="src/middleware.ts"
 import { NextResponse, type NextRequest } from "next/server";
@@ -421,8 +515,113 @@ export function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    // Match all paths except the ones starting with these and files with an extension
+    // Match all paths except those starting with these and files with an extension
     "/((?!api|_next|static|.*\\..*).*)",
   ],
 };
 ```
+
+---
+
+## 10) Performance and DX best practices
+
+- **Set html `lang` and `dir`**: Done in `src/app/[locale]/layout.tsx`.
+- **Split messages by namespace**: Keep bundles small (`common.json`, `about.json`, etc.).
+- **Minimise client payload**: On pages, pass only required namespaces to the provider.
+- **Prefer static pages**: Use `export const dynamic = 'force-static'` and `generateStaticParams` per locale.
+- **Sync server components**: Pass precomputed strings/formatting instead of async calls at render time.
+- **Memoise heavy operations**: Especially in client code for older React versions.
+- **Cache and headers**: Prefer static or `revalidate` over dynamic rendering when feasible.
+
+---
+
+## 11) Testing and CI
+
+- Add unit tests for components using `t` to ensure keys exist.
+- Validate that each namespace has the same keys across locales.
+- Surface missing keys during CI before deployment.
+
+Intlayer will automate much of this (see next section).
+
+---
+
+## 12) Add Intlayer on top (automation)
+
+Intlayer helps you keep JSON translations in sync, test for missing keys, and fill with AI when desired.
+
+Install the intlayer dependencies:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin  -D
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin  -D
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin  -D
+```
+
+```ts fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+import { locales, defaultLocale } from "@/i18n";
+import { syncJSON } from "@intlayer/sync-json";
+
+export const locales = [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH];
+
+const config: IntlayerConfig = {
+  internationalisation: {
+    locales,
+    defaultLocale,
+  },
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+  },
+  plugins: [
+    syncJSON({
+      source: ({ locale }) => `./locales/${locale}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Add package scripts:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "i18n:fill": "intlayer fill",
+    "i18n:test": "intlayer test"
+  }
+}
+```
+
+Common flows:
+
+- `pnpm i18n:test` in CI to fail builds on missing keys
+- `pnpm i18n:fill` locally to propose AI translations for newly added keys
+
+> You can provide CLI arguments; see the [Intlayer CLI docs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md).
+
+---
+
+## 13) Troubleshooting
+
+- **Keys not found**: Ensure the page/provider lists the correct namespaces and the JSON file exists under `src/locales/<locale>/<namespace>.json`.
+- **Wrong language/flash of English**: Double-check locale detection in `middleware.ts` and provider `lng`.
+- **RTL layout issues**: Verify `dir` is derived from `isRtl(locale)` and that your CSS respects `[dir="rtl"]`.
+- **SEO alternates missing**: Confirm `alternates.languages` includes all locales and `x-default`.
+- **Bundles too large**: Split namespaces further and avoid importing entire `locales` trees on the client.
+
+---
+
+## 14) What’s next
+
+- Add more locales and namespaces as features grow
+- Localise error pages, emails, and API-driven content
+- Extend Intlayer workflows to auto-open PRs for translation updates
+
+If you prefer a starter, try the template: `https://github.com/aymericzip/intlayer-next-i18next-template`.

package/{blog/en/_intlayer_with_next-intl.md → docs/en-GB/intlayer_with_next-intl.md}

@@ -1,3 +1,57 @@
+---
+createdAt: 2025-10-05
+updatedAt: 2025-10-05
+title: How to translate your Next.js 15 using next-intl – i18n guide 2025
+description: Discover how to make your Next.js 15 App Router website multilingual. Follow the documentation to internationalise (i18n) and translate it.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Next.js 15
+  - next-intl
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - next-intl
+applicationTemplate: https://github.com/aymericzip/intlayer-next-intl-template
+---
+
+# Translate your Next.js 15 using next-intl website using Intlayer | Internationalisation (i18n)
+
+This guide walks you through next-intl best practices in a Next.js 15 (App Router) app, and shows how to layer Intlayer on top for robust translation management and automation.
+
+See the comparison in [next-i18next vs next-intl vs Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/{{locale}}/next-i18next_vs_next-intl_vs_intlayer.md).
+
+- For juniors: follow step-by-step sections to obtain a working multilingual app.
+- For mid-level developers: pay attention to payload optimisation and server/client separation.
+- For seniors: note static generation, middleware, SEO integration, and automation hooks.
+
+What we’ll cover:
+
+- Setup and file structure
+- Optimising how messages are loaded
+- Client and server component usage
+- Metadata, sitemap, robots for SEO
+- Middleware for locale routing
+- Adding Intlayer on top (CLI and automation)
+
+## Set up your application using next-intl
+
+Install the next-intl dependencies:
+
+```bash packageManager="npm"
+npm install next-intl
+```
+
+```bash packageManager="pnpm"
+pnpm add next-intl
+```
+
+```bash packageManager="yarn"
+yarn add next-intl
+```
+
 ```bash
 .
 ├── locales
@@ -25,8 +79,7 @@
 
 #### Setup and Loading Content
 
-As mentioned previously, you must optimize how each JSON file is imported into your code.
-How the library handles content loading is important.
+Load only the namespaces your routes require and validate locales early. Keep server components synchronous where possible and send only the required messages to the client.
 
 ```tsx fileName="src/i18n.ts"
 import { getRequestConfig } from "next-intl/server";
@@ -36,7 +89,7 @@ export const locales = ["en", "fr", "es"] as const;
 export const defaultLocale = "en" as const;
 
 async function loadMessages(locale: string) {
-  // Load only the namespaces your layout/pages need
+  // Load only the namespaces your layout/pages require
   const [common, about] = await Promise.all([
     import(`../locales/${locale}/common.json`).then((m) => m.default),
     import(`../locales/${locale}/about.json`).then((m) => m.default),
@@ -62,18 +115,20 @@ import {
   unstable_setRequestLocale,
 } from "next-intl/server";
 
+export const dynamic = "force-static";
+
 export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }
 
-export default function LocaleLayout({
+export default async function LocaleLayout({
   children,
   params,
 }: {
   children: ReactNode;
-  params: Promise<{ locale: string }>;
+  params: { locale: string };
 }) {
-  const { locale } = await params;
+  const { locale } = params;
 
   // Set the active request locale for this server render (RSC)
   unstable_setRequestLocale(locale);
@@ -95,14 +150,16 @@ import pick from "lodash/pick";
 import ServerComponent from "@/components/ServerComponent";
 import ClientComponentExample from "@/components/ClientComponentExample";
 
+export const dynamic = "force-static";
+
 export default async function AboutPage({
   params,
 }: {
-  params: Promise<{ locale: string }>;
+  params: { locale: string };
 }) {
-  const { locale } = await params;
+  const { locale } = params;
 
-  // Messages are loaded server-side. Push only what's needed to the client.
+  // Messages are loaded server-side. Push only what is needed to the client.
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
@@ -181,39 +238,38 @@ const ClientComponentExample = () => {
 };
 ```
 
-> Don't forget to add "about" message on the page client message
+> Don't forget to add the "about" message to the page client messages
 > (only include the namespaces your client actually needs).
 
 ### Usage in a server component
 
-We will take the case of a UI component. This component is a server component, and should be able to be inserted as a child of a client component. (page (server component) -> client component -> server component). As this component can be inserted as a child of a client component, it cannot be async.
+This UI component is a server component and can be rendered beneath a client component (page → client → server). Keep it synchronous by passing precomputed strings.
 
 ```tsx fileName="src/components/ServerComponent.tsx"
 type ServerComponentProps = {
-  count: number;
-  t: (key: string) => string;
-  formatter: Intl.NumberFormat;
+  formattedCount: string;
+  label: string;
+  increment: string;
 };
 
-const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
-  const formatted = formatter.format(count);
-
+const ServerComponent = ({
+  formattedCount,
+  label,
+  increment,
+}: ServerComponentProps) => {
   return (
     <div>
-      <p>{formatted}</p>
-      <button aria-label={t("label")}>{t("increment")}</button>
+      <p>{formattedCount}</p>
+      <button aria-label={label}>{increment}</button>
     </div>
   );
 };
 ```
 
-> As the server component cannot be async, you need to pass the translations and formatter function as props.
->
-> In your page / layout:
->
-> - `import { getTranslations, getFormatter } from "next-intl/server";`
-> - `const t = await getTranslations("about.counter");`
-> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
+Notes:
+
+- Compute `formattedCount` server-side (e.g., `const initialFormattedCount = format.number(0)`).
+- Avoid passing functions or non-serialisable objects into server components.
 
 ```tsx fileName="src/app/[locale]/about/layout.tsx"
 import type { Metadata } from "next";
@@ -325,7 +381,66 @@ export const config = {
 ### Best practices
 
 - **Set html `lang` and `dir`**: In `src/app/[locale]/layout.tsx`, compute `dir` via `getLocaleDirection(locale)` and set `<html lang={locale} dir={dir}>`.
-- **Split messages by namespace**: Organize JSON per locale and namespace (e.g., `common.json`, `about.json`).
-- **Minimize client payload**: On pages, send only required namespaces to `NextIntlClientProvider` (e.g., `pick(messages, ['common', 'about'])`).
+- **Split messages by namespace**: Organise JSON per locale and namespace (e.g., `common.json`, `about.json`).
+- **Minimise client payload**: On pages, send only required namespaces to `NextIntlClientProvider` (e.g., `pick(messages, ['common', 'about'])`).
 - **Prefer static pages**: Export `export const dynamic = 'force-static'` and generate static params for all `locales`.
-- **Synchronous server components**: Keep server components sync by passing precomputed strings (translated labels, formatted numbers) rather than async calls or non-serializable functions.
+- **Synchronous server components**: Pass precomputed strings (translated labels, formatted numbers) rather than async calls or non-serialisable functions.
+
+## Implement Intlayer on top of next-intl
+
+Install the intlayer dependencies:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin  -D
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin  -D
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin  -D
+```
+
+Create the intlayer configuration file:
+
+```tsx fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    apiKey: process.env.OPENAI_API_KEY,
+  },
+  plugins: [
+    // Keep your per-namespace folder structure in sync with Intlayer
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Add `package.json` scripts:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "i18n:fill": "intlayer fill",
+    "i18n:test": "intlayer test"
+  }
+}
+```
+
+Notes:
+
+- `intlayer fill`: uses your AI provider to fill missing translations based on your configured locales.
+- `intlayer test`: checks for missing or invalid translations (use it in CI).
+
+You can configure arguments and providers; see [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md).

package/docs/en-GB/intlayer_with_nextjs_16.md

@@ -24,10 +24,31 @@ history:
 
 # Translate your Next.js 16 website using Intlayer | Internationalisation (i18n)
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
 <iframe title="The best i18n solution for Next.js? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-next-16-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
 See [Application Template](https://github.com/aymericzip/intlayer-next-16-template) on GitHub.
 
+## Table of Contents
+
+<TOC/>
+
 ## What is Intlayer?
 
 **Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications. Intlayer seamlessly integrates with the latest **Next.js 16** framework, including its powerful **App Router**. It is optimised to work with **Server Components** for efficient rendering and is fully compatible with [**Turbopack**](https://nextjs.org/docs/architecture/turbopack).

package/docs/en-GB/intlayer_with_tanstack.md

@@ -26,7 +26,11 @@ history:
     changes: Added for Tanstack Start
 ---
 
-# Getting Started Internationalising (i18n) with Intlayer and Tanstack Start
+# Translate your Tanstack Start website using Intlayer | Internationalisation (i18n)
+
+## Table of Contents
+
+<TOC/>
 
 This guide demonstrates how to integrate **Intlayer** for seamless internationalisation in Tanstack Start projects with locale-aware routing, TypeScript support, and modern development practices.
 

package/docs/en-GB/intlayer_with_vite+react.md

@@ -25,6 +25,10 @@ history:
 
 # Getting Started Internationalising (i18n) with Intlayer and Vite and React
 
+## Table of Contents
+
+<TOC/>
+
 <iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
 See [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) on GitHub.