Fundamentos
Next.js El futuro del Desarrollo Web
Novedades de Next.js 15
Migración de una APP a Next.js 15
Haciendo tu proyecto más rápido
RSC: Refactorizando un componente cliente a servidor
Cómo usar React Server Components con PostgreSQL sin un ORM
Consumiendo datos de manera eficiente
Consumiendo datos desde el servidor en Next.js 15
Consumiendo datos desde el cliente con React Query en Next.js 15
Patrones de Diseño: paralelo, secuencial y preload en Next.js 15
Uso avanzado de Suspense con Streaming rendering en Next.js 15
Escalabilidad y personalización
Internacionalización avanzada: rutas dinamicas y middlewares
Internacionalización avanzada: diccionario de traducciones
Autenticación: Middleware en Next.js para validar sesiones
Autenticación: Cookie sessions Next.js
Feature Flags LaunchDarkly en Next.js 15
Manejo de errores en React Server Components y Next.js
Manejo de errores y observavilidad: Integración con Sentry
Características Adicionales y Herramientas
Sistemas de caché en Next.js 15
Seguridad y buenas prácticas con Next.js
Seguridad y buenas prácticas: cookies, jwt y encriptación
Auditoria de performance en Next.js 15
Despliegue en Producción con Vercel
Despliegue en Fly.io: Preparación de Base de Datos
Despliegue en Fly.io: Despliegar Next.js en nuestro propio servidor
Next.js 15 el futuro del Desarrollo Web
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
With a well-designed internationalization strategy, it is possible to improve the user experience by adapting the content of a web page according to its language and locale. This approach optimizes resources and simplifies translation management by dynamically loading data from the server.
How does the language-aware redirection middleware work?
- The middleware detects the user's preferred language based on browser settings.
- This information is used to redirect to the correct content by assigning a dynamic segment in the URL such as
/enor/es.
How to display translated texts in the component?
- A function
tis created that receives a key as an argument and returns the corresponding translation from a dictionary. - The dictionaries are structured as JSON objects separated by language, which facilitates the management of translations.
- The function allows default values if a key is not available.
How to manage dictionaries dynamically?
- Dictionaries are loaded from the server using dynamic modules, reducing the weight of the data sent to the client.
- This approach ensures that the browser only receives the translations needed for the current language.
- The use of
asyncandawaitensures that dictionary loading is efficient and does not block other operations.
How to handle dates, numbers and currencies?
- Additional utilities are implemented in
getTranslationsto format dates and numbers according to language. - Node.js native internationalization APIs and browsers are used to create specific formatting functions.
- Example:
- In Spanish, numbers are separated by semicolons, and dates are displayed as
day/month/year. - In English, numbers use commas and periods, and dates are displayed as
month/day/year.
- In Spanish, numbers are separated by semicolons, and dates are displayed as
What advantages does Next.js offer for internationalization?
- Performance optimization: Translations are processed on the server, sending only what is necessary to the client.
- Compatibility with React Server Components: Allows for a more efficient approach to content management.
- Flexibility: Next.js allows you to customize solutions without relying exclusively on external libraries.
What additional elements should be considered?
- When planning internationalization, not only texts require attention, but also data formats such as numbers, dates and currencies.
- Configurations can be extended to include more languages or to support changes according to the user's needs.
Contributions 1
Questions 0
Want to see more contributions, questions and answers from the community?