Links a las documentaciones:
Introducción
Qué es internacionalización y localización
Arquitectura
Arquitectura de internacionalización para contenido en JavaScript
Agregando locales a nuestro contenido y Rutas Internacionalizadas
Rutas i18n
Rutas internacionalizadas y páginas no-dinámicas (Home)
Rutas Internacionalizadas en páginas dinámicas con getStaticPath()
Experiencia de usuario
Detección de idioma automática y next/link
Elección de idioma para el usuario a través de API Next.js
Arquitectura React
Arquitectura de internacionalización para labels en JavaScript
Arquitectura de internacionalización para componentes en React
Nuestra aplicación completamente traducida
Próximos pasos
Retos y trade-offs
Continúa con el Curso de Next.js: Grandes Datasets
You don't have access to this class
Keep learning! Join and start boosting your career
Internationalization becomes a crucial element in applications that seek to reach a global audience. Using JavaScript together with React and Next.js, we can deploy efficient solutions to translate interfaces into various languages. Let's present an approach that addresses this need in a simple and scalable way, divided by locale (locales) and components.
To improve internationalization, it is essential to organize our JSON files in a logical way. We start with one giant JSON file with all our locales, but as we increase the number of locales and labels, this approach becomes less efficient. Thus, it is advisable to create multiple JSON files, organized as follows:
es.json
for Spanish and en.json
for English).This structure not only improves scalability, but also facilitates the work of teams of editors and copywriters, allowing to adjust the text to specific cultural requirements, even if this means having duplicate labels.
React tools, such as Context and Hooks, are fundamental for handling internationalization. These allow you to efficiently share information across multiple components without excessive property passing.
Steps to implement:
Context: we will create a context in React using React.createContext()
. This will serve as a container for translations and will facilitate access throughout the application.
Translation Hook: Implement a Hook, for example useTranslations
, that connects to the context and extracts the necessary translations for each component. This way, the component will not have to worry about internationalization logic.
import { useContext } from 'react';import { TranslationContext } from './TranslationContext';
function useTranslations() { const { labels } = useContext(TranslationContext); return labels;}
Benefits:
Challenges:
It is essential to consider all these strategies in a practical context, evaluating pros and cons. You can start by implementing your own solution or by using specialized libraries such as react-intl
or react-i18next
, which solve similar problems and offer additional functionality.
Popular libraries offer robust tools to handle internationalization efficiently. By examining how these tools operate, we gain valuable insights that allow us to adapt their techniques to our specific needs.
Recommended libraries:
Internationalization is a continuous journey of optimization and adjustment as the audience and content evolves. Explore, experiment and find the best approach for your app.
Contributions 5
Questions 1
Links a las documentaciones:
Tutorial - Internationalization of React apps - LinguiJS documentation
https://github.com/lukeed/rosetta
“Analicemos la forma simple”
// allLabels.json
{
"es":{
"buy": "Comprar",
"accept": "Aceptar",
...
},
"en-US":{
"buy": "Buy",
"accept": "Accept",
...
},
...
}
Para implementar esta solución mediante JavaScript se realizaría de la siguiente manera:
import allLabels from "locales/labels.json";
function getServerSideProps(){ ... }
function MyComponent ({locale}){
const labels = allLabels[locale];
return (
<Button>{labels.comprar}</Button>
)
}
Dividiendo por componentes
// locales/es/checkout.json
{
"buy": "Comprar",
"addToCart": "Agregar al carro",
"contactUs": "¿Interesado/a?"
}
// locales/es/about.json
{
"about": "Nosotros",
"phone": "Teléfono",
"contactUs": "Conócenos"
}
import useTranslations from "useTranslations"
function getServerSideProps(){}
function MyComponent(){
const labels = useTranslations()
return (
<Button>{labels("comprar")}</Button>
)
}
function useTranslations(){
const ctx = useContext(LocaleContext);
const locale = ctx.getCurrentLocale();
const labels = ctx.labels.get(locale);
return labels;
}
Increíble esta manera de enseñar mostrándonos como piensa y como soluciona un problema.
next-i18next <-- Checken ese Repo. Facilita todo lo visto en esta clase!
Want to see more contributions, questions and answers from the community?