@intlayer/docs 5.7.4 → 5.7.6-canary.0

package/docs/en-GB/packages/react-intlayer/useI18n.md

@@ -0,0 +1,254 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: useI18n Hook Documentation | react-intlayer
+description: Learn how to use the useI18n hook in the react-intlayer package
+keywords:
+  - useI18n
+  - i18n
+  - translation
+  - dictionary
+  - Intlayer
+  - internationalisation
+  - documentation
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useI18n
+---
+
+# React Integration: `useI18n` Hook Documentation
+
+This section provides detailed guidance on how to use the `useI18n` hook within React applications, enabling efficient content localisation.
+
+## Importing `useI18n` in React
+
+The `useI18n` hook can be imported and integrated into React applications according to the context as follows:
+
+- **Client Components:**
+
+  ```typescript codeFormat="typescript"
+  import { useI18n } from "react-intlayer"; // Use in client-side React components
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer"; // Use in client-side React components
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer"); // Use in client-side React components
+  ```
+
+- **Server Components:**
+
+  ```typescript codeFormat="commonjs"
+  import { useI18n } from "react-intlayer/server"; // Use in server-side React components
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer/server"; // Use in server-side React components
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer/server"); // Use in server-side React components
+  ```
+
+## Parameters
+
+This hook accepts two parameters:
+
+1. **`namespace`**: A dictionary namespace to scope the translation keys.
+2. **`locale`** (optional): The desired locale. If not specified, the context's locale will be used as default.
+
+## Dictionary
+
+All dictionary keys must be declared within content declaration files to enhance type safety and prevent errors. [Configuration instructions can be found here](https://github.com/aymericzip/intlayer/blob/main/docs/docs/{{locale}}/dictionary/get_started.md).
+
+## Usage Examples in React
+
+Examples of using the `useI18n` hook within React components:
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { useI18n, IntlayerServerProvider } from "react-intlayer/server";
+import { Locales } from "intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.jsx" codeFormat="esm"
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.cjs" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useI18n } from "react-intlayer";
+
+const ComponentExample: FC = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Display the title */}
+      <p>{t("description")}</p> {/* Display the description */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer";
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Display the title */}
+      <p>{t("description")}</p> {/* Display the description */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Display the title */}
+      <p>{t("description")}</p> {/* Display the description */}
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Display the title */}
+      <p>{t("description")}</p> {/* Display the description */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Display the title */}
+      <p>{t("description")}</p> {/* Display the description */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer/server");
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+```
+
+## Attribute Handling
+
+When localising attributes, access the translation values appropriately:
+
+```jsx
+<button title={t("buttonTitle.value")}>{t("buttonText")}</button>;
+
+{
+  /* For accessibility attributes (e.g., aria-label), use .value since pure strings are required */
+}
+<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>;
+```
+
+## Additional Resources
+
+- **Intlayer Visual Editor**: For a more intuitive content management experience, refer to the visual editor documentation [here](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md).
+
+This section specifically covers the integration of the `useI18n` hook in React applications, simplifying the localisation process and ensuring content consistency across different locales.
+
+## Documentation History
+
+- 6.0.0 - 29-06-2025: Initial writing of `useI18n` hook documentation

package/docs/es/configuration.md

@@ -268,10 +268,12 @@ Configuraciones que controlan el comportamiento del middleware, incluyendo cómo
 - **prefixDefault**:
 
   - _Tipo_: `boolean`
-  - _Por defecto_: `true`
+  - _Por defecto_: `false`
   - _Descripción_: Indica si se debe incluir la configuración regional predeterminada en la URL.
-  - _Ejemplo_: `false`
-  - _Nota_: Si es `false`, las URLs para la configuración regional predeterminada no tendrán un prefijo de configuración regional.
+  - _Ejemplo_: `true`
+  - _Nota_:
+    - Si `true` y `defaultLocale = 'en'`: path = `/en/dashboard` o `/fr/dashboard`
+    - Si `false` y `defaultLocale = 'en'`: path = `/dashboard` o `/fr/dashboard`
 
 - **basePath**:
 
@@ -279,7 +281,11 @@ Configuraciones que controlan el comportamiento del middleware, incluyendo cómo
   - _Por defecto_: `''`
   - _Descripción_: La ruta base para las URLs de la aplicación.
   - _Ejemplo_: `'/my-app'`
-  - _Nota_: Esto afecta cómo se construyen las URLs para la aplicación.
+  - _Nota_:
+    - Si la aplicación está alojada en `https://example.com/my-app`
+    - La ruta base es `'/my-app'`
+    - La URL será `https://example.com/my-app/en`
+    - Si la ruta base no está configurada, la URL será `https://example.com/en`
 
 - **serverSetCookie**:
 
@@ -291,11 +297,42 @@ Configuraciones que controlan el comportamiento del middleware, incluyendo cómo
   - _Nota_: Controla si la cookie de configuración regional se establece en cada solicitud o nunca.
 
 - **noPrefix**:
+
   - _Tipo_: `boolean`
   - _Por defecto_: `false`
   - _Descripción_: Indica si se debe omitir el prefijo de configuración regional en las URLs.
   - _Ejemplo_: `true`
-  - _Nota_: Si es `true`, las URLs no contendrán información de configuración regional.
+  - _Nota_:
+    - Si `true`: Sin prefijo en la URL
+    - Si `false`: Prefijo en la URL
+    - Ejemplo con `basePath = '/my-app'`:
+      - Si `noPrefix = false`: La URL será `https://example.com/my-app/en`
+      - Si `noPrefix = true`: La URL será `https://example.com`
+
+- **detectLocaleOnPrefetchNoPrefix**:
+
+  - _Tipo_: `boolean`
+  - _Por defecto_: `false`
+  - _Descripción_: Controla si la detección de configuración regional ocurre durante las solicitudes de precarga de Next.js.
+  - _Ejemplo_: `true`
+  - _Nota_: Esta configuración afecta cómo Next.js maneja la precarga de configuración regional:
+    - **Escenario de ejemplo:**
+      - El idioma del navegador del usuario es `'fr'`
+      - La página actual es `/fr/about`
+      - El enlace precarga `/about`
+    - **Con `detectLocaleOnPrefetchNoPrefix: true`:**
+      - La precarga detecta la configuración regional `'fr'` desde el navegador
+      - Redirige la precarga a `/fr/about`
+    - **Con `detectLocaleOnPrefetchNoPrefix: false` (por defecto):**
+      - La precarga usa la configuración regional predeterminada
+      - Redirige la precarga a `/en/about` (asumiendo que `'en'` es la predeterminada)
+    - **Cuándo usar `true`:**
+      - Tu aplicación usa enlaces internos no localizados (ej. `<a href="/about">`)
+      - Quieres comportamiento consistente de detección de configuración regional entre solicitudes normales y de precarga
+    - **Cuándo usar `false` (por defecto):**
+      - Tu aplicación usa enlaces con prefijo de configuración regional (ej. `<a href="/fr/about">`)
+      - Quieres optimizar el rendimiento de precarga
+      - Quieres evitar bucles de redirección potenciales
 
 ---
 

package/docs/es/dictionary/enumeration.md

@@ -15,8 +15,7 @@ slugs:
   - doc
   - concept
   - content
-  - es
-  - enumaration
+  - enumeration
 ---
 
 # Enumeración / Plurialización

package/docs/es/dictionary/gender.md

@@ -13,9 +13,9 @@ keywords:
   - React
 slugs:
   - doc
-  - concepto
-  - contenido
-  - genero
+  - concept
+  - content
+  - gender
 ---
 
 # Contenido Basado en Género / Género en Intlayer

package/docs/es/locale_mapper.md

@@ -11,7 +11,7 @@ keywords:
   - Paquetes
 slugs:
   - doc
-  - mapeador-locales
+  - locale-mapper
 ---
 
 # Mapeador de Locales

package/docs/es/packages/react-intlayer/useI18n.md

@@ -0,0 +1,250 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: Documentación del Hook useI18n | react-intlayer
+description: Aprende cómo usar el hook useI18n en el paquete react-intlayer
+keywords:
+  - useI18n
+  - i18n
+  - traducción
+  - diccionario
+  - Intlayer
+  - internacionalización
+  - documentación
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useI18n
+---
+
+# Integración en React: Documentación del Hook `useI18n`
+
+Esta sección proporciona una guía detallada sobre cómo usar el hook `useI18n` dentro de aplicaciones React, permitiendo una localización eficiente del contenido.
+
+## Importando `useI18n` en React
+
+El hook `useI18n` puede ser importado e integrado en aplicaciones React según el contexto de la siguiente manera:
+
+- **Componentes Cliente:**
+
+  ```typescript codeFormat="typescript"
+  import { useI18n } from "react-intlayer"; // Usar en componentes React del lado del cliente
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer"; // Usar en componentes React del lado del cliente
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer"); // Usar en componentes React del lado del cliente
+  ```
+
+- **Componentes Servidor:**
+
+  ```typescript codeFormat="commonjs"
+  import { useI18n } from "react-intlayer/server"; // Usar en componentes React del lado del servidor
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer/server"; // Usar en componentes React del lado del servidor
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer/server"); // Usar en componentes React del lado del servidor
+  ```
+
+## Parámetros
+
+Este hook acepta dos parámetros:
+
+1. **`namespace`**: Un espacio de nombres del diccionario para delimitar las claves de traducción.
+2. **`locale`** (opcional): La configuración regional deseada. Si no se especifica, se usará la configuración regional del contexto por defecto.
+
+## Diccionario
+
+Todas las claves del diccionario deben declararse dentro de archivos de declaración de contenido para mejorar la seguridad de tipos y prevenir errores. [Las instrucciones de configuración se pueden encontrar aquí](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/get_started.md).
+
+## Ejemplos de uso en React
+
+Ejemplos de uso del hook `useI18n` dentro de componentes React:
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { useI18n, IntlayerServerProvider } from "react-intlayer/server";
+import { Locales } from "intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.jsx" codeFormat="esm"
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.cjs" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useI18n } from "react-intlayer";
+
+const ComponentExample: FC = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostrar el título */}
+      <p>{t("description")}</p> {/* Mostrar la descripción */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer";
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostrar el título */}
+      <p>{t("description")}</p> {/* Mostrar la descripción */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostrar el título */}
+      <p>{t("description")}</p> {/* Mostrar la descripción */}
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostrar el título */}
+      <p>{t("description")}</p> {/* Mostrar la descripción */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostrar el título */}
+      <p>{t("description")}</p> {/* Mostrar la descripción */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer/server");
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+```
+
+## Manejo de Atributos
+
+Al localizar atributos, accede a los valores de traducción de manera adecuada:
+
+```jsx
+<!-- Para atributos de accesibilidad (por ejemplo, aria-label), usa .value ya que se requieren cadenas puras -->
+<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
+```
+
+## Recursos Adicionales
+
+- **Editor Visual de Intlayer**: Para una experiencia de gestión de contenido más intuitiva, consulta la documentación del editor visual [aquí](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md).
+
+Esta sección cubre específicamente la integración del hook `useI18n` en aplicaciones React, simplificando el proceso de localización y asegurando la consistencia del contenido a través de diferentes locales.
+
+## Historial de la Documentación
+
+- 6.0.0 - 2025-06-29: Escritura inicial de la documentación del hook `useI18n`

package/docs/fr/configuration.md

@@ -268,10 +268,12 @@ Paramètres qui contrôlent le comportement du middleware, y compris la gestion
 - **prefixDefault** :
 
   - _Type_ : `boolean`
-  - _Par défaut_ : `true`
-  - _Description_ : Indique s’il faut inclure la langue par défaut dans l’URL.
-  - _Exemple_ : `false`
-  - _Remarque_ : Si `false`, les URL pour la langue par défaut n'auront pas de préfixe de langue.
+  - _Par défaut_ : `false`
+  - _Description_ : Indique s'il faut inclure la langue par défaut dans l'URL.
+  - _Exemple_ : `true`
+  - _Remarque_ :
+    - Si `true` et `defaultLocale = 'en'` : path = `/en/dashboard` ou `/fr/dashboard`
+    - Si `false` et `defaultLocale = 'en'` : path = `/dashboard` ou `/fr/dashboard`
 
 - **basePath** :
 
@@ -279,7 +281,11 @@ Paramètres qui contrôlent le comportement du middleware, y compris la gestion
   - _Par défaut_ : `''`
   - _Description_ : Le chemin de base pour les URL de l'application.
   - _Exemple_ : `'/my-app'`
-  - _Remarque_ : Cela affecte la manière dont les URL sont construites pour l'application.
+  - _Remarque_ :
+    - Si l'application est hébergée sur `https://example.com/my-app`
+    - Le chemin de base est `'/my-app'`
+    - L'URL sera `https://example.com/my-app/en`
+    - Si le chemin de base n'est pas défini, l'URL sera `https://example.com/en`
 
 - **serverSetCookie** :
 
@@ -291,11 +297,42 @@ Paramètres qui contrôlent le comportement du middleware, y compris la gestion
   - _Remarque_ : Contrôle si le cookie de langue est défini à chaque requête ou jamais.
 
 - **noPrefix** :
+
+  - _Type_ : `boolean`
+  - _Par défaut_ : `false`
+  - _Description_ : Indique s'il faut omettre le préfixe de langue dans les URL.
+  - _Exemple_ : `true`
+  - _Remarque_ :
+    - Si `true` : Pas de préfixe dans l'URL
+    - Si `false` : Préfixe dans l'URL
+    - Exemple avec `basePath = '/my-app'` :
+      - Si `noPrefix = false` : L'URL sera `https://example.com/my-app/en`
+      - Si `noPrefix = true` : L'URL sera `https://example.com`
+
+- **detectLocaleOnPrefetchNoPrefix** :
+
   - _Type_ : `boolean`
   - _Par défaut_ : `false`
-  - _Description_ : Indique s’il faut omettre le préfixe de langue dans les URL.
+  - _Description_ : Contrôle si la détection de langue se produit lors des requêtes de préchargement Next.js.
   - _Exemple_ : `true`
-  - _Remarque_ : Si `true`, les URLs ne contiendront pas d'information de langue.
+  - _Remarque_ : Ce paramètre affecte la façon dont Next.js gère le préchargement de langue :
+    - **Scénario d'exemple :**
+      - La langue du navigateur de l'utilisateur est `'fr'`
+      - La page actuelle est `/fr/about`
+      - Le lien précharge `/about`
+    - **Avec `detectLocaleOnPrefetchNoPrefix: true` :**
+      - Le préchargement détecte la langue `'fr'` depuis le navigateur
+      - Redirige le préchargement vers `/fr/about`
+    - **Avec `detectLocaleOnPrefetchNoPrefix: false` (par défaut) :**
+      - Le préchargement utilise la langue par défaut
+      - Redirige le préchargement vers `/en/about` (en supposant que `'en'` est la langue par défaut)
+    - **Quand utiliser `true` :**
+      - Votre application utilise des liens internes non localisés (ex. `<a href="/about">`)
+      - Vous voulez un comportement de détection de langue cohérent entre les requêtes normales et de préchargement
+    - **Quand utiliser `false` (par défaut) :**
+      - Votre application utilise des liens avec préfixe de langue (ex. `<a href="/fr/about">`)
+      - Vous voulez optimiser les performances de préchargement
+      - Vous voulez éviter les boucles de redirection potentielles
 
 ---
 

package/docs/fr/intlayer_with_nextjs_15.md

@@ -13,7 +13,6 @@ keywords:
 slugs:
   - doc
   - environment
-  - fr
   - nextjs
 applicationTemplate: https://github.com/aymericzip/intlayer-next-15-template
 youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU