@intlayer/docs 5.5.11 → 5.6.0

package/docs/es/intlayer_with_vite+react.md

@@ -1,36 +1,39 @@
 ---
-createdAt: 2025-03-07
-updatedAt: 2025-06-29
-title: Traduce tu aplicación móvil React Native y Expo (i18n)
-description: Descubre cómo hacer que tu aplicación móvil React Native y Expo sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducirla.
+createdAt: 2024-03-07
+updatedAt: 2024-03-07
+title: Comenzando con Intlayer en Vite + React
+description: Aprende cómo agregar internacionalización (i18n) a tu aplicación Vite y React usando Intlayer. Sigue esta guía para hacer tu aplicación multilingüe.
 keywords:
   - Internacionalización
   - Documentación
   - Intlayer
   - Vite
   - React
-  - React Native
+  - i18n
   - JavaScript
 slugs:
   - doc
   - environment
-  - react-native-and-expo
----
+  - vite-and-react
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4---
+
+# Comenzando con la internacionalización (i18n) usando Intlayer en Vite y React
 
-# Comenzando con la internacionalización (i18n) usando Intlayer, Vite y React
+<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"/>
 
 Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-vite-react-template) en GitHub.
 
 ## ¿Qué es Intlayer?
 
-**Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+**Intlayer** es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
 
 Con Intlayer, puedes:
 
-- **Gestionar traducciones fácilmente** usando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Garantizar soporte para TypeScript** con tipos autogenerados, mejorando la autocompletación y la detección de errores.
-- **Beneficiarte de funciones avanzadas**, como la detección y el cambio dinámico de locales.
+- **Gestiona fácilmente las traducciones** usando diccionarios declarativos a nivel de componente.
+- **Localiza dinámicamente metadatos**, rutas y contenido.
+- **Asegura soporte para TypeScript** con tipos autogenerados, mejorando la autocompletación y la detección de errores.
+- **Benefíciate de funciones avanzadas**, como la detección y el cambio dinámico de idioma.
 
 ---
 
@@ -42,28 +45,28 @@ Instala los paquetes necesarios usando npm:
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
-npm install --save-dev vite-intlayer
+npm install vite-intlayer --save-dev
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
-pnpm add --save-dev vite-intlayer
+pnpm add vite-intlayer --save-dev
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
-yarn add --save-dev vite-intlayer
+yarn add vite-intlayer --save-dev
 ```
 
 - **intlayer**
 
-  El paquete principal que proporciona herramientas de internacionalización para la gestión de configuración, traducción, [declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/get_started.md), transpiliación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_cli.md).
+  El paquete principal que proporciona herramientas de internacionalización para la gestión de configuración, traducción, [declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/get_started.md), transpile y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_cli.md).
 
 - **react-intlayer**
   El paquete que integra Intlayer con aplicaciones React. Proporciona proveedores de contexto y hooks para la internacionalización en React.
 
 - **vite-intlayer**
-  Incluye el plugin de Vite para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como middleware para detectar la configuración regional preferida del usuario, gestionar cookies y manejar la redirección de URL.
+  Incluye el plugin de Vite para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
 
 ### Paso 2: Configuración de tu proyecto
 
@@ -91,14 +94,13 @@ export default config;
 import { Locales } from "intlayer";
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Configuración de Intlayer para internacionalización
 const config = {
   internationalization: {
     locales: [
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Tus otros locales
+      // Tus otros idiomas
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -111,14 +113,13 @@ export default config;
 const { Locales } = require("intlayer");
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Configuración de Intlayer para internacionalización
 const config = {
   internationalization: {
     locales: [
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Tus otros locales
+      // Tus otros idiomas
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -127,11 +128,11 @@ const config = {
 module.exports = config;
 ```
 
-> A través de este archivo de configuración, puedes configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, deshabilitar los logs de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
+> A través de este archivo de configuración, puedes configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los registros de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
 ### Paso 3: Integra Intlayer en tu configuración de Vite
 
-Agrega el plugin de intlayer en tu configuración.
+Agrega el plugin intlayer en tu configuración.
 
 ```typescript fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -166,7 +167,7 @@ module.exports = defineConfig({
 });
 ```
 
