Muy bien, necesito ayuda de los expertos en js. Este es mi problema: recibo un objeto de un CMS que contiene dos cadenas en su interior:

{pageContent.title}

Dentro del objeto obtengo:

 "title":{ "_type":"localeString" "en":"Privacy Policy" "es":"Política de Privacidad" }

Cada cadena representa una configuración regional y la página debe mostrar la correcta según la configuración regional actual. Para eso estoy usando un gancho de enrutador simple:

 const router = useRouter() const locale = router.locale

Ahora locale devuelve en o es

Para representar el objeto en la página, haría: {pageContent.title.es} para español y {pageContent.title.en} para inglés, y así sucesivamente.

Sin embargo, necesito que la parte .es y .en sea dinámica, y tome ese valor de locale ya que ahora solo hay dos idiomas, pero se agregarán más en el futuro.

Encontré una solución muy hacky que funciona, pero prefiero algo más elegante.

Primero, uno ambos, pero usando el nombre parcial del objeto como una cadena. Luego quito el '' (desencordándolo)

 let localeTitle = 'pageContent.title.' + locale localeTitle = localeTitle.replace(/"/g, '')

Luego, en la página, evalúo() esa nueva cadena: {eval(localeTitle)}

Ahora, sé que esta no es la forma correcta o mejor de hacer esto.

Y, antes de que pregunte por qué no obtengo el idioma correspondiente directamente en la consulta, lo intenté. Estoy usando getStaticProps para obtener los datos, lo que no permite el uso de ganchos, por lo que no puedo acceder a la locale desde el enrutador.

¿Algunas ideas?