Forem: Kinga

How to translate NextJS app with next-i18next?

Kinga — Wed, 25 May 2022 09:10:21 +0000

NextJS, a well-known framework among React developers, provides multiple libraries that create a very developer-friendly environment. The most popular ones are i18Next, next-translate and, our main focus in this blog post, next-18next, a translation library that does a fantastic job helping in translation management. The following blog post will show you how to set up next-i18n in your NextJS app and manage translations with SimpleLocalize. Take a look at our demo app for the reference.

About next-i18next

Next-i18next is a NextJS framework that completes and expands the possibilities of NextJS basic i18n setup, which focuses mainly on automation of i18n routing using locales. Next-i18next uses i18next and react-i18next at its core, but it is simple to install, and the configuration takes only a few steps.

Next-i18next offers additional benefits for NextJS app localization, like:

easy integration with translation content management like SimpleLocalize
components/hooks for React components translation
production ready with SSG/SSR support (Static Site Generation and Server-Side Rendering)
allows namespaces
customizable interpolation
supports code-splitting
easy setup and configuration

The standard file structure for next-i18next with namespaces will look like this:

.
├── en
│   ├── common.json
│   └── home.json
├── es
│   ├── common.json
│   └── home.json
├── it
│   ├── common.json
│   └── home.json
└── pt_PT
    ├── common.json
    └── home.json

There are four languages in our app (en, es, it and pt_PT) and two namespaces, common and home. A namespace is usually one page of your website or app. In such a multiple-file setup, next-i18next loads only the translations that it needs to display from a selected locale.

Next-i18next configuration

The basic next-i18next configuration takes only few steps and will allow you to improve translation management in your app. See the below step-by-step guide to get started.

Install next-i18next

Use the simple command below to start with next-i18next installation with NPM or Yarn:

npm install --save next-i18next

Create i18n configuration file

Now, create a configuration file in the project's root, ./next-i18next.config.js.

// 📦 file: ./next-i18next.config.js

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'it', 'pt_PT'],
  },
};

Add next-i18next to your NextJS app

The last step in the configuration is importing next-i18next configuration into next.config.js file.

// 📦 file: ./next.config.js

const {i18n} = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n
}

module.exports = nextConfig

Create your file structure

When next-i18next is installed and configured, create your file structure for translations with languages and namespaces. Check the standard structure we described at the beginning of this blog post.

The root directory for your translations is /locales/{lang}/{ns}.json where lang is your locale (en, es, it, pt) and ns is your namespace (common, home).

How to manage next-i18next translation files?

Next-i18next is a great framework which makes translation management way easier. Use it together with SimpleLocalize translation editor to manage localization process of your app like a pro. 😎

With SimpleLocalize, you can easily add new languages, manage existing translations and even auto-translate all translations! See how to get started and connect your NextJS app with next-i18next and SimpleLocalize.

Install SimpleLocalize CLI

Use SimpleLocalize CLI to easily extract translation keys from your project and upload them to SimpleLocalize translation editor.

Issue the command below to start the installation.

curl -s https://get.simplelocalize.io/2.0/install | bash

Next, create a configuration file that will integrate your project with your SimpleLocalize account in no time.

# 📦 file: ./simplelocalize.yml
apiKey: YOUR_PROJECT_API_KEY
downloadFormat: single-language-json
downloadPath: ./locales/{lang}/{ns}.json

uploadFormat: single-language-json
uploadPath: ./locales/{lang}/{ns}.json

Upload your translation files to SimpleLocalize

To upload your translations to SimpleLocalize project, use the installed CLI by running the command below:

simplelocalize upload

Or check more import options available for multiple file formats.

Translate your app in SimpleLocalize online editor

Now, the best part of translation management begins. Log in to your SimpleLocalize account, open your project and start managing your translations. Use SimpleLocalize online translation editor to edit translations, add more languages, or translate them automatically with DeepL or Google Translate. Share the project with your team members and send access to translators using intuitive access sharing options.

Download translations to your app