-> El plugin `intlayerPlugin()` para Vite se utiliza para integrar Intlayer con Vite. Asegura la construcción de archivos de declaración de contenido y los supervisa en modo de desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
+> El plugin `intlayerPlugin()` de Vite se utiliza para integrar Intlayer con Vite. Garantiza la construcción de archivos de declaración de contenido y los supervisa en modo de desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
 ### Paso 4: Declara Tu Contenido
 
@@ -361,7 +362,7 @@ module.exports = appContent;
     "reactLogo": {
       "nodeType": "translation",
       "translation": {
-        "en": "React logo",
+        "en": "Logo React",
         "fr": "Logo React",
         "es": "Logo React"
       }
@@ -393,7 +394,7 @@ module.exports = appContent;
     "readTheDocs": {
       "nodeType": "translation",
       "translation": {
-        "en": "Haga clic en los logotipos de Vite y React para obtener más información",
+        "en": "Click on the Vite and React logos to learn more",
         "fr": "Cliquez sur les logos Vite et React pour en savoir plus",
         "es": "Haga clic en los logotipos de Vite y React para obtener más información"
       }
@@ -402,7 +403,7 @@ module.exports = appContent;
 }
 ```
 
-> Sus declaraciones de contenido pueden definirse en cualquier parte de su aplicación tan pronto como se incluyan en el directorio `contentDir` (por defecto, `./src`). Y coincidan con la extensión del archivo de declaración de contenido (por defecto, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
+> Sus declaraciones de contenido pueden definirse en cualquier lugar de su aplicación tan pronto como se incluyan en el directorio `contentDir` (por defecto, `./src`). Y coincidan con la extensión del archivo de declaración de contenido (por defecto, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
 > Para más detalles, consulte la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/get_started.md).
 
@@ -450,7 +451,7 @@ const AppContent: FC = () => {
   );
 };
 
-const App = () => (
+const App: FC = () => (
   <IntlayerProvider>
     <AppContent />
   </IntlayerProvider>
@@ -553,7 +554,7 @@ const App = () => (
 module.exports = App;
 ```
 
-> Si quieres usar tu contenido en un atributo de tipo `string`, como `alt`, `title`, `href`, `aria-label`, etc., debes llamar al valor de la función, así:
+> Si deseas usar tu contenido en un atributo de tipo `string`, como `alt`, `title`, `href`, `aria-label`, etc., debes llamar al valor de la función, así:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
@@ -611,9 +612,9 @@ const LocaleSwitcher = () => {
 };
 ```
 
-> Para aprender más sobre el hook `useLocale`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md).
+> Para aprender más sobre el hook `useLocale`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md).
 
-### (Opcional) Paso 7: Añadir enrutamiento localizado a tu aplicación
+### (Opcional) Paso 7: Agregar enrutamiento localizado a su aplicación
 
 El propósito de este paso es crear rutas únicas para cada idioma. Esto es útil para SEO y URLs amigables con SEO.
 Ejemplo:
@@ -624,9 +625,9 @@ Ejemplo:
 - https://example.com/fr/about
 ```
 
-> Por defecto, las rutas no tienen prefijo para la configuración regional predeterminada. Si deseas agregar un prefijo para la configuración regional predeterminada, puedes establecer la opción `middleware.prefixDefault` en `true` en tu configuración. Consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md) para más información.
+> Por defecto, las rutas no tienen prefijo para la configuración regional predeterminada. Si desea agregar un prefijo para la configuración regional predeterminada, puede establecer la opción `middleware.prefixDefault` en `true` en su configuración. Consulte la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md) para obtener más información.
 
