Simplifying Your Next.JS App with a Translation Backend

It is essential to have a localization solution in place when creating a website or web application in the modern digital environment. It's important to bear in mind that future expansion into other languages may be required for your product to reach a worldwide audience, even if it is now only available in one language. 

Localization solutions entail modifying your website to comply with the language, cultural, and legal standards of various areas or nations. The content of your website must be translated, images must be culturally appropriate, and local laws must be followed. 

In this article, we'll go over how to use a translation backend to streamline the localization process for your Next.JS app. You will comprehend how to streamline the development process after reading this article.

Are you depending on a package like react-i18n to give your website static translations? While it might be effective, this strategy can make it more difficult for the team to collaborate on translations by handing off copywriting duties to developers. Fortunately, employing a translation backend can aid in resolving these issues and offer the following benefits:

Adopting a translation backend can help your website localization efforts in a variety of ways. It's a good option to take into account for your future project because of its centralized management, quick turnaround, and affordability.

There are several options accessible when looking for the best translation service for your web development project. Although a quick online search can give you a wide range of options, we've compiled a list of some of the top services worth taking into consideration:

Due to its seamless integration with the next-i18next package, Locize is our recommended backend for the purposes of this article. 

Website content may be easily translated using Locize, a robust translation management system with real-time updates and collaborative capabilities to speed up the process. It is a fantastic option for developers searching for an effective and efficient solution due to its straightforward connection with next-i18next.

Using next-i18next and Locize, we'll show you how to set up a translation backend and localization solution for your Next.JS application in this tutorial. Two locales (Portuguese and English) will each have a single translation in our sample app.

Installing the next-i18next package and the i18next-locize-backend package in your Next.JS application is the first step to getting started. After installation, we can build a new project in Locize to support our app.

From the locize dashboard we can select the add project button which will open the following form: 

In this project, we can see that the source language is English and, most importantly, the translations are encoded in i18next (v4) format. When creating our project, we can add a second language that we want to support, as is the case with Portuguese.

The project currently supports English (which was set up when the project was created) and Portuguese. Simply create a namespace (see the image above) and click on it to be taken to the locize translation page in order to begin the translation. In order to enter a translation in key and value format, click "Add segment" on this page.

We now have a single key, common:title, that has a value for each language, and this translation is ready to be used in our application. 

We must build up our application to use locize as a backend service in order to utilise the translations we have already built up. The next-i18next package requires the presence of a next-i18next.config.js configuration file with the required format to achieve this.

1const LocizeBackend = require('i18next-locize-backend/cjs');
2
3
4module.exports = { 
5       backend: {
6               projectId: 'locize-project-id', 
7               referenceLng: 'en'
8       },
9       i18n: {
10              defaultLocale: 'en',
11              locales: ['en']
12       },
13       ns: ['common'],
14       serializeConfig: false,
15       use: [LocizeBackend]
16
17};

Pay attention to the "ns" field in the app settings; it should have the common namespace that we generated. We must have every namespace we intend to use in the project. There are further crucial characteristics to take into account:

This configuration object can be passed to the "appWithTranslation" higher-order component (hoc) from next-i18next as the second argument. Once you complete these steps, your project should be up and running with all the translations available from locize. If desired, you can cache these translations on the server side to enhance your website's performance.

We may optimize our configuration to use a file system cache and retrieve translations more quickly than locize by utilizing the server-side features of Next.js. Two distinct configurations must be made in order to do this. Next-i18next.config.js files will be replaced by a folder containing the following files:

By using this folder structure, we can improve translation retrieval time and take full advantage of Next.js's server-side features.

1{
2     "name": "next-i18next.config.js", 
3     "browser": "./index.js",
4     "main": "./node.js"
5}

To create this node.js file we’ll need to install the i18next-chained-backend and i18next-fs-backend packages. Once those packages are available the config inside the file should look something like this:

1const ChainedBackend = require('i18next-chained-backend') 
2const FSBackend = require('i18next-fs-backend/cjs')
3const LocizeBackend = require('i18next-locize-backend/cjs')
4
5module.exports = { 
6   i18n: {
7    defaultLocale: 'en',
8    locales: ['en', 'pt'], 
9  },
10  backend: { 
11   backends: [
12    FSBackend,
13    LocizeBackend 
14   ],
15   backendOptions: [{ // make sure paths exist
16     loadPath: './public/locales_cache/{{lng}}/{{ns}}.json', 
17     addPath: './public/locales_cache/{{lng}}/{{ns}}.json',
18     expirationTime: 60 * 60 * 1000 // valid for 60 minutes
19   }, {
20     projectId: 'locize-project-id', 
21     referenceLng: 'en'
22   }] 
23 },
24 use: [ChainedBackend], 
25 ns: ['common'], 
26 serializeConfig: false
27}

s shown, the backend setting gives us the freedom to make use of both the locize and file system backends. The retrieval procedure can be made more efficient by including a cache in the selected folder. The cache has been established in this case with a 60-minute validity period. It's crucial to remember that this parameter can be readily changed within the setup, though.

In conclusion, incorporating a translation backend into your Next.js project has many benefits when it comes to localizing your application. Developers may quickly and efficiently optimize the localization process for their software by utilizing cutting-edge features like real-time translation management and collaborative capabilities.

You can follow the instructions in this article to set up a translation backend for your application. Even if you're working on an ongoing project, locize's web interface provides support for importing your current translation files (although it doesn't have a bulk import feature). The integration procedure is further made simpler by locize's seamless connection with Next.js. Additionally, you are urged to look at the numerous locize plugins, like the one for Figma, which can further improve your translation experience.

Make sure to follow us on our social channels so you can keep up-to-date with our activities, and make sure you tune in to the Substack frequently so you can continue reading everything we create! 

If you have read enough, and feel like you want to work with us and develop your product with our team, we would love to hear from you.

Want to know more, get in touch!