¿Quieres que tu sitio multilingüe en Sitecore Headless muestre textos traducidos de forma dinámica? Aquí tienes una guía paso a paso para lograrlo usando diccionarios de Sitecore y el hook useI18n en Next.js.
1. ¿Qué es un diccionario en Sitecore?
Un diccionario es una colección de claves y valores de texto traducidos, gestionados desde el CMS. Permite que tu frontend muestre textos en el idioma seleccionado, sin hardcodear cadenas.
2. ¿Cómo se usan en el frontend?
En tu código React/Next.js, usas el hook useI18n y la función t(‘clave’) para obtener el texto traducido según el idioma activo.
import { useI18n } from 'next-localization';
const { t } = useI18n();
<span>{t('forms-first-name')}</span>3. ¿Cómo crear y gestionar diccionarios en Sitecore?
Paso 1: Ubica la carpeta de diccionarios
/sitecore/content/[TuSitio]/Data/DiccionaryPaso 2: Crea un nuevo Dictionary Item
- Haz clic derecho en la carpeta de diccionarios y selecciona «Insert > Dictionary Entry».
- Ponle como nombre la clave que usarás en el código, por ejemplo:
forms-first-name.
Paso 3: Agrega traducciones
- Selecciona el Dictionary Item.
- Cambia de idioma en la barra superior de Sitecore.
- Escribe el valor traducido para cada idioma (por ejemplo, «Nombre» para español, «First Name» para inglés).
Paso 4: Publica los cambios
Asegúrate de publicar los diccionarios para que estén disponibles en el frontend.
4. Recomendaciones clave
- Usa claves descriptivas y consistentes, separadas por guiones (
forms-first-name). - No repitas textos: reutiliza claves en todo el proyecto.
- Mantén los diccionarios organizados por módulos o funcionalidades si tienes muchos textos.
- Si cambias una clave, actualízala también en el código.
- Publica siempre después de agregar o modificar traducciones.
5. ¿Qué pasa en el frontend?
Cuando el usuario cambia de idioma, Sitecore JSS/Next.js carga los valores correctos y t(‘clave’) devuelve el texto adecuado automáticamente.
6. ¿Cuando usar diccionarios?
Usa campos en componentes cuando el texto debe ser personalizado por los autores de contenido para cada instancia del componente o página. Ejemplos: títulos, descripciones, textos promocionales, mensajes específicos de una campaña, etc.
Usa diccionarios cuando el texto es fijo, reutilizable y no debe ser editable por autores de contenido en cada instancia del componente. Ejemplos: etiquetas de campos («Nombre», «Correo»), mensajes de error, botones estándar («Enviar», «Limpiar»), textos de validación, etc.
Tech behind Marketing 