-Para agregar enrutamiento localizado a tu aplicación, puedes crear un componente `LocaleRouter` que envuelva las rutas de tu aplicación y gestione el enrutamiento basado en la configuración regional. Aquí tienes un ejemplo usando [React Router](https://reactrouter.com/home):
+Para agregar enrutamiento localizado a su aplicación, puede crear un componente `LocaleRouter` que envuelva las rutas de su aplicación y gestione el enrutamiento basado en la configuración regional. Aquí hay un ejemplo usando [React Router](https://reactrouter.com/home):
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
 // Importando las dependencias y funciones necesarias
@@ -646,8 +647,8 @@ const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * Un componente que maneja la localización y envuelve a los hijos con el contexto de configuración regional apropiado.
- * Gestiona la detección y validación de la configuración regional basada en la URL.
+ * Un componente que maneja la localización y envuelve a los hijos con el contexto de locale apropiado.
+ * Gestiona la detección y validación del locale basado en la URL.
  */
 const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
   children,
@@ -664,7 +665,7 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
   );
 
   /**
-   * Si middleware.prefixDefault es verdadero, la configuración regional predeterminada siempre debe tener prefijo.
+   * Si middleware.prefixDefault es true, la configuración regional predeterminada siempre debe tener prefijo.
    */
   if (middleware.prefixDefault) {
     // Validar la configuración regional
@@ -684,8 +685,8 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
     );
   } else {
     /**
-     * Cuando middleware.prefixDefault es falso, la configuración regional predeterminada no se antepone.
-     * Asegúrate de que la configuración regional actual sea válida y no la predeterminada.
+     * Cuando middleware.prefixDefault es falso, la configuración regional predeterminada no tiene prefijo.
+     * Asegúrate de que la configuración regional actual sea válida y no sea la predeterminada.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
@@ -693,13 +694,13 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
         .filter(
           (locale) => locale.toString() !== defaultLocale.toString() // Excluir la configuración regional predeterminada
         )
-        .includes(currentLocale) // Verifica si la localidad actual está en la lista de localidades válidas
+        .includes(currentLocale) // Verifica si la configuración regional actual está en la lista de configuraciones regionales válidas
     ) {
-      // Redirige a la ruta sin el prefijo de localidad
+      // Redirige a la ruta sin el prefijo de configuración regional
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
     }
 
-    // Envuelve los hijos con IntlayerProvider y establece la localidad actual
+    // Envuelve los hijos con IntlayerProvider y establece la configuración regional actual
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
@@ -707,7 +708,7 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
 };
 
 /**
- * Un componente de enrutador que configura rutas específicas por localidad.
+ * Un componente de enrutador que configura rutas específicas por configuración regional.
  * Utiliza React Router para gestionar la navegación y renderizar componentes localizados.
  */
 export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
@@ -719,7 +720,7 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
         )
         .map((locale) => (
           <Route
-            // Patrón de ruta para capturar la localidad (por ejemplo, /en/, /fr/) y coincidir con todas las rutas posteriores
+            // Patrón de ruta para capturar la localidad (por ejemplo, /en/, /fr/) y coincidir con todas las rutas subsecuentes
             path={`/${locale}/*`}
             key={locale}
             element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Envuelve los hijos con la gestión de la localidad
@@ -727,7 +728,7 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
         ))}
 
       {
-        // Si la prefijación de la localidad por defecto está deshabilitada, renderiza los hijos directamente en la ruta raíz
+        // Si el prefijo para la localidad por defecto está deshabilitado, renderiza los hijos directamente en la ruta raíz
         !middleware.prefixDefault && (
           <Route
             path="*"
@@ -743,7 +744,7 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
 ```
 
 ```jsx fileName="src/components/LocaleRouter.mjx" codeFormat="esm"
-// Importando las dependencias y funciones necesarias
+// Importación de dependencias y funciones necesarias
 import { configuration, getPathWithoutLocale } from "intlayer"; // Funciones utilitarias y tipos de 'intlayer'
 // Funciones utilitarias y tipos de 'intlayer'
 import { IntlayerProvider } from "react-intlayer"; // Proveedor para el contexto de internacionalización
@@ -755,33 +756,32 @@ import {
   useLocation,
 } from "react-router-dom"; // Componentes del enrutador para gestionar la navegación
 
-// Desestructurando la configuración de Intlayer
+// Desestructuración de la configuración desde Intlayer
 const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
  * Un componente que maneja la localización y envuelve a los hijos con el contexto de idioma apropiado.
-/**
  * Gestiona la detección y validación de la localización basada en la URL.
  */
 const AppLocalized = ({ children, locale }) => {
-  const { pathname, search } = useLocation(); // Obtener la ruta actual de la URL
+  const { pathname, search } = useLocation(); // Obtener la ruta URL actual
 
-  // Determinar la localización actual, usando la localización por defecto si no se proporciona
+  // Determinar la localización actual, usando la predeterminada si no se proporciona
   const currentLocale = locale ?? defaultLocale;
 
   // Eliminar el prefijo de localización de la ruta para construir una ruta base
   const pathWithoutLocale = getPathWithoutLocale(
-    pathname // Ruta actual de la URL
+    pathname // Ruta URL actual
   );
 
   /**
-   * Si middleware.prefixDefault es verdadero, la localización por defecto siempre debe tener prefijo.
+   * Si middleware.prefixDefault es true, la localización predeterminada siempre debe tener prefijo.
    */
   if (middleware.prefixDefault) {
     // Validar la localización
     if (!locale || !locales.includes(locale)) {
-      // Redirigir a la localización por defecto con la ruta actualizada
+      // Redirigir a la localización predeterminada con la ruta actualizada
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
@@ -796,7 +796,7 @@ const AppLocalized = ({ children, locale }) => {
     );
   } else {
     /**
-     * Cuando middleware.prefixDefault es falso, la localidad por defecto no se antepone.
+     * Cuando middleware.prefixDefault es falso, la localidad por defecto no tiene prefijo.
      * Asegura que la localidad actual sea válida y no la localidad por defecto.
      */
     if (
@@ -871,8 +871,8 @@ const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * Un componente que maneja la localización y envuelve a los hijos con el contexto de idioma apropiado.
- * Gestiona la detección y validación del idioma basado en la URL.
+ * Un componente que maneja la localización y envuelve a los hijos con el contexto de locale apropiado.
+ * Gestiona la detección y validación del locale basado en la URL.
  */
 const AppLocalized = ({ children, locale }) => {
   const { pathname, search } = useLocation(); // Obtener la ruta URL actual
@@ -886,7 +886,7 @@ const AppLocalized = ({ children, locale }) => {
   );
 
   /**
-   * Si middleware.prefixDefault es true, la configuración regional predeterminada siempre debe tener prefijo.
+   * Si middleware.prefixDefault es verdadero, la configuración regional predeterminada siempre debe tener prefijo.
    */
   if (middleware.prefixDefault) {
     // Validar la configuración regional
@@ -900,22 +900,22 @@ const AppLocalized = ({ children, locale }) => {
       );
     }
 
-    // Envuelve los hijos con IntlayerProvider y establece la configuración regional actual
+    // Envuelve los hijos con IntlayerProvider y establece la localidad actual
     return (
       <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
     );
   } else {
     /**
-     * Cuando middleware.prefixDefault es falso, la configuración regional predeterminada no se antepone.
-     * Asegúrate de que la configuración regional actual sea válida y no la predeterminada.
+     * Cuando middleware.prefixDefault es falso, la localidad por defecto no se antepone.
+     * Asegura que la localidad actual sea válida y no la localidad por defecto.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
       !locales
         .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Excluir la configuración regional predeterminada
+          (locale) => locale.toString() !== defaultLocale.toString() // Excluir la localidad por defecto
         )
-        .includes(currentLocale) // Verificar si la configuración regional actual está en la lista de configuraciones regionales válidas
+        .includes(currentLocale) // Verifica si la localidad actual está en la lista de localidades válidas
     ) {
       // Redirigir a la ruta sin el prefijo de la localidad
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
@@ -944,18 +944,18 @@ const LocaleRouter = ({ children }) => (
             // Patrón de ruta para capturar la localidad (por ejemplo, /en/, /fr/) y coincidir con todas las rutas subsecuentes
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Envuelve los hijos con la gestión de la localización
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Envuelve los hijos con la gestión de la configuración regional
           />
         ))}
 
       {
-        // Si la prefijación de la localización por defecto está deshabilitada, renderiza los hijos directamente en la ruta raíz
+        // Si la prefijación de la configuración regional predeterminada está deshabilitada, renderiza los hijos directamente en la ruta raíz
         !middleware.prefixDefault && (
           <Route
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Envuelve los hijos con la gestión de la localización
+            } // Envuelve los hijos con la gestión de la configuración regional
           />
         )
       }
@@ -1003,7 +1003,7 @@ const App = () => (
 );
 ```
 
-Paralelamente, también puedes usar el `intLayerMiddlewarePlugin` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
+Paralelamente, también puedes usar el `intLayerMiddlewarePlugin` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -1084,7 +1084,7 @@ const LocaleSwitcher: FC = () => {
             key={localeItem}
           >
             <span>
-              {/* Localización - p.ej. FR */}
+              {/* Local - p.ej. FR */}
               {localeItem}
             </span>
             <span>
@@ -1092,7 +1092,7 @@ const LocaleSwitcher: FC = () => {
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Idioma en la localización actual - p.ej. Francés con la localización actual configurada a Locales.SPANISH */}
+              {/* Idioma en la localización actual - p.ej. Francés con la localización actual configurada en Locales.SPANISH */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
@@ -1156,11 +1156,11 @@ const LocaleSwitcher = () => {
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Idioma en la configuración regional actual - p.ej. Francés con la configuración regional actual establecida en Locales.SPANISH */}
+              {/* Idioma en la configuración regional actual - por ejemplo, Francés con la configuración regional actual establecida en Locales.SPANISH */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Idioma en inglés - p.ej. French */}
+              {/* Idioma en inglés - por ejemplo, French */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1212,15 +1212,15 @@ const LocaleSwitcher = () => {
             key={localeItem}
           >
             <span>
-              {/* Localización - p.ej. FR */}
+              {/* Localidad - por ejemplo, FR */}
               {localeItem}
             </span>
             <span>
-              {/* Idioma en su propia localización - p.ej. Français */}
+              {/* Idioma en su propia Localidad - por ejemplo, Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Idioma en la localización actual - p.ej. Francés con la localización actual configurada a Locales.SPANISH */}
+              {/* Idioma en la Localidad actual - por ejemplo, Francés con la localidad actual configurada en Locales.SPANISH */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
@@ -1242,15 +1242,15 @@ const LocaleSwitcher = () => {
 > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/intlayer/getLocalizedUrl.md)
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/intlayer/getHTMLTextDir.md)
 > - [`hrefLang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-> - [`lang` attribute](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/lang)
-> - [`dir` attribute](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/dir)
-> - [`aria-current` attribute](https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+> - [`lang` attribute](https://developer.mozilla.org/es/docs/Web/HTML/Atributos_globales/lang)
+> - [`dir` attribute](https://developer.mozilla.org/es/docs/Web/HTML/Atributos_globales/dir)
+> - [`aria-current` attribute](https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA/Atributos/aria-current)
 
 A continuación se muestra el **Paso 9** actualizado con explicaciones añadidas y ejemplos de código refinados:
 
 ---
 
-### (Opcional) Paso 9: Cambiar los atributos de idioma y dirección del HTML
+### (Opcional) Paso 9: Cambiar los atributos de idioma y dirección en el HTML
 
 Cuando tu aplicación soporta múltiples idiomas, es crucial actualizar los atributos `lang` y `dir` de la etiqueta `<html>` para que coincidan con la configuración regional actual. Hacer esto garantiza:
 
@@ -1272,7 +1272,7 @@ import { getHTMLTextDir } from "intlayer";
 /**
  * Actualiza los atributos `lang` y `dir` del elemento HTML <html> según la configuración regional actual.
  * - `lang`: Informa a los navegadores y motores de búsqueda sobre el idioma de la página.
- * - `dir`: Garantiza el orden correcto de lectura (por ejemplo, 'ltr' para inglés, 'rtl' para árabe).
+ * - `dir`: Asegura el orden correcto de lectura (por ejemplo, 'ltr' para inglés, 'rtl' para árabe).
  *
  * Esta actualización dinámica es esencial para el renderizado correcto del texto, accesibilidad y SEO.
  */
@@ -1297,7 +1297,7 @@ import { getHTMLTextDir } from "intlayer";
 /**
  * Actualiza los atributos `lang` y `dir` del elemento HTML <html> según el locale actual.
  * - `lang`: Informa a los navegadores y motores de búsqueda sobre el idioma de la página.
- * - `dir`: Asegura el orden de lectura correcto (por ejemplo, 'ltr' para inglés, 'rtl' para árabe).
+ * - `dir`: Garantiza el orden correcto de lectura (por ejemplo, 'ltr' para inglés, 'rtl' para árabe).
  *
  * Esta actualización dinámica es esencial para una correcta representación del texto, accesibilidad y SEO.
  */
@@ -1324,16 +1324,16 @@ const { getHTMLTextDir } = require("intlayer");
  * - `lang`: Informa a los navegadores y motores de búsqueda sobre el idioma de la página.
  * - `dir`: Asegura el orden correcto de lectura (por ejemplo, 'ltr' para inglés, 'rtl' para árabe).
  *
- * Esta actualización dinámica es esencial para una correcta renderización del texto, accesibilidad y SEO.
+ * Esta actualización dinámica es esencial para una correcta representación del texto, accesibilidad y SEO.
  */
 const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
 
   useEffect(() => {
-    // Actualiza el atributo de idioma al locale actual.
+    // Actualiza el atributo de idioma a la configuración regional actual.
     document.documentElement.lang = locale;
 
-    // Establece la dirección del texto según el locale actual.
+    // Establece la dirección del texto según la configuración regional actual.
     document.documentElement.dir = getHTMLTextDir(locale);
   }, [locale]);
 };
@@ -1373,7 +1373,7 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent = () => {
-  // Aplica el hook para actualizar los atributos lang y dir de la etiqueta <html> según la configuración regional.
+  // Aplicar el hook para actualizar los atributos lang y dir de la etiqueta <html> según la configuración regional.
   useI18nHTMLAttributes();
 
   // ... Resto de tu componente
@@ -1395,7 +1395,7 @@ const { useI18nHTMLAttributes } = require("./hooks/useI18nHTMLAttributes");
 require("./App.css");
 
 const AppContent = () => {
-  // Aplicar el hook para actualizar los atributos lang y dir de la etiqueta <html> según la configuración regional.
+  // Aplica el hook para actualizar los atributos lang y dir de la etiqueta <html> según la configuración regional.
   useI18nHTMLAttributes();
 
   // ... Resto de tu componente
@@ -1412,19 +1412,19 @@ module.exports = App;
 
 Al aplicar estos cambios, tu aplicación:
 
-- Asegurará que el atributo de **idioma** (`lang`) refleje correctamente la configuración regional actual, lo cual es importante para el SEO y el comportamiento del navegador.
+- Asegurará que el atributo **language** (`lang`) refleje correctamente la configuración regional actual, lo cual es importante para SEO y el comportamiento del navegador.
 - Ajustará la **dirección del texto** (`dir`) según la configuración regional, mejorando la legibilidad y usabilidad para idiomas con diferentes órdenes de lectura.
 - Proporcionará una experiencia más **accesible**, ya que las tecnologías de asistencia dependen de estos atributos para funcionar de manera óptima.
 
-### (Opcional) Paso 10: Creación de un Componente de Enlace Localizado
+### (Opcional) Paso 10: Crear un Componente de Enlace Localizado
 
-Para garantizar que la navegación de su aplicación respete la configuración regional actual, puede crear un componente personalizado `Link`. Este componente antepone automáticamente a las URL internas el idioma actual. Por ejemplo, cuando un usuario francófono hace clic en un enlace a la página "Acerca de", es redirigido a `/fr/about` en lugar de `/about`.
+Para asegurar que la navegación de su aplicación respete la configuración regional actual, puede crear un componente personalizado `Link`. Este componente antepone automáticamente a las URLs internas el idioma actual. Por ejemplo, cuando un usuario francófono hace clic en un enlace a la página "Acerca de", es redirigido a `/fr/about` en lugar de `/about`.
 
 Este comportamiento es útil por varias razones:
 
-- **SEO y experiencia del usuario**: Las URL localizadas ayudan a los motores de búsqueda a indexar correctamente las páginas específicas de cada idioma y proporcionan a los usuarios contenido en su idioma preferido.
+- **SEO y experiencia del usuario**: Las URLs localizadas ayudan a los motores de búsqueda a indexar correctamente las páginas específicas por idioma y proporcionan a los usuarios contenido en su idioma preferido.
 - **Consistencia**: Al usar un enlace localizado en toda su aplicación, garantiza que la navegación se mantenga dentro de la configuración regional actual, evitando cambios inesperados de idioma.
-- **Mantenibilidad**: Centralizar la lógica de localización en un solo componente simplifica la gestión de URLs, haciendo que tu base de código sea más fácil de mantener y ampliar a medida que tu aplicación crece.
+- **Mantenibilidad**: Centralizar la lógica de localización en un solo componente simplifica la gestión de URLs, haciendo que tu base de código sea más fácil de mantener y extender a medida que tu aplicación crece.
 
 A continuación se muestra la implementación de un componente `Link` localizado en TypeScript:
 
@@ -1523,8 +1523,8 @@ const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
 /**
  * Un componente Link personalizado que adapta el atributo href según la configuración regional actual.
- * Para enlaces internos, utiliza `getLocalizedUrl` para anteponer la configuración regional a la URL (por ejemplo, /fr/about).
- * Esto asegura que la navegación se mantenga dentro del mismo contexto de configuración regional.
+ * Para enlaces internos, utiliza `getLocalizedUrl` para anteponer la URL con la configuración regional (por ejemplo, /fr/about).
+ * Esto asegura que la navegación se mantenga dentro del mismo contexto regional.
  */
 const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
@@ -1557,7 +1557,7 @@ Link.displayName = "Link";
   El hook `useLocale` proporciona el locale actual (por ejemplo, `fr` para francés).
 
 - **Localización de la URL**:  
-  Para enlaces internos (es decir, no externos), se utiliza `getLocalizedUrl` para anteponer automáticamente el locale actual a la URL. Esto significa que si tu usuario está en francés, pasar `/about` como `href` se transformará en `/fr/about`.
+  Para enlaces internos (es decir, no externos), se utiliza `getLocalizedUrl` para prefijar automáticamente la URL con el locale actual. Esto significa que si tu usuario está en francés, pasar `/about` como `href` se transformará en `/fr/about`.
 
 - **Retorno del Enlace**:  
   El componente devuelve un elemento `<a>` con la URL localizada, asegurando que la navegación sea coherente con la configuración regional.
@@ -1572,14 +1572,14 @@ Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de Type
 
 ![texto alternativo](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
 
-Asegúrese de que su configuración de TypeScript incluya los tipos autogenerados.
+Asegúrese de que su configuración de TypeScript incluya los tipos generados automáticamente.
 
 ```json5 fileName="tsconfig.json"
 {
   // ... Sus configuraciones existentes de TypeScript
   "include": [
     // ... Tus configuraciones existentes de TypeScript
-    ".intlayer/**/*.ts", // Incluir los tipos autogenerados
+    ".intlayer/**/*.ts", // Incluir los tipos generados automáticamente
   ],
 }
 ```
@@ -1597,15 +1597,15 @@ Para hacerlo, puedes agregar las siguientes instrucciones a tu archivo `.gitigno
 
 ### Extensión para VS Code
 
-Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la extensión oficial **Intlayer VS Code Extension**.
+Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la **Extensión oficial de Intlayer para VS Code**.
 
 [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-Esta extensión proporciona:
+Esta extensión ofrece:
 
 - **Autocompletado** para las claves de traducción.
 - **Detección de errores en tiempo real** para traducciones faltantes.
-- **Previsualizaciones en línea** del contenido traducido.
+- **Vistas previas en línea** del contenido traducido.
 - **Acciones rápidas** para crear y actualizar traducciones fácilmente.
 
 Para más detalles sobre cómo usar la extensión, consulta la [documentación de la extensión Intlayer para VS Code](https://intlayer.org/doc/vs-code-extension).
@@ -1620,4 +1620,4 @@ Para ir más allá, puedes implementar el [editor visual](https://github.com/aym
 
 ## Historial del documento
 
-- 5.5.10 - 2025-06-29: Inicio del historial
+- 5.5.10 - 2025-06-29: Historial inicial