@intlayer/docs 5.7.8 → 5.8.0-canary.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/intlayer_with_next-i18next.md +3 -4
- package/blog/ar/intlayer_with_next-intl.md +3 -4
- package/blog/ar/intlayer_with_react-i18next.md +1 -1
- package/blog/ar/intlayer_with_react-intl.md +1 -1
- package/blog/de/intlayer_with_next-i18next.md +3 -4
- package/blog/de/intlayer_with_react-intl.md +1 -1
- package/blog/en/intlayer_with_next-i18next.md +3 -4
- package/blog/en/intlayer_with_next-intl.md +3 -4
- package/blog/en/intlayer_with_react-i18next.md +1 -1
- package/blog/en/intlayer_with_react-intl.md +1 -1
- package/blog/en-GB/intlayer_with_next-i18next.md +3 -4
- package/blog/en-GB/intlayer_with_next-intl.md +3 -4
- package/blog/en-GB/intlayer_with_react-i18next.md +1 -1
- package/blog/en-GB/intlayer_with_react-intl.md +1 -1
- package/blog/es/intlayer_with_next-i18next.md +3 -4
- package/blog/es/intlayer_with_next-intl.md +3 -4
- package/blog/es/intlayer_with_react-i18next.md +1 -1
- package/blog/es/intlayer_with_react-intl.md +1 -1
- package/blog/fr/intlayer_with_next-i18next.md +3 -4
- package/blog/fr/intlayer_with_next-intl.md +3 -4
- package/blog/fr/intlayer_with_react-i18next.md +1 -1
- package/blog/fr/intlayer_with_react-intl.md +1 -1
- package/blog/hi/intlayer_with_next-i18next.md +3 -4
- package/blog/hi/intlayer_with_next-intl.md +3 -4
- package/blog/hi/intlayer_with_react-i18next.md +1 -1
- package/blog/hi/intlayer_with_react-intl.md +1 -1
- package/blog/it/intlayer_with_next-i18next.md +3 -4
- package/blog/it/intlayer_with_next-intl.md +3 -4
- package/blog/it/intlayer_with_react-i18next.md +1 -1
- package/blog/it/intlayer_with_react-intl.md +1 -1
- package/blog/ja/intlayer_with_next-i18next.md +3 -4
- package/blog/ja/intlayer_with_next-intl.md +3 -4
- package/blog/ja/intlayer_with_react-intl.md +1 -1
- package/blog/ko/intlayer_with_next-i18next.md +3 -4
- package/blog/ko/intlayer_with_next-intl.md +3 -4
- package/blog/ko/intlayer_with_react-intl.md +1 -1
- package/blog/pt/intlayer_with_next-i18next.md +3 -4
- package/blog/pt/intlayer_with_next-intl.md +3 -4
- package/blog/pt/intlayer_with_react-intl.md +1 -1
- package/blog/ru/intlayer_with_next-i18next.md +3 -4
- package/blog/ru/intlayer_with_next-intl.md +3 -4
- package/blog/ru/intlayer_with_react-i18next.md +1 -1
- package/blog/ru/intlayer_with_react-intl.md +1 -1
- package/blog/zh/intlayer_with_next-i18next.md +3 -4
- package/blog/zh/intlayer_with_next-intl.md +3 -4
- package/blog/zh/intlayer_with_react-i18next.md +1 -1
- package/blog/zh/intlayer_with_react-intl.md +1 -1
- package/dist/cjs/generated/docs.entry.cjs +41 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +41 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/formatters.md +239 -0
- package/docs/ar/interest_of_intlayer.md +162 -49
- package/docs/ar/introduction.md +3 -3
- package/docs/ar/packages/intlayer/index.md +3 -3
- package/docs/ar/packages/next-intlayer/index.md +3 -3
- package/docs/de/formatters.md +239 -0
- package/docs/de/interest_of_intlayer.md +161 -47
- package/docs/de/introduction.md +3 -3
- package/docs/de/packages/intlayer/index.md +3 -3
- package/docs/de/packages/next-intlayer/index.md +3 -3
- package/docs/de/packages/react-intlayer/index.md +3 -3
- package/docs/en/formatters.md +250 -0
- package/docs/en/interest_of_intlayer.md +159 -46
- package/docs/en/introduction.md +3 -3
- package/docs/en/packages/intlayer/index.md +3 -3
- package/docs/en/packages/next-intlayer/index.md +3 -3
- package/docs/en/packages/react-intlayer/index.md +3 -3
- package/docs/en-GB/formatters.md +239 -0
- package/docs/en-GB/interest_of_intlayer.md +160 -53
- package/docs/en-GB/packages/intlayer/index.md +3 -3
- package/docs/en-GB/packages/next-intlayer/index.md +3 -3
- package/docs/en-GB/packages/react-intlayer/index.md +3 -3
- package/docs/es/formatters.md +239 -0
- package/docs/es/interest_of_intlayer.md +159 -47
- package/docs/es/introduction.md +3 -3
- package/docs/es/packages/intlayer/index.md +3 -3
- package/docs/es/packages/next-intlayer/index.md +3 -3
- package/docs/fr/formatters.md +239 -0
- package/docs/fr/interest_of_intlayer.md +160 -46
- package/docs/fr/introduction.md +3 -3
- package/docs/fr/packages/intlayer/index.md +3 -3
- package/docs/fr/packages/next-intlayer/index.md +3 -3
- package/docs/fr/packages/react-intlayer/index.md +3 -3
- package/docs/hi/formatters.md +239 -0
- package/docs/hi/interest_of_intlayer.md +158 -42
- package/docs/hi/introduction.md +3 -3
- package/docs/hi/packages/intlayer/index.md +3 -3
- package/docs/hi/packages/next-intlayer/index.md +3 -3
- package/docs/hi/packages/react-intlayer/index.md +3 -3
- package/docs/it/formatters.md +239 -0
- package/docs/it/interest_of_intlayer.md +160 -46
- package/docs/it/introduction.md +3 -3
- package/docs/it/packages/intlayer/index.md +3 -3
- package/docs/it/packages/next-intlayer/index.md +3 -3
- package/docs/it/packages/react-intlayer/index.md +3 -3
- package/docs/ja/formatters.md +261 -0
- package/docs/ja/interest_of_intlayer.md +157 -48
- package/docs/ja/introduction.md +3 -3
- package/docs/ja/packages/intlayer/index.md +3 -3
- package/docs/ja/packages/next-intlayer/index.md +3 -3
- package/docs/ja/packages/react-intlayer/index.md +3 -3
- package/docs/ko/formatters.md +258 -0
- package/docs/ko/interest_of_intlayer.md +160 -48
- package/docs/ko/introduction.md +3 -3
- package/docs/ko/packages/intlayer/index.md +3 -3
- package/docs/ko/packages/next-intlayer/index.md +3 -3
- package/docs/ko/packages/react-intlayer/index.md +3 -3
- package/docs/pt/formatters.md +239 -0
- package/docs/pt/interest_of_intlayer.md +162 -47
- package/docs/pt/introduction.md +3 -3
- package/docs/pt/packages/intlayer/index.md +3 -3
- package/docs/pt/packages/next-intlayer/index.md +3 -3
- package/docs/pt/packages/react-intlayer/index.md +3 -3
- package/docs/ru/formatters.md +239 -0
- package/docs/ru/interest_of_intlayer.md +168 -50
- package/docs/ru/introduction.md +3 -3
- package/docs/ru/packages/intlayer/index.md +3 -3
- package/docs/ru/packages/next-intlayer/index.md +3 -3
- package/docs/ru/packages/react-intlayer/index.md +3 -3
- package/docs/zh/formatters.md +239 -0
- package/docs/zh/interest_of_intlayer.md +158 -48
- package/docs/zh/introduction.md +3 -3
- package/docs/zh/packages/intlayer/index.md +3 -3
- package/docs/zh/packages/next-intlayer/index.md +3 -3
- package/docs/zh/packages/react-intlayer/index.md +3 -3
- package/package.json +12 -12
- package/src/generated/docs.entry.ts +41 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-08-14
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-08-20
|
|
4
4
|
title: Interés de Intlayer
|
|
5
5
|
description: Descubre los beneficios y ventajas de usar Intlayer en tus proyectos. Entiende por qué Intlayer destaca entre otros frameworks.
|
|
6
6
|
keywords:
|
|
@@ -11,41 +11,104 @@ keywords:
|
|
|
11
11
|
- Comparación
|
|
12
12
|
slugs:
|
|
13
13
|
- doc
|
|
14
|
-
-
|
|
15
|
-
- interest
|
|
14
|
+
- why
|
|
16
15
|
---
|
|
17
16
|
|
|
18
|
-
#
|
|
17
|
+
# ¿Por qué deberías considerar Intlayer?
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
## ¿Qué es Intlayer?
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
**Intlayer** es una biblioteca de internacionalización diseñada específicamente para desarrolladores de JavaScript. Permite la declaración de tu contenido en cualquier parte de tu código. Convierte las declaraciones de contenido multilingüe en diccionarios estructurados para integrarlos fácilmente en tu código. Usando TypeScript, **Intlayer** hace que tu desarrollo sea más sólido y eficiente.
|
|
22
|
+
|
|
23
|
+
## ¿Por qué se creó Intlayer?
|
|
24
|
+
|
|
25
|
+
Intlayer fue creado para resolver un problema común que afecta a todas las bibliotecas i18n comunes como `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl` y `vue-i18n`.
|
|
26
|
+
|
|
27
|
+
Todas estas soluciones adoptan un enfoque centralizado para listar y gestionar tu contenido. Por ejemplo:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
.
|
|
31
|
+
├── locales
|
|
32
|
+
│ ├── en.json
|
|
33
|
+
│ ├── fr.json
|
|
34
|
+
│ └── es.json
|
|
35
|
+
├── i18n.ts
|
|
36
|
+
└── src
|
|
37
|
+
└── components
|
|
38
|
+
└── MyComponent
|
|
39
|
+
└── index.tsx
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
O aquí usando espacios de nombres:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
.
|
|
46
|
+
├── locales
|
|
47
|
+
│ ├── en
|
|
48
|
+
│ │ ├── footer.json
|
|
49
|
+
│ │ └── navbar.json
|
|
50
|
+
│ ├── fr
|
|
51
|
+
│ │ ├── footer.json
|
|
52
|
+
│ │ └── navbar.json
|
|
53
|
+
│ └── es
|
|
54
|
+
│ ├── footer.json
|
|
55
|
+
│ └── navbar.json
|
|
56
|
+
├── i18n.ts
|
|
57
|
+
└── src
|
|
58
|
+
└── components
|
|
59
|
+
└── MyComponent
|
|
60
|
+
└── index.tsx
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Este tipo de arquitectura ralentiza el proceso de desarrollo y hace que la base de código sea más compleja de mantener por varias razones:
|
|
64
|
+
|
|
65
|
+
1. **Para cualquier nuevo componente creado, debes:**
|
|
66
|
+
- Crear el nuevo recurso/espacio de nombres en la carpeta `locales`
|
|
67
|
+
- Recordar importar el nuevo espacio de nombres en tu página
|
|
68
|
+
- Traducir tu contenido (a menudo hecho manualmente copiando/pegando desde proveedores de IA)
|
|
69
|
+
|
|
70
|
+
2. **Para cualquier cambio realizado en tus componentes, debes:**
|
|
71
|
+
- Buscar el recurso/espacio de nombres relacionado (lejos del componente)
|
|
72
|
+
- Traducir tu contenido
|
|
73
|
+
- Asegurarte de que tu contenido esté actualizado para cualquier localización
|
|
74
|
+
- Verificar que tu espacio de nombres no incluya claves/valores sin usar
|
|
75
|
+
- Asegurarte de que la estructura de tus archivos JSON sea la misma para todas las localizaciones
|
|
76
|
+
|
|
77
|
+
En proyectos profesionales que utilizan estas soluciones, a menudo se emplean plataformas de localización para ayudar a gestionar la traducción de tu contenido. Sin embargo, esto puede volverse rápidamente costoso para proyectos grandes.
|
|
78
|
+
|
|
79
|
+
Para resolver este problema, Intlayer adopta un enfoque que delimita tu contenido por componente y mantiene tu contenido cerca de tu componente, como a menudo hacemos con CSS (`styled-components`), tipos, documentación (`storybook`) o pruebas unitarias (`jest`).
|
|
23
80
|
|
|
24
81
|
```bash codeFormat="typescript"
|
|
25
82
|
.
|
|
26
|
-
└──
|
|
83
|
+
└── components
|
|
27
84
|
└── MyComponent
|
|
28
85
|
├── index.content.ts
|
|
86
|
+
├── index.test.tsx
|
|
87
|
+
├── index.stories.tsx
|
|
29
88
|
└── index.tsx
|
|
30
89
|
```
|
|
31
90
|
|
|
32
91
|
```bash codeFormat="commonjs"
|
|
33
92
|
.
|
|
34
|
-
└──
|
|
93
|
+
└── components
|
|
35
94
|
└── MyComponent
|
|
36
95
|
├── index.content.cjs
|
|
37
|
-
|
|
96
|
+
├── index.test.mjs
|
|
97
|
+
├── index.stories.mjs
|
|
98
|
+
└── index.tsx
|
|
38
99
|
```
|
|
39
100
|
|
|
40
101
|
```bash codeFormat="esm"
|
|
41
102
|
.
|
|
42
|
-
└──
|
|
103
|
+
└── components
|
|
43
104
|
└── MyComponent
|
|
44
105
|
├── index.content.mjs
|
|
45
|
-
|
|
106
|
+
├── index.test.mjs
|
|
107
|
+
├── index.stories.mjs
|
|
108
|
+
└── index.tsx
|
|
46
109
|
```
|
|
47
110
|
|
|
48
|
-
```tsx fileName="./
|
|
111
|
+
```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
|
|
49
112
|
import { t, type Dictionary } from "intlayer";
|
|
50
113
|
|
|
51
114
|
const componentExampleContent = {
|
|
@@ -53,8 +116,8 @@ const componentExampleContent = {
|
|
|
53
116
|
content: {
|
|
54
117
|
myTranslatedContent: t({
|
|
55
118
|
en: "Hello World",
|
|
56
|
-
fr: "Bonjour le monde",
|
|
57
119
|
es: "Hola Mundo",
|
|
120
|
+
fr: "Bonjour le monde",
|
|
58
121
|
}),
|
|
59
122
|
},
|
|
60
123
|
} satisfies Dictionary;
|
|
@@ -62,18 +125,17 @@ const componentExampleContent = {
|
|
|
62
125
|
export default componentExampleContent;
|
|
63
126
|
```
|
|
64
127
|
|
|
65
|
-
```jsx fileName="./
|
|
128
|
+
```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
|
|
66
129
|
import { t } from "intlayer";
|
|
67
130
|
|
|
68
131
|
/** @type {import('intlayer').Dictionary} */
|
|
69
|
-
// Contenido de ejemplo del componente con traducciones
|
|
70
132
|
const componentExampleContent = {
|
|
71
133
|
key: "component-example",
|
|
72
134
|
content: {
|
|
73
135
|
myTranslatedContent: t({
|
|
74
136
|
en: "Hello World",
|
|
75
|
-
fr: "Bonjour le monde",
|
|
76
137
|
es: "Hola Mundo",
|
|
138
|
+
fr: "Bonjour le monde",
|
|
77
139
|
}),
|
|
78
140
|
},
|
|
79
141
|
};
|
|
@@ -81,18 +143,17 @@ const componentExampleContent = {
|
|
|
81
143
|
export default componentExampleContent;
|
|
82
144
|
```
|
|
83
145
|
|
|
84
|
-
```jsx fileName="./
|
|
146
|
+
```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
|
|
85
147
|
const { t } = require("intlayer");
|
|
86
148
|
|
|
87
149
|
/** @type {import('intlayer').Dictionary} */
|
|
88
|
-
// Contenido de ejemplo del componente con traducciones
|
|
89
150
|
const componentExampleContent = {
|
|
90
151
|
key: "component-example",
|
|
91
152
|
content: {
|
|
92
153
|
myTranslatedContent: t({
|
|
93
154
|
en: "Hello World",
|
|
94
|
-
fr: "Bonjour le monde",
|
|
95
155
|
es: "Hola Mundo",
|
|
156
|
+
fr: "Bonjour le monde",
|
|
96
157
|
}),
|
|
97
158
|
},
|
|
98
159
|
};
|
|
@@ -100,10 +161,9 @@ const componentExampleContent = {
|
|
|
100
161
|
module.exports = componentExampleContent;
|
|
101
162
|
```
|
|
102
163
|
|
|
103
|
-
```tsx fileName="./
|
|
164
|
+
```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
|
|
104
165
|
import { useIntlayer } from "react-intlayer";
|
|
105
166
|
|
|
106
|
-
// Componente de ejemplo que utiliza la traducción desde Intlayer
|
|
107
167
|
export const ComponentExample = () => {
|
|
108
168
|
const { myTranslatedContent } = useIntlayer("component-example");
|
|
109
169
|
|
|
@@ -111,7 +171,7 @@ export const ComponentExample = () => {
|
|
|
111
171
|
};
|
|
112
172
|
```
|
|
113
173
|
|
|
114
|
-
```jsx fileName="./
|
|
174
|
+
```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
|
|
115
175
|
import { useIntlayer } from "react-intlayer";
|
|
116
176
|
|
|
117
177
|
const ComponentExample = () => {
|
|
@@ -121,7 +181,7 @@ const ComponentExample = () => {
|
|
|
121
181
|
};
|
|
122
182
|
```
|
|
123
183
|
|
|
124
|
-
```jsx fileName="./
|
|
184
|
+
```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
|
|
125
185
|
const { useIntlayer } = require("react-intlayer");
|
|
126
186
|
|
|
127
187
|
const ComponentExample = () => {
|
|
@@ -131,27 +191,79 @@ const ComponentExample = () => {
|
|
|
131
191
|
};
|
|
132
192
|
```
|
|
133
193
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
-
|
|
194
|
+
Este enfoque te permite:
|
|
195
|
+
|
|
196
|
+
1. **Aumentar la velocidad de desarrollo**
|
|
197
|
+
- Los archivos `.content.{{ts|mjs|cjs|json}}` pueden ser creados usando una extensión de VSCode
|
|
198
|
+
- Las herramientas de autocompletado con IA en tu IDE (como GitHub Copilot) pueden ayudarte a declarar tu contenido, reduciendo el copiar/pegar
|
|
199
|
+
|
|
200
|
+
2. **Reducir la complejidad de tu base de código**
|
|
201
|
+
|
|
202
|
+
3. **Incrementar la mantenibilidad de tu base de código**
|
|
203
|
+
|
|
204
|
+
4. **Duplicar tus componentes y su contenido relacionado más fácilmente (Ejemplo: componentes de login/registro, etc.)**
|
|
205
|
+
- Limitando el riesgo de impactar el contenido de otros componentes
|
|
206
|
+
- Copiando/pegando tu contenido de una aplicación a otra sin dependencias externas
|
|
207
|
+
|
|
208
|
+
5. **Evitar contaminar tu base de código con claves/valores no usados para componentes no usados**
|
|
209
|
+
- Si no usas un componente, no necesitas importar su contenido
|
|
210
|
+
- Si eliminas un componente, te será más fácil recordar eliminar su contenido relacionado ya que estará presente en la misma carpeta
|
|
211
|
+
|
|
212
|
+
6. **Reducir el costo de razonamiento para que los agentes de IA declaren tu contenido multilingüe**
|
|
213
|
+
- El agente de IA no tendrá que escanear toda tu base de código para saber dónde implementar tu contenido
|
|
214
|
+
- Las traducciones pueden realizarse fácilmente mediante herramientas de autocompletado con IA en tu IDE (como GitHub Copilot)
|
|
215
|
+
|
|
216
|
+
7. **Optimizar el rendimiento de carga**
|
|
217
|
+
- Si un componente se carga de forma diferida (lazy-loaded), su contenido relacionado se cargará al mismo tiempo
|
|
218
|
+
|
|
219
|
+
## Características adicionales de Intlayer
|
|
220
|
+
|
|
221
|
+
| Funcionalidad | Descripción |
|
|
222
|
+
| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
223
|
+
|  | **Compatibilidad entre Frameworks**<br><br>Intlayer es compatible con todos los principales frameworks y bibliotecas, incluyendo Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más. |
|
|
224
|
+
|  | **Gestión de Contenido Potenciada por JavaScript**<br><br>Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente. <br><br> - [Declaración de contenido](https://intlayer.org/doc/concept/content) |
|
|
225
|
+
|  | **Archivo de Declaración de Contenido por Localidad**<br><br>Acelera tu desarrollo declarando tu contenido una vez, antes de la generación automática.<br><br> - [Archivo de Declaración de Contenido por Localidad](https://intlayer.org/doc/concept/per-locale-file) |
|
|
226
|
+
|  | **Entorno con Tipos Seguros**<br><br>Aprovecha TypeScript para asegurar que tus definiciones de contenido y código estén libres de errores, además de beneficiarte de la autocompletación en el IDE.<br><br> - [Configuración de TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |
|
|
227
|
+
|  | **Configuración Simplificada**<br><br>Pon en marcha rápidamente con una configuración mínima. Ajusta fácilmente los ajustes para internacionalización, enrutamiento, IA, compilación y manejo de contenido.<br><br> - [Explora la integración con Next.js](https://intlayer.org/doc/environment/nextjs) |
|
|
228
|
+
|  | **Recuperación de Contenido Simplificada**<br><br>No es necesario llamar a tu función `t` para cada contenido. Recupera todo tu contenido directamente usando un solo hook.<br><br> - [Integración con React](https://intlayer.org/doc/environment/create-react-app) |
|
|
229
|
+
|  | **Implementación Consistente de Componentes del Servidor**<br><br>Perfectamente adecuado para componentes del servidor de Next.js, utiliza la misma implementación tanto para componentes cliente como servidor, sin necesidad de pasar tu función `t` a través de cada componente del servidor. <br><br> - [Componentes del Servidor](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |
|
|
230
|
+
|  | **Base de Código Organizada**<br><br>Mantén tu base de código más organizada: 1 componente = 1 diccionario en la misma carpeta. Las traducciones cercanas a sus respectivos componentes mejoran la mantenibilidad y claridad. <br><br> - [Cómo funciona Intlayer](https://intlayer.org/doc/concept/how-works-intlayer) |
|
|
231
|
+
|  | **Enrutamiento Mejorado**<br><br>Soporte completo para el enrutamiento de aplicaciones, adaptándose perfectamente a estructuras complejas de aplicaciones, para Next.js, React, Vite, Vue.js, etc.<br><br> - [Explorar la integración con Next.js](https://intlayer.org/doc/environment/nextjs) |
|
|
232
|
+
|  | **Soporte Markdown**<br><br>Importa e interpreta archivos de localización y Markdown remoto para contenido multilingüe como políticas de privacidad, documentación, etc. Interpreta y haz accesibles los metadatos de Markdown en tu código.<br><br> - [Archivos de contenido](https://intlayer.org/doc/concept/content/file) |
|
|
233
|
+
|  | **Editor Visual y CMS Gratuitos**<br><br>Un editor visual y CMS gratuitos están disponibles para los redactores de contenido, eliminando la necesidad de una plataforma de localización. Mantén tu contenido sincronizado usando Git, o externalízalo total o parcialmente con el CMS.<br><br> - [Editor Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms) |
|
|
234
|
+
|  | **Contenido Tree-shakable**<br><br>Contenido tree-shakable, que reduce el tamaño del paquete final. Carga contenido por componente, excluyendo cualquier contenido no utilizado de tu paquete. Soporta carga diferida para mejorar la eficiencia de carga de la aplicación. <br><br> - [Optimización de construcción de la aplicación](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
|
|
235
|
+
|  | **Renderizado Estático**<br><br>No bloquea el Renderizado Estático. <br><br> - [Integración con Next.js](https://intlayer.org/doc/environment/nextjs) |
|
|
236
|
+
|  | **Traducción impulsada por IA**<br><br>Transforma tu sitio web a 231 idiomas con un solo clic utilizando las avanzadas herramientas de traducción impulsadas por IA de Intlayer, usando tu propio proveedor de IA/clave API. <br><br> - [Integración CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI de Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Relleno automático](https://intlayer.org/doc/concept/auto-fill) |
|
|
237
|
+
|  | **Integración del Servidor MCP**<br><br>Proporciona un servidor MCP (Protocolo de Contexto de Modelo) para la automatización del IDE, permitiendo una gestión de contenido fluida y flujos de trabajo de i18n directamente dentro de tu entorno de desarrollo. <br><br> - [Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md) |
|
|
238
|
+
|  | **Extensión para VSCode**<br><br>Intlayer proporciona una extensión para VSCode que te ayuda a gestionar tu contenido y traducciones, construir tus diccionarios, traducir tu contenido y más. <br><br> - [Extensión para VSCode](https://intlayer.org/doc/vs-code-extension) |
|
|
239
|
+
|  | **Interoperabilidad**<br><br>Permite la interoperabilidad con react-i18next, next-i18next, next-intl y react-intl. <br><br> - [Intlayer y react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer y next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer y next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) |
|
|
240
|
+
|
|
241
|
+
## Comparación de Intlayer con otras soluciones
|
|
242
|
+
|
|
243
|
+
| Característica | Intlayer | React-i18next / i18next | React-Intl (FormatJS) | LinguiJS | next-intl | next-i18next | vue-i18n |
|
|
244
|
+
| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
245
|
+
| **Traducciones Cerca de los Componentes** | Sí, contenido colocalizado con cada componente | No | No | No | No | No | Sí - usando `Componentes de Archivo Único` (SFCs) |
|
|
246
|
+
| **Integración con TypeScript** | Avanzada, tipos estrictos generados automáticamente | Básica; configuración adicional para seguridad | Buena, pero menos estricta | Tipos, necesita configuración | Buena | Básica | Buena (tipos disponibles; la seguridad de claves requiere configuración) |
|
|
247
|
+
| **Detección de Traducción Faltante** | Error/advertencia en tiempo de compilación | Principalmente cadenas de reserva en tiempo de ejecución | Cadenas de reserva | Requiere configuración adicional | Reserva en tiempo de ejecución | Reserva en tiempo de ejecución | Reserva/advertencias en tiempo de ejecución (configurable) |
|
|
248
|
+
| **Contenido enriquecido (JSX/Markdown/componentes)** | Soporte directo, incluso nodos React | Limitado / solo interpolación | Sintaxis ICU, no JSX real | Limitado | No diseñado para nodos enriquecidos | Limitado | Limitado (componentes vía `<i18n-t>`, Markdown vía plugins) |
|
|
249
|
+
| **Traducción impulsada por IA** | Sí, soporta múltiples proveedores de IA. Usable con tus propias claves API. Considera el contexto de tu aplicación y el alcance del contenido | No | No | No | No | No | No |
|
|
250
|
+
| **Editor Visual** | Sí, Editor Visual local + CMS opcional; puede externalizar contenido de la base de código; embebible | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas |
|
|
251
|
+
| **Enrutamiento Localizado** | Incorporado, con soporte de middleware | Plugins o configuración manual | No incorporado | Plugin/configuración manual | Incorporado | Incorporado | Manual a través de Vue Router (Nuxt i18n lo maneja) |
|
|
252
|
+
| **Generación Dinámica de Rutas** | Sí | Plugin/ecosistema o configuración manual | No proporcionado | Plugin/manual | Sí | Sí | No proporcionado (Nuxt i18n lo proporciona) |
|
|
253
|
+
| **Pluralización** | Patrones basados en enumeración; ver documentación | Configurable (plugins como i18next-icu) | Avanzado (ICU) | Avanzado (ICU/messageformat) | Bueno | Bueno | Avanzado (reglas de pluralización integradas) |
|
|
254
|
+
| **Formato (fechas, números, monedas)** | Formateadores optimizados (Intl en el núcleo) | A través de plugins o uso personalizado de Intl | Formateadores avanzados ICU | Ayudantes ICU/CLI | Bueno (ayudantes Intl) | Bueno (ayudantes Intl) | Formateadores integrados de fecha/número (Intl) |
|
|
255
|
+
| **Formato de Contenido** | .tsx, .ts, .js, .json, .md, .txt | .json | .json, .js | .po, .json | .json, .js, .ts | .json | .json, .js |
|
|
256
|
+
| **Soporte ICU** | En desarrollo (ICU nativo) | A través de plugin (i18next-icu) | Sí | Sí | Sí | A través de plugin (i18next-icu) | A través de formateador/compilador personalizado |
|
|
257
|
+
| **Ayudantes SEO (hreflang, sitemap)** | Herramientas integradas: ayudantes para sitemap, **robots.txt**, metadatos | Plugins comunitarios/manual | No es núcleo | No es núcleo | Bueno | Bueno | No es núcleo (Nuxt i18n proporciona ayudantes) |
|
|
258
|
+
| **Ecosistema / Comunidad** | Más pequeño pero creciendo rápido y reactivo | El más grande y maduro | Grande, empresarial | En crecimiento, más pequeño | Mediano, enfocado en Next.js | Mediano, enfocado en Next.js | Grande en el ecosistema Vue |
|
|
259
|
+
| **Renderizado del lado del servidor y Componentes de Servidor** | Sí, optimizado para SSR / Componentes de Servidor de React | Soportado, se necesita algo de configuración | Soportado en Next.js | Soportado | Soporte completo | Soporte completo | SSR a través de Nuxt/Vue SSR (sin RSC) |
|
|
260
|
+
| **Eliminación de código muerto (cargar solo el contenido usado)** | Sí, por componente en tiempo de compilación mediante plugins de Babel/SWC | Usualmente carga todo (puede mejorarse con namespaces/división de código) | Usualmente carga todo | No es el valor predeterminado | Parcial | Parcial | Parcial (con división de código/configuración manual) |
|
|
261
|
+
| **Carga diferida** | Sí, por localización/por componente | Sí (por ejemplo, backends/namespaces bajo demanda) | Sí (división de paquetes por localización) | Sí (importaciones dinámicas de catálogos) | Sí (por ruta/por localización) | Sí (por ruta/por localización) | Sí (mensajes de localización asíncronos) |
|
|
262
|
+
| **Gestión de Proyectos Grandes** | Fomenta la modularidad, adecuado para sistemas de diseño | Requiere buena disciplina de archivos | Los catálogos centrales pueden volverse grandes | Puede volverse complejo | Modular con configuración | Modular con configuración | Modular con configuración de Vue Router/Nuxt i18n |
|
|
263
|
+
|
|
264
|
+
## Historial del Documento
|
|
265
|
+
|
|
266
|
+
| Versión | Fecha | Cambios |
|
|
267
|
+
| ------- | ---------- | ------------------------------------- |
|
|
268
|
+
| 5.8.0 | 2025-08-19 | Actualización de la tabla comparativa |
|
|
269
|
+
| 5.5.10 | 2025-06-29 | Inicio del historial |
|
package/docs/es/introduction.md
CHANGED
|
@@ -44,8 +44,8 @@ const componentContent = {
|
|
|
44
44
|
content: {
|
|
45
45
|
myTranslatedContent: t({
|
|
46
46
|
en: "Hello World",
|
|
47
|
-
fr: "Bonjour le monde",
|
|
48
47
|
es: "Hola Mundo",
|
|
48
|
+
fr: "Bonjour le monde",
|
|
49
49
|
}),
|
|
50
50
|
},
|
|
51
51
|
} satisfies Dictionary;
|
|
@@ -63,8 +63,8 @@ const componentContent = {
|
|
|
63
63
|
content: {
|
|
64
64
|
myTranslatedContent: t({
|
|
65
65
|
en: "Hello World",
|
|
66
|
-
fr: "Bonjour le monde",
|
|
67
66
|
es: "Hola Mundo",
|
|
67
|
+
fr: "Bonjour le monde",
|
|
68
68
|
}),
|
|
69
69
|
},
|
|
70
70
|
};
|
|
@@ -82,8 +82,8 @@ const componentContent = {
|
|
|
82
82
|
content: {
|
|
83
83
|
myTranslatedContent: t({
|
|
84
84
|
en: "Hello World",
|
|
85
|
-
fr: "Bonjour le monde",
|
|
86
85
|
es: "Hola Mundo",
|
|
86
|
+
fr: "Bonjour le monde",
|
|
87
87
|
}),
|
|
88
88
|
},
|
|
89
89
|
};
|
|
@@ -153,8 +153,8 @@ const clientComponentContent = {
|
|
|
153
153
|
content: {
|
|
154
154
|
myTranslatedContent: t({
|
|
155
155
|
en: "Hello World",
|
|
156
|
-
fr: "Bonjour le monde",
|
|
157
156
|
es: "Hola Mundo",
|
|
157
|
+
fr: "Bonjour le monde",
|
|
158
158
|
}),
|
|
159
159
|
numberOfCar: enu({
|
|
160
160
|
"<-1": "Less than minus one car",
|
|
@@ -179,8 +179,8 @@ const clientComponentContent = {
|
|
|
179
179
|
content: {
|
|
180
180
|
myTranslatedContent: t({
|
|
181
181
|
en: "Hello World",
|
|
182
|
-
fr: "Bonjour le monde",
|
|
183
182
|
es: "Hola Mundo",
|
|
183
|
+
fr: "Bonjour le monde",
|
|
184
184
|
}),
|
|
185
185
|
numberOfCar: enu({
|
|
186
186
|
"<-1": "Menos de un coche menos",
|
|
@@ -205,8 +205,8 @@ const clientComponentContent = {
|
|
|
205
205
|
content: {
|
|
206
206
|
myTranslatedContent: t({
|
|
207
207
|
en: "Hello World",
|
|
208
|
-
fr: "Bonjour le monde",
|
|
209
208
|
es: "Hola Mundo",
|
|
209
|
+
fr: "Bonjour le monde",
|
|
210
210
|
}),
|
|
211
211
|
numberOfCar: enu({
|
|
212
212
|
"<-1": "Menos de menos un coche",
|
|
@@ -110,8 +110,8 @@ const clientComponentContent = {
|
|
|
110
110
|
content: {
|
|
111
111
|
myTranslatedContent: t({
|
|
112
112
|
en: "Hello World",
|
|
113
|
-
fr: "Bonjour le monde",
|
|
114
113
|
es: "Hola Mundo",
|
|
114
|
+
fr: "Bonjour le monde",
|
|
115
115
|
}),
|
|
116
116
|
numberOfCar: enu({
|
|
117
117
|
"<-1": "Less than minus one car",
|
|
@@ -136,8 +136,8 @@ const clientComponentContent = {
|
|
|
136
136
|
content: {
|
|
137
137
|
myTranslatedContent: t({
|
|
138
138
|
en: "Hello World",
|
|
139
|
-
fr: "Bonjour le monde",
|
|
140
139
|
es: "Hola Mundo",
|
|
140
|
+
fr: "Bonjour le monde",
|
|
141
141
|
}),
|
|
142
142
|
numberOfCar: enu({
|
|
143
143
|
"<-1": "Menos que menos un coche",
|
|
@@ -162,8 +162,8 @@ const clientComponentContent = {
|
|
|
162
162
|
content: {
|
|
163
163
|
myTranslatedContent: t({
|
|
164
164
|
en: "Hello World",
|
|
165
|
-
fr: "Bonjour le monde",
|
|
166
165
|
es: "Hola Mundo",
|
|
166
|
+
fr: "Bonjour le monde",
|
|
167
167
|
}),
|
|
168
168
|
numberOfCar: enu({
|
|
169
169
|
"<-1": "Menos que menos un coche",
|