How to Create a Multilingual Site in Next.js With next-i18next (2023)

How to Create a Multilingual Site in Next.js With next-i18next (1)

Next.js provides built-in internationalized routing capabilities. At the same time, it does not offer a translation content management system. All it does is keep your locales and URLs synchronized. To actually create a multilingual site in Next.js, you need to handle the translations yourself. That is cumbersome and boilerplate. Thankfully, there is next-i18next, a Next.js 18n library that makes localization easier.

At the end of this tutorial, you will know how to set up i18n in Next.js. Let’s get started!

What Is next-i18next?

next-i18next is a full-featured localization framework for Next.js applications. It provides an easy way to manage internationalization and localization. Set it up and you can start adding your translated content into some JSON files. The library with take care of the rest.

The framework relies on i18next and react-i18next. These are the two most popular i18n libraries for JavaScript and React, respectively. In detail, next-i18next adds support for server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR). Note that if you are using Next.js 13 with the app directory, you do not need next-i18next. You can directly use i18next and react-i18next as explained in the guide mentioned in the documentation.

With next-i18next, you can build a Next.js site that supports multiple languages with no effort. Check out what it has to offer in the official live demo!

Why Is next-i18next Better Than Other i18n Libraries?

There are many Next.js i18n libraries available. For example, react-intl has millions of weekly downloads. Yet, none of them is as complete as next-i18next. Specifically, it is easy to use, requires little setup, and offers a lot of features. This is what makes it the best Next.js i18n library.

Integrating next-i18next into a Next.js app takes only a few steps. Configuring it is even simpler. You can then start passing translations to your page-level components as props through getServerSideProps() or getStaticProps(). This complements the internationalized routing functionality offered by Next.js, equipping you with everything you need to deal with localized content.

Some key features provided by next-i18next include:

  • Support for SSR and SSG
  • Components and hooks to translate your React components
  • Code-splitting capabilities with translations stored in JSON files and not in components
  • Customizable language-switching behavior
  • Support for placeholders, pluralization, and namespaces from i18next
  • Automatic language detection based on user’s browser language

Overall, next-i18next is a powerful and flexible i18n framework. It is now time to learn how to use it to build a multi-language Next.js site!

(Video) Translate website content using Next.js internationalization and next-i18next

How to Set Up next-i18next in Next.js

In this step-by-step section, you will see how to integrate next-i18next into an existing Next.js site.


To follow this tutorial, you first need a Next.js app to localize. If you want to start from scratch, you can initialize a Next.js project with:

npx create-next-app@latestCode language: CSS (css)

Answer all questions, wait for the dependencies to be installed, and run the command below to launch the development server:

npm run dev

If the initialization process terminated as expected, you should be seeing the defaultCreate Next Apppage that follows:

How to Create a Multilingual Site in Next.js With next-i18next (2)

Fantastic! You now have a Next.js project ready to be turned into a multilingual site!

Install next-i18next

Add next-i18next to your project’s dependencies with:

npm install next-i18next react-i18next i18next

Note that the installation command also involves react-i18next and i18next. This is because those two libraries are next-i18next‘s peer dependencies. In other words, next-i18next will not work without them.

Configure Your Next.js App

Create a next-i18next.config.js file in the root of your project. That is the configuration file required by next-i18next. Initialize it as follows:

// next-i18next.config.jsmodule.exports = { i18n: { // all the locales supported in the application locales: ['en', 'it', 'es'], // the default locale to be used when visiting // a non-localized route (e.g. `/about`)  defaultLocale: 'en' },}Code language: JavaScript (javascript)

This file has to export an i18n object with a structure as defined by Next.js. In particular, that should contain a locales array with the languages supported by your site and a defaultLocale variable with one of the locales included in the array. Note that locales must be specified using their UTS locale identifiers.

To enable the Next.js localized routing feature, you then need to pass the i18n object to the next.config.js file:

(Video) Multilingual Sites with Next.js 13 (using next-i18next & Prismic)

// next.config.jsconst { i18n } = require('./next-i18next.config') const nextConfig = { i18n, reactStrictMode: true,}module.exports = nextConfigCode language: JavaScript (javascript)

Finally, update your src/pages/_app.js file with this code:

// src/pages/_app.jsimport { appWithTranslation } from 'next-i18next'const App = ({ Component, pageProps }) => ( <Component {...pageProps} />)export default appWithTranslation(App)Code language: JavaScript (javascript)

In detail, you need to wrap your top-level App component with appWithTranslation(). This is a React HOC (High-Order Component) that enables the i18n features exposed by next-i18next globally in your Next.js app.