When you are done with editing your translation, download localized files using CLI, or with one of multiple supported file format.

simplelocalize download

Next-i18next demo app

To try out how next-i18next goes with NextJS and SimpleLocalize and check an example of NextJS localization, run our demo app locally on your computer. Download the files from Github repository and test how it works.

Localize your NextJS app with SimpleLocalize

App or website localization can be a challenging task, but you can make it a pleasant experience with great tools and localization frameworks. NextJS has a variety of external libraries that create a comfortable base for your work. Not only next-i18next, but also next-translate or next-intl and much more. Integrating your app with SimpleLocalize will improve your satisfaction during your app localization process.

The complete guide to managing translation projects with Excel

Kinga — Tue, 19 Apr 2022 12:03:00 +0000

Excel is a very popular tool for translation management, especially in smaller projects. It can be used to maintain an overview of translation keys, translators, languages, and deliverables at the same time.

The benefits of Excel are that it is flexible, collaborative, scalable, and easy to use. It can meet the needs of small-scale translation projects as well as projects with many active translators and large scale translations.

How to use Excel as a translation management tool

Excel is a great tool to start translation management in a new project. With a simple Excel file, you can check current translation version, progress of translating new keys or languages, and share the file easily with your team members.

How to create a spreadsheet for project translations

How to get started? Simply create a new file in Excel or Google Sheets and start by naming your columns. The best way is to extract or copy translation keys from your project, and put them in the first column.

Next, add language columns and their translations in corresponding cells. Have a look at the sample translation for our PlaceFlare app. Quite easy, right?

This is a basic and simple translation template which will work perfectly for your project.

Here are some useful tips for translating in Excel:

Freeze key column to easily scroll between languages if there are many.
Add an extra column where you put a screenshot or image of the translated area — sometimes you may not remember where the key came from. With the screenshot, you can easily associate the key and its location.
Use international codes for naming language columns (e.g., en, es) together with its locale like en-GB, es-ES, es-CL. It will be easier to start with internationalization sooner than deal with it later.
Make one language your main one and fully translate it first. It will be a base for translating other languages.

How to work with Excel translation files?

An Excel file is a great tool for translations, but it still needs to be uploaded to your app or website. The file allows you to control easily updated texts, add languages and modify translations, but it doesn't connect directly with the source code.

Usually you need to convert the Excel file to JSON. Remember that when translation changes, there is a new feature or update, you need to edit the file and give the updated version to your dev team to replace the existing translations in the code.

Auto-translation in Excel

Today, we can use a variety of online resources to automatically translate texts with a very high level of precision. The most popular tools online are DeepL and Google Translate. You can use them as a great help with translating texts, or use built-in translation features or plugins. Here are some examples of auto-translation option for Excel files:

Google Sheets translation formula

You can easily translate text in Google Sheets with integrated formula from Google Translate. Just type in a selected cell this formula:
=GOOGLETRANSLATE(cell to translate, “source language”, “target language”), for example:

Then spread the formula for the entire column and work the same way for other languages.

Microsoft Excel Translate

Microsoft Excel has a special function for automatic translations, called Translate. You will find it under Review tab. Check how to use this option in the official Excel translation guide.

Auto-translation with DeepL or Google Translate with SimpleLocalize

Instead of the manual work with Excel options, you can use a translation management tool which has dedicated options for seamless automatic translations.

How it works?
Login to SimpleLocalize with free Community plan and create your project. Then, with one click, upload your existing Excel file and hit Start auto translation button.

SimpleLocalize will auto translate with Google Translate or DeepL for selected languages. In a few seconds, you can have your project fully translated and ready to go!

When your translations are ready, you can export them to many supported formats, also Excel, or upload translations automatically with CLI.

Pros and Cons of using spreadsheets for translation Management

Using spreadsheets as translation management tool is a popular choice for many projects, but it has its pros and cons, especially compared with a dedicated translation app:

Pros:

