A multilingual website offers content in more than one language. It's designed to cater to audiences from different linguistic backgrounds, allowing users to select their preferred language, read, and interact with the website's content. 

By targeting user requirements through language-specific content, businesses can create a more inclusive and accessible online presence that satisfies user requirements and drives business growth forward.

Next.js's built-in i18n routing vs the next-intl library

 library supports the management of locales by providing support for translating content into multiple languages. Developers can define a list of supported languages and specify the default language for their application.

Despite their similarities, they also serve different purposes:

Next.js provides native support for internationalized routing.

With Next.js's i18n routing, you can set a default locale and domain-specific locales. Next handles the routing based on the user's preferred language.

The next-intl library provides additional features beyond the basic routing such as translation, message formatting, and date formatting.

Next-intl provides control over how messages are formatted and displayed in different languages allowing for flexibility.

It provides locale management including utilities for managing locales and dynamically switching between languages at runtime.

The choice between the two depends on the project's complexity and user requirements. In this article, we will use the next-intl library for our project.

next-intl integrates with the App Router by using a [locale] used to provide content in different languages. e.g./en, /en/about, etc.

Next, run the following command to install next-intl in your project.

The folder structure should look like this:

We will create a messages folder at the root of our project and create different locales. In our case, we require support for English, Spanish, and French languages. We will create three different JSON files to support these locales.

Here is an example of the en.json file which provides support for English locale.

Empower your transactions,

Unleash the possibilities

Hello world!

Something went wrong!

The next step is to configure a plugin that creates an alias. This alias will allow you to provide your internationalization (i18n) configuration to a Server Component in your project.

 creates a configuration once per request. You can provide messages and other options depending on the user's locale.

: This function is used to dynamically configure internationalization settings based on each incoming request.

: If a locale is not included in the locales array, notFound() is called to return a 404 error. This prevents users from accessing unsupported locales.

: The function then dynamically imports a JSON file based on the locale. This JSON file contains localized messages for the application, structured as 

: This allows the loading of localization messages needed based on the selected locale optimizing the performance of the application.

The middleware matches a locale for the request and, handles redirects and rewrites accordingly.

 function is called with a configuration object. This configuration includes:

: An array of strings representing the locales that your application supports. In this case, it supports English (

: This indicates the default locale to use if the incoming request does not match any of the supported locales or if the locale cannot be determined from the request.

The locale determined by the middleware is accessible through the 

 parameter. It enables the configuration of the document language based on the locale.

With this, you can incorporate translations within your page components.

The param indicates the current language for the user's session. For example, 

  for French. It's essential for determining which translation settings and locale-specific content to present to the user.

Use translations in your components or anywhere else in your app tree. We will use useTransalation in the HomePage component and the header component.

The t() method is accessed through the useTranslation hook from the next-intl hook. It fetches the translated strings based on the selected locale.

: These calls retrieve translated titles from the translation files for display on the homepage.

Here we also import a utility function - (highlightWords) for text manipulation.

To illustrate how using translation works, let's integrate translation capabilities into the Homepga component and the Header component.

We will create a separate language switcher component and import it here.

This component provides an interface for dynamically switching the locale of the application.

The useTransition hook provides a start transition function that handles updates that should be deferred until the next browser render.

The useRouteer hook changes the URL based on the selected language. For example, navigating to 

 displays the English version of the Homepage section.

The useLoacle retrieves the active locale which sets the default value of the select dropdown.

The handleSelect function captures the new language selected by the user and is triggered by the onChange event on the  <select> element.

Translating the plain text based on the selected locale.

The challenge involves adding multilingual functionality to the existing homepage of the Karapay website. Users should be able to switch between English, Spanish, and French versions seamlessly, with all textual content updated accordingly. Completing this challenge will empower the website to cater to a wider global audience and provide a more inclusive user experience.

Github Repo: https://github.com/kodaschool/Multilingual-website-kodaschool/

Dive into our programming articles for insights and tips. Covering a range of topics, they're perfect for learners at any level eager to expand their knowledge.

Building a Multilingual application in Nextjs 14

Mary Maina

topics

table of contents

share

Pro Subscription

Mary Maina

topics

related

share

Related

Next.js file uploads made easy with uploadthing - An alternate to s3 bucket

Next.js and Supabase: How to Store and Serve Images

Build a Multistep form in Next.js powered by React hook form and Zod

Practice Frontend, Android and iOS by building real world projects.