Perfect! Your Next.js app is now ready to accept some translation content.

Structure Your Project

next-i18next expects your translation JSON files to be organized in the public folder as such:

public └── locales ├── en | └── common.json ├── es | └── common.json └── it └── common.jsonCode language: PHP (php)

You can customize this default behavior by setting the localePath and localeStructure values in your next-i18next.config.js file.

This is what your project structure now looks like:

How to Create a Multilingual Site in Next.js With next-i18next (3)

Note the structure of the locales folder in the public directory. For now, the common.json files are empty.

Define a Localized Page

It is now time to build a Next.js page with some multilingual content. Modify the home page of your site by updating the src/pages/index.js file:

// src/pages/index.jsimport { serverSideTranslations } from 'next-i18next/serverSideTranslations'import { useTranslation } from 'next-i18next'export default function Home() { const { t } = useTranslation() return ( <> <h1>{t("HELLO_WORLD")}</h1> </> )}export async function getStaticProps(context) { // extract the locale identifier from the URL const { locale } = context return { props: { // pass the translation props to the page component ...(await serverSideTranslations(locale)), }, }}Code language: JavaScript (javascript)

Let’s understand how this component works, breaking it down into smaller steps.

The getStaticProps() Next.js function takes care of defining the rendering strategy for the page. As explained in the official doc, you can retrieve the current locale read from the page URL from the context provided to the function. In particular, /, /es, and /it all redirect to the home page, but:

(Video) Internationalization (i18n) with Next.js!

  • In /, locale is en because defaultLocale is en
  • In /es, locale is es
  • In /it, locale is it

This is how the Next.js internationalization routing functionality works.

Then, the serverSideTranslations() HOC from next-i18next accepts the locale as a parameter and is responsible for passing translations and configuration options as props to the frontend component pages. You need to add the result of this function to the props of any page that requires translations.

Keep in mind that you can use this same backend logic in both getStaticProps() or getServerSideProps().

The page-level component or any components under its tree can now use the useTranslation() hook from next-i18next. As stressed in the doc, do not import useTranslation() from react-i18next. This hook returns the t function, which accepts a key string and returns the value read from the corresponding common.json translation file. If no matching translations are found, it returns the key string.

Verify that behavior by launching the development server with:

npm run dev 

Open http://localhost:3000 in your browser.

Since all common.json file are empty, no matter what /, /es, or /it page you visit, you will always see:

How to Create a Multilingual Site in Next.js With next-i18next (4)

Time to add some translations!

Translate Your Content

In your common.json files, add a HELLO_WORLD key:

  • /en/common.json: { "HELLO_WORLD": "Hello, World!" }
  • /es/common.json: { "HELLO_WORLD": "¡Hola, mundo!" }
  • /it/common.json: { "HELLO_WORLD": "Ciao, mondo!" }

Do not forget that every time you modify something in the public folder, you need to restart the development server to see the changes. Kill the current instance and relaunch it.

(Video) Internationalization (i18n) your Nextjs 13 app using i18next

Multilingual site in Next.JS: last steps

Open the three localized versions of your home page in your browser, you will see:

http://localhost:3000/: How to Create a Multilingual Site in Next.js With next-i18next (5)

http://localhost:3000/es: How to Create a Multilingual Site in Next.js With next-i18next (6)

http://localhost:3000/it: How to Create a Multilingual Site in Next.js With next-i18next (7)

Et voilà! You just learn how to build a multilingual site in Next.js!

You can find the entire code of the i18n Next.js sample app developed here in the GitHub repository supporting the tutorial. Clone it and launch the blog locally with:

git clone i18n-next-demonpm inpm run devCode language: PHP (php)

Visit http://localhost:3000 and enjoy your localized demo app!


In this article, you saw how to create a multi-language app in Next.js. With the help of next-i18next, you can easily implement i18n in Next.js, making it easy to integrate translated content into your site.

First, you understood what i18n features Next.js natively offers and why you need an extra dependency to handle translation logic. You learned why next-i18next is the best i18n library for that, and how to set it up in a step-by-step tutorial. Building a localized site in Next.js has never been easier!

Thanks for reading! We hope you found this article helpful!

(Video) Next.js Internationalization with next-i18next and Internationalized Routing (Full Walkthrough)

You might also want to read about How to Create an MDX Blog in TypeScript With Next.js


How to implement multilingual in next js? ›

Let's dive in!
  1. Step 1: Create a New Next. js Project. ...
  2. Step 2: Install Required Dependencies. For internationalization, we'll use the next-i18next library. ...
  3. Step 3: Configure Internationalization. ...
  4. Step 4: Create Translation Files. ...
  5. Step 5: Modify _app. ...
  6. Step 6: Update the index.js Page. ...
  7. Step 7: Test Your Site.