simple to import and export data
helps to track changes in translation file
easy to use and well known for everyone
allows sharing files with the team
no or very low cost

Cons:

a lot of manual work with copy-pasting texts and formulas
not so user-friendly and simple enough for translations (not designed to be a translation management tool)
requires frequent file changes and manual uploads of new translations
difficult to keep track on new translations and removing not used translation keys as its very time-consuming task

Easy Excel file translation with SimpleLocalize

SimpleLocalize is a simple, intuitive way to manage internationalization in Excel. It's data-driven, easy to use, and saves time on tedious processes that are otherwise difficult to automate.

Import your current Excel files to SimpleLocalize and start translating your projects efficiently with auto translation features. Start now with our free Community plan and check how SimpleLocalize can help you in your work!

How to translate NextJS application with next-translate?

Kinga — Mon, 18 Apr 2022 19:46:20 +0000

NextJS, as a very popular framework among React programmers, offers a variety of features and external libraries, that create a very developer-friendly environment. One of them is next-translate, a translation library that well known for its simple set up and use. In this blog post, you will learn to configure next-translate in your NextJS app, and to manage translations with SimpleLocalize assist.

About next-translate

Next-translate is a great choice for managing your translations in your NextJS application. It is easy to configure and use, even for beginners. It supports basic internationalization (i18n) like plurals or Trans component (to use HTML inside translated text), loads only necessary translations which extremely saves your app memory, and it doesn't take a lot of storage.

The library uses namespaces that allow you to split translations into multiple files. The standard file structure looks like this:

.
├── en
│   ├── common.json
│   └── home.json
├── es
│   ├── common.json
│   └── home.json
├── pl
│   ├── common.json
│   └── home.json
└── fr
    ├── common.json
    └── home.json

There are four languages in our app (en, es, fr and pl) and two namespaces, common and home. A namespace is usually one page of your website or app. Such file structure is clear and easy to manage. Thanks to this setup, next-translate will only load the translations that are needed to display translated content in a selected locale.

Next-translate configuration

The configuration of next-translate takes only a few steps, and they are straightforward to follow. See below the step-by-step setup for your NextJS app.

Install next-translate

To get started, install next-translate. You can do that with either NPM or Yarn. Simply run the command in your console.

npm install --save next-translate

Create i18n configuration file

Create a configuration file, i18n.json, in your project's root. It will look like below, where you set the locales you will use in your project, the default language and your namespaces (one for each page).

{
  "locales": ["en", "es", "fr", "pl"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home"]
  }
}

Create your namespaces file structure

The next step is to create your file structure with languages and namespaces. Check the example above for the file structure.

The root directory for your translations is /locales/{lang}/{ns}.json where lang is your locale (en, es, fr, pl) and ns is your namespace (common, home).

Add next-translate to your app

The last step of the configuration of next-translate is to add it to your app, to next.config.js file.

// 📦 file: ./next.config.js
const nextTranslate = require('next-translate')

module.exports = nextTranslate({
  webpack: (config, { isServer, webpack }) => {
    return config;
  }
})

And that's all. With those four steps, you are ready to translate your app with SimpleLocalize.

How to manage next-translate translation files?

SimpleLocalize can help you translate your keys automatically and manage them in a great translation editor. Adding a new language will become as effortless as you could ever imagine. How to get started, then?

Install SimpleLocalize CLI

SimpleLocalize CLI will get translation files from your project, extract them and upload to SimpleLocalize.

Run the command below to start the installation.

curl -s https://get.simplelocalize.io/2.0/install | bash

Next, create a configuration file to smoothly integrate your project with your SimpleLocalize account.

# 📦 file: ./simplelocalize.yml
apiKey: YOUR_PROJECT_API_KEY
downloadFormat: single-language-json
downloadPath: ./locales/{lang}/{ns}.json

uploadFormat: single-language-json
uploadPath: ./locales/{lang}/{ns}.json

Upload translations to SimpleLocalize

You can use the installed CLI to upload your translation files to your project in
SimpleLocalize. Run the command below:

