Agregando locales a nuestro contenido y Rutas Internacionalizadas

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!