May 4, 2023

How do I Internationalize NextJS? ›

Table of contents
  1. Create a new NextJS application.
  2. Install Next-Translate in your Next.js project.
  3. Setup Next-Translate in the Next JS configuration file.
  4. Create an i18n configuration for Next-Translate.
  5. Create the NextJS translation files.
  6. Display your first internationalized text.
Apr 10, 2022

What is next JS internationalization routing? ›

Next.js enables you to configure the routing and rendering of content to support multiple languages. Making your site adaptive to different locales includes translated content (localization) and internationalized routes.

What is the next-translate plugin? ›

The next-translate-plugin is a tool that allows developers to efficiently handle translations on a page-by-page basis during the build process. It is distinct from the next-translate package, which allows developers to access the translations in the code where it is needed.

Does Next.js still use Webpack? ›

Next. js has adopted webpack 5 as the default for compilation. We've spent a lot of effort into ensuring the transition from webpack 4 to 5 will be as smooth as possible.

How do I internationalize an application? ›

How to Internationalize and Localize an App?
  1. Transform Content into Strings. Content should not be hardcoded inside the app. ...
  2. Translate the Entire Content. ...
  3. Don't Forget About the Following. ...
  4. Create a Flexible Design. ...
  5. Localize Images and Videos Too. ...
  6. Test on Emulators Before Launch. ...
  7. Push it to the App Store.
Jan 27, 2023

What is the difference between Next.js routing and React routing? ›

React Router and Next. js are two commonly used tools for routing in React apps. Although React Router is an independent library, Next. js includes routing functionality built-in, as well as additional features such as server-side rendering and automatic code splitting.

Is Next.js multi threaded? ›

Introduction. Node.js runs JavaScript code in a single thread, which means that your code can only do one task at a time. However, Node.js itself is multithreaded and provides hidden threads through the libuv library, which handles I/O operations like reading files from a disk or network requests.

Does Next.js have middleware? ›

Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly. Middleware runs before cached content and routes are matched.

What is multi language translate plugin? ›

Multilanguage plugin is a great way to translate your WordPress website to other languages. Add translated content to pages, posts, widgets, menus, custom post types, taxonomies, etc. Let your visitors switch languages and browse content in their language. Create and manage your multilingual website today!

Are translators being replaced? ›

We covered this topic a few years ago but, in short, the answer remains the same. No, AI will never replace human translators because machines are unable to capture the nuance that comes from each language's different grammatical rules, semantics, syntax and cultural influence.

How do I add Google translator to my next JS project? ›

Create a new file named GoogleTranslate. js in your project's src folder. In this file, we will define our React component. To load the Google Translate script, we will use the useEffect hook, we will pass an empty array as the first argument, so that this effect runs only once when the component is first rendered.

How do I create a multi language? ›

Seven Best Practices for Creating a Multi Language Website
  1. Implement Multilingual SEO to Rank Your Site in Different Languages. ...
  2. Use an Optimized Multilingual URL Structure. ...
  3. Pay Attention to Page Load Times. ...
  4. Add a User-Friendly Language Switcher. ...
  5. Automatically Detect Visitors' Languages.
May 4, 2023

What makes multilingual Bert multilingual? ›

Recently, multilingual BERT works remarkably well on cross-lingual transfer tasks, superior to static non-contextualized word embeddings. In this work, we provide an in-depth experimental study to supplement the existing literature of cross-lingual ability.

How do multilingual chatbots work? ›

A multilingual chatbot provides online shoppers with live chat and automated support in multiple languages through messaging apps such as Facebook Messenger or on websites. It uses artificial intelligence to answer questions and perform simple tasks in a customer's preferred language.

Is Next.js better than Angular? ›

Angular is built entirely on TypeScript, so using TypeScript alongside Angular won't be a problem. Meanwhile, Next. js offers a TypeScript-integrated experience that includes zero-configuration setup and built-in types for pages, APIs, and more.

Is Next.js better than WordPress? ›

In summary, React and Next. js offer a superior combination of performance, flexibility, and scalability compared to WordPress and Bubble. Their modular, component-based architecture simplifies the development process and allows for the creation of fully customized web applications.

What is the difference between i18n and localization? ›

Internationalization (i18n) is the process of designing and developing software or products that can be adapted to different languages and cultures, while localization (l10n) is the process of adapting a product or content for a specific locale or market.

Why is internationalization called i18n? ›

