Create an account or log in

Keep learning for free! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
2 Hrs
4 Min
28 Seg

Agregando locales a nuestro contenido y Rutas Internacionalizadas

3/12
Resources

How is internationalization handled in Next.js?

Internationalization in Next.js is a crucial aspect for those who wish to expand their applications to a global audience. By adapting your project for different languages and locales, you ensure a more inclusive and accessible experience for users from different cultures. In this article we will explain how to implement internationalization in Next.js and how to integrate these features with Contentful, a popular content management system (CMS).

What are the strategies for internationalized routes in Next.js?

In Next.js we have two main approaches to handle internationalized routes:

  1. Subpath Routing: This method uses the URL structure where the "locale" is included before the main path. For example, a site could have a route such as misitio.com/en/page, where en represents the English language.

  2. Domain Routing: Each locale has its own domain. Suppose you run a site called nuncaparesdeaprender.com, you would need to acquire domains like nuncaparesdeaprender.es to support Spanish or nuncaparesdeaprender.fr for French. This approach may be more expensive, as it involves the purchase of several domains.

For educational purposes and ease on localhost, it is recommended to use Subpath Routing.

How to configure Next.js to support multiple locales?

To configure Next.js with multiple locales, follow these steps in the next.config.js file:

module.exports = { i18n: { locales: ['en-US', 'en'], // Defines the supported locales. defaultLocale: 'en-US', // Sets the default locale. },}
  • Locale: List of all locales you want to support.
  • Default Locale: The default language when none is specified by the browser.

How to integrate Contentful with locales in Next.js?

Integrating Contentful with Next.js to handle different locales is simple but requires some important steps:

  1. Configure locales in Contentful:

    • Head to the "Locales" section in your Contentful account.
    • Make sure the locales match the ones configured in Next.js.
    • Set a "Fallback Locale", which Contentful will use if the translation is not found in the requested language.
  2. Perform queries with GraphQL:

    • You can use the GraphQL Playground in Contentful to see how data is returned in different languages. When querying, include the locale parameter to specify the desired language.
    query { plant(id: "example-id", locale: "en") { name }}

What are the steps to enable locale in Contentful?

  • Choose a valid name for the locale and make sure to enable it in the API responses.
  • Configure the "Fallback Locale" so that Contentful will return the content in another language if there is no translation.
  • Enable all necessary checks to edit content in different locales.

Testing and Verification

With everything set up, it will be essential to test to verify that Next.js and Contentful are interfaced correctly and that the content is localized properly. Again use the GraphQL playground to test queries in different languages and verify that the information matches the desired translations.

This process not only facilitates the handling of multilingual content, but also ensures a smooth and satisfactory user experience on an international level. Always maintain consistency in your settings between your server, CMS and Next.js to avoid problems, and with these steps you will be ready to take your project to global audiences!

Contributions 6

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

💳 Agregando locales a nuestro contenido y Rutas Internacionalizadas

Apuntes

“El soporte de locales para el contenido depende del CMS Y su API”

  • Con Next.js podemos realizar 2 estrategias para las rutas i18n
    1. Sub-path routing (tenemos el locale antes del path principal)
      1. mi_Website.com/es/products
    2. Domain routing (Basado en un routing de dominios)
      1. mi_Website.es/productos
      2. miWebsite.en/productos
// next.config.js

const config = {
	...,
  i18n: {
    locales: ['en-US', 'es'], // Lista de todos los locales a soportar
    defaultLocale: 'en-US', // Locale por defecto
  },
}
  • Los locales deben de coincidir con los de la API
📌 **RESUMEN:** Para poder agregar diferentes locales en nuestras rutas podemos implementarlo mediante Sub-path routing (El locale antes del path principal) o el domain routing, en el cual debemos de contar con una gran variedad de dominios para cada locale
  • La internacionalización es el proceso de diseñar una aplicación de software para que pueda adaptarse a varios idiomas y regiones sin cambios de ingeniería.
  • La localización es el proceso de adaptar software internacionalizado para una región o idioma específico mediante la traducción del texto y la adición de componentes específicos de la región.
¿Dónde puedo aprender lo basico de Graphql?
i18n para los que no saben, es un internationalization-framework. Abajo les dejo la documentación: <https://www.i18next.com/>

El comando de Git:

git checkout -b dev 6-internacionalizacion

exelente