simplelocalize upload

Use SimpleLocalize to translate your app

Now, the fun begins. Use SimpleLocalize translation editor to change your translations, add new languages, or translate the keys automatically with DeepL or Google Translate. Translation editor features will help you control translation progress and work with translators within one translation management system.

Download translations to your project

When your translation changes are ready, you can download
them to your project with a CLI command:

simplelocalize download

Next-translate demo app

You can try how i18n next-translate library works in a Next JS app with our demo.
Check the GitHub repository and run it locally on your computer.

Localize your NextJS app with SimpleLocalize

Localization of a website or app can be a challenging task. Fortunately, there are great tools that help both developers and translations to do their job with ease. SimpleLocalize connects the workflow for all team members of the project and helps to manage the translation process efficiently. Next-translate is a great start to begin the i18n of your NextJS app.

Internationalization cloud tool for yahoo/react-intl

Kinga — Sun, 28 Apr 2019 20:21:07 +0000

Are you struggling with keeping your app translations up to date and your dreams are filled with empty keys to translate? No worries, we know that feeling very well. To make the whole localisation process easier, we created a simple and effective solution which will improve the quality of translations and help you keep them in track!

How does it work?

SimpleLocalize is a tool created to help developers manage translations in their apps. You can use import tool to upload all keys from your project to a cloud editor, translate them in the easy and clean spreadsheet and that’s all you have to do! Translated keys will be synchronised automatically with your project and vice versa, when you add a new key, it will appear in SimpleLocalize cloud ready to add the translation. You can use SimpleLocalize-CLI to find internationalization keys in the source code automatically, or you can import and export files manually, we support multiple formats, like yahoo/react-intl, Android XML String resources, iOS, Jekyll, Java properties and of course Excel and CSV files. Sounds interesting?

i18n keys auto-discovery feature

SimpleLocalize is created to automatise your work and help you keep all translations up to date. You can create multiple projects and share them with your team or give access to selected projects to the translators team. When their job is completed, you can publish changes to the CDN, refresh your deployed application and voilà! Everything is translated now! You can easily check the progress of the project translations, track the missing keys and use as many languages as you want. Make your app available worldwide thanks to the professional and always updated translations.

How to start?

First, head to SimpleLocalize.io and sign up to get an account, the basic plan it's free, and allows you to handle medium-sized translation repository. Create a new project by adding its name. Select the project type which will define the way the translations will be exported, for example, just CDN is the most common for web applications like ReactJS with yahoo/react-intl.

Open the project and go to Settings. Download configuration properties with the one click on the button Download CLI Properties:

in downloaded file set projectType: property to yahoo/react-intl and it should look now like follows:

uploadToken: <PROJECT_UPLOAD_TOKEN>
projectType: yahoo/react-intl

Read more about CLI projectType property. Save the file in your project root directory. Next, run the CLI tool in your project directory using the command line:

curl -sL https://cdn.simplelocalize.io/cli/simplelocalize | bash

It will search for the keys in your project directory according to projectType defined in the configuration file and send them to the SimpleLocalize cloud where you can easily check how may translations are missing and manage them in one place.

Done, you successfully configured the project!

Add translations and publish changes to check how the keys are updated in your project! When you click Publish button all translations will be sent to your frontend app through the CDN, it works even when the application is deployed. That means you can change text on the page without rebuilding and redeploying the whole application. Pretty useful, huh?

Now you can fetch translations using url like follows:

https://cdn.simplelocalize.io/:projectToken/_latest/:languageKey

or use react-intl-simplelocalize library for ReactJS applications.

Ready to start?

Give it a try and test the new internationalisation tool we have created. It is designed to help you to keep all translations up to date, easily manage new keys and translations changes and work on multiple project at the same time, in one place. Integrate you web or mobile app with SimpleLocalize and work with your clients efficiently without Excel spreadsheets and translations files, instead use the clean and user-friendly interface of SimpleLocalize and control the i18n process in much pleasant way.
Create account, no credit card required!