"I18n" is an abbreviation for the word "internationalization". The term "i18n" is derived from its spelling as the letter "i" plus 18 letters plus the letter "n". Technically, the term is not an acronym, as acronyms represent expressions that are derived from the first letters of words.

What is the purpose of i18n? ›

Internationalization (i18n) is the process of preparing software to support local languages and cultural settings. An internationalized product supports the requirements of local markets around the world, functioning more appropriately based on local norms, and better meeting in-country user expectations.

Which is faster React or NextJs? ›

The major difference between Next JS and React JS is performance. If we talk about Next. js applications, they are extremely fast because of the static destinations and server-side rendering. Of course, they are viable due to many performance enhancement features, such as Image Optimization.

Why React JS is better than next JS? ›

Choosing between Next. js and React depends on the specific needs of your project. If you're building a large-scale web application that requires complex routing and heavily data-driven components, React may be a better option. If you're looking to build a JAMstack application or a static site, Next.

Do I need react router with NextJs? ›

In React JS, we would install a package called react-router-dom to implement routing inside the application. But Next JS has its own inbuilt router from the next/link , with which we can navigate between the pages. Before using the next/link , we need to set up the different pages/routes inside the pages folder.

Is Next.js only for static sites? ›

In Next.js, a route can be statically or dynamically rendered. In a static route, components are rendered on the server at build time. The result of the work is cached and reused on subsequent requests. In a dynamic route, components are rendered on the server at request time.

Is Next.js the fastest? ›

Speed - Applications built with Next. js are fast because of Server-side Rendering and Static Generation, providing a smarter way to handle data. Server-side rendering will only be as fast as the server is handling requests.

Is Next.js a full stack framework? ›

Next. js is a React framework that makes building powerful full stack (front end + back end) applications a lot easier. The team behind Next. js recently released Next.

Can Next.js run serverless? ›

Next.js has support for API Routes, which let you easily create an API endpoint as a Node.js serverless function. Although it's not necessary for our blog app, we'll briefly talk about how to use it in this lesson.

Does Next.js use client side routing? ›

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application. A React component called Link is provided to do this client-side route transition.

Does Next.js require Redux? ›

Reason 1: NextJS Architecture Is Not Suitable for Redux.

In NextJS, we have the concepts of getServerSideProps and getStaticProps which can populate the data required for a page before rendering. So, using Redux in NextJS often doesn't make that much sense.

Is Polylang better than WPML? ›

WPML: A Quick Overview

WPML works similarly to Polylang. They both use the WordPress back-end to let you manage your translated content. But the big difference is that you can use machine translation with WPML. This helps your translators finish their project more efficiently.

What are the three 3 types of translators to convert programming languages? ›

Generally, there are three types of translator:
  • compilers.
  • interpreters.
  • assemblers.

How do I activate language translation? ›

Tap the microphone icon at the top of the screen and speak your word or phrase into the app. Google Translate then translates your words in the target language. Tap the Speaker icon to hear the translation. Another option is to tap the Transcribe icon and then start speaking.

Why so many translators hate translation technology? ›

The process of translation is complex and requires the human touch. Machines have not yet been able to replicate the use of language in the way humans are able to do so. Translation has many layers and the nuances of each language are not something that can be programmed into a translation tool.

Which is faster translator than interpreter? ›

Compiled program runs faster. Since it consumes less time, it is much faster than an interpreter.

Does the FBI have translators? ›

Our language professionals specialize in translating written or audio materials, assisting special agents with interviews, and providing cultural expertise to support investigations.

How do I integrate Google Translate API to my whole website? ›

How To Use the Google Translate API with JavaScript: Build a Web Form with Translation Features
  1. Create the Static HTML. We start with the bare-bones HTML page. ...
  2. Add Dropdown Click Handler. ...
  3. Add JQuery AJAX Call To Invoke Google Translate API. ...
  4. Add The Form Placeholder Update Code. ...
  5. Add Login for “click” Event Handler.
Jul 20, 2021

How do I embed a language translator in my website? ›

How To Add Google Translate Button On Your Webpage?
  1. Once the project is created, navigate to the "APIs & Services" section and click on "Enable APIs and Services".
  2. Search for the "Google Translate API" and enable it for your project.
  3. Go to the "Credentials" section and create a new API key.
Feb 9, 2023

How do I integrate translator on my website? ›

In your browser, go to Google Translate. At the top, click Websites. We recommend setting the original language to “Detect language.” In the “Website,” enter a URL.

How do I internationalize my React website? ›

How to set up React Internationalization with i18next – A complete tutorial
  1. Start by creating a React App. ...
  2. Install the required dependencies. ...
  3. Build the Main Page. ...
  4. Set up i18next for React Internationalization. ...
  5. Add Translation Files. ...
  6. The i18n instance is ready to be used. ...
  7. Translate Strings by using the useTranslation function.
Mar 29, 2022

How to install Next.js in windows globally? ›

Install Next. js
  1. Open a WSL command line (ie. ...
  2. Create a new project folder: mkdir NextProjects and enter that directory: cd NextProjects .
  3. Install Next. ...
  4. Once the package has been installed, change directories into your new app folder, cd my-next-app , then use code . to open your Next.
Jun 23, 2022

How do I host Next.js app locally? ›

Next. js - Deployment
  1. Prepare Build. Run the following command to prepare production ready build −. npm run build > nextjs@1. ...
  2. Start the server. Run the following command to start production server −. ...
  3. Verify Output. Open localhost:3000/api/user in a browser and you will see the following output.

What is the difference between i18n and i18next? ›

So what is the difference? ​ i18n is an abbreviation that is used across all the programming languages and software development world. i18next is a JS framework/set of libraries.

What is the difference between i18next and Formatjs? ›

formatjs comes with built in formatting using the browsers intl API (depending on browser you will have to polyfill that). i18next comes with a custom formatter function developers can define to handle formats (using the intl API or moment. js depending on the need of developers).

How to implement i18n in React js? ›

React i18n: A step-by-step guide to React-intl
  1. Popular libraries for React i18n.
  2. Getting started with React-intl.
  3. Using arguments in your translated text.
  4. Building a locale selector to switch between locales.
  5. Localizing date, time, numbers, and currencies to different locales.
  6. Pluralization with React-intl.
Mar 24, 2022

How can I expand my product internationally? ›

  1. Consider international trade as a growth opportunity.
  2. Investigate franchising for global expansion.
  3. Evaluate your competition's international business.
  4. Develop a master international marketing plan.
  5. Dedicate personnel, a budget, and appropriate procedures.

How can I expand my product globally? ›

5 elements of building a global expansion strategy
  1. Choosing the right strategic model. ...
  2. Determining the right markets and how to enter them. ...
  3. Hiring a team with a global-first mindset. ...
  4. Understanding your target markets. ...
  5. Managing localization and translation.

What are the 5 stages of internationalization? ›

5. The stages of going international are as follows: exporting, licensing, joint ventures, direct investment, US commercial centers, trade intermediaries, and alliances.

Is Next.js only for server-side rendering? ›

With Next.js, three types of rendering methods are available: Server-Side Rendering, Static Site Generation, and Client-Side Rendering.

Does Next.js need a server? ›

By default, Next.js includes its own server with next start . If you have an existing backend, you can still use it with Next.js (this is not a custom server). A custom Next.js server allows you to start a server 100% programmatically in order to use custom server patterns.

How to build a Next.js website? ›

Build a website with Next. js
  1. Prerequisites.
  2. Step 1: Create the app.
  3. Step 2: Run the app locally.
  4. Step 3: Configure your environment.
  5. Step 4: Build the backend.
  6. Step 5: Build the frontend.
  7. Step 6: Add basic styles.
  8. Step 7: Configure image hosts.

What is the difference between next dev and next start? ›

js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.

How do I start Next.js app on a different port? ›

If you want to run the project in a different port after it is built (after running npm run build ), you can do so by updating the start script: "start": "next start -p 8090", Now you can run npm start to see the page served at port 8090.


1. i18n Language Translation between English and French (Next.js 13)
(Developer Resources)
2. Next.js - Multi Language
(Watch and Learn)
3. React Multi Language App - i18next Tutorial
4. How To Implement Multi-Language Translate In React Hooks & I18NEXT
(Seema Holiday Developer)
5. Next.js 13 App Directory & i18n - Full Tutorial
(Tuomo Kankaanpää)
6. Next.js 10 Internationalization (i18n)
(Patrick M)


Top Articles
Latest Posts
Article information

Author: Duncan Muller

Last Updated: 09/22/2023

Views: 6389

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Duncan Muller

Birthday: 1997-01-13

Address: Apt. 505 914 Phillip Crossroad, O'Konborough, NV 62411

Phone: +8555305800947

Job: Construction Agent

Hobby: Shopping, Table tennis, Snowboarding, Rafting, Motor sports, Homebrewing, Taxidermy

Introduction: My name is Duncan Muller, I am a enchanting, good, gentle, modern, tasty, nice, elegant person who loves writing and wants to share my knowledge and understanding with you.