Next.js Localization: How to Build a Multilingual Website

Table of Contents

Next.js localization has recently become a widely searched keyword. The demand to expand markets and attract new customers through multilingual websites is increasing. This article will guide you on how to build a multilingual website with NextJS.

What is Next.js localization? 

Before getting into details, please take a few minutes to understand the related concepts. Next.js or Next JS is an open-source framework created by Vercel in 2016. Next JS can build React web applications and static websites with fast performance and user-friendly interfaces

Localization is the process of adjusting the content of products, services, applications, or documents to suit a target market. Localization strategies extend beyond linguistic conversion to encompass cultural, color, religious, and other requirements.

The term “Next.js localization” emerged when this framework supported the integration of multiple languages. Now you can easily implement multilingual website projects. Simple installation steps, quick loading, and user-friendly interfaces are advantages of this method. 

This task requires a collaboration between developers and localization specialists. The two teams need to ensure that the translations are compatible with the system and user interface.

Localizing L10n and Internationalizing i18n for Next JS 

When seeking translation services, many terms can cause confusion and misunderstanding. You must have heard about localization (L10n) and internationalization (i18n). These abbreviations are formed by taking the first and last letters in English, the number in the middle represents the remaining number of letters after removing the first and last letters. 

NEXT JS Localization Service - Thao & Co.

Localization refers to the process of adjusting the content in products, applications, or documents so that they can meet all language, cultural, religious, etc. standards of a specific target market. Next.js localization is extremely common when creating a multilingual website with NextJS.

Internationalization is defined as designing and developing product content, applications, or documents to facilitate localization for different target audiences across cultures, regions, or languages. As the number of products and services like games, applications, and websites on the international market continued to grow, Next JS internationalization became a necessity.

A Guide to Setting up a Multilingual Website with Next JS 

An announcement from NextJS states that starting from version 10.0.0, Next.js will support integrating international routing (i18n). All you need to provide is the language you want to convert, the default language, and domain languages, Next.js will automatically handle the routing.

To start Next.js localization process, the first step is to add the i18n configuration to the next.config.js file.

module.exports = {

  i18n: {

    // These are all the locales you want to support in

    // your application

    locales [‘en-US’, ‘fr’, ‘nl-NL’],

    // This is the default locale you want to be used when visiting

    // a non-locale prefixed path e.g. `/hello`

    defaultLocale: ‘en-US’,

    // This is a list of locale domains and the default locale they

    // should handle (these are only required when setting up domain routing)

    // Note: subdomains must be included in the domain value to be matched e.g. “fr.example.com”.

    domains: [

      {

        domain: ‘example.com’,

        defaultLocale: ‘en-US’,

      },

      {

        domain: ‘example.nl’,

        defaultLocale: ‘nl-NL’,

      },

      {

        domain: ‘example.fr’,

        defaultLocale: ‘fr’,

        // an optional http field can also be used to test

        // locale domains locally with http instead of https

        http: true,

      },

    ],

  },

}

Next, there are two ways to handle domains which are Sub-path Routing and Domain Routing:

  1. ● Sub-path Routing

Sub-path Routing will set the language into URL link.

module.exports = {

  i18n: {

    locales [‘en-US’, ‘fr’, ‘nl-NL’],

    defaultLocale: ‘en-US’,

  },

}

In the above configuration, English (en-US), French (fr) and Dutch (nl-NL) will be automatically translated, with English set as the default language. If you have a pages/blog.js link, the following URLs will be available:

/blog

/fr/blog

/nl-nl/blog

  1. ● Domain Routing

Domain Routing allows you to configure the languages provided from different domains.

module.exports = {

  i18n: {

    locales [‘en-US’, ‘fr’, ‘nl-NL’, ‘nl-BE’],

    defaultLocale: ‘en-US’,

    domains: [

      {

        // Note: subdomains must be included in the domain value to be matched

        // e.g. www.example.com should be used if that is the expected hostname

        domain: ‘example.com’,

        defaultLocale: ‘en-US’,

      },

      {

        domain: ‘example.fr’,

        defaultLocale: ‘fr’,

      },

      {

        domain: ‘example.nl’,

        defaultLocale: ‘nl-NL’,

        // specify other locales that should be redirected

        // to this domain

        locales [‘nl-BE’],

      },

    ],

  },

}

For example: if you have a pages/blog.js link, the following urls will be available:

example.com/blog

www.example.com/blog

example.fr/blog

example.nl/blog

example.nl/nl-BE/blog

After adding either of the above configurations, you have successfully configured international routing, including the automatic language detection feature. This means Next.js will automatically detect and navigate users based on the Accept-Language.

NEXT JS Localization - Thao & Co.

 You can run the NextJS application on localhost with the npm run dev command to check. Whenever the browser language setting is changed, NextJS will automatically update accordingly. For example, if the language used is French, the link will be in the form /fr/blog.

In case you want to turn off the automatic language detection, just set localeDetection in the next.config.js file to false.

module.exports = {

  i18n: {

    localeDetection: false,

  },

}

The final step is to add a language switch button. You can use next/link or next/router to perform language switching.

For next/link, a locate can be provided to switch to another language. If no language is provided, the currently active language will be used for client-side navigation. For example:

import Link from ‘next/link’

export default function IndexPage(props) {

  return (

    <Link href=”/another” locale=”fr”>

      To /fr/another

    </Link>

  )

}

When using the next/router methods, you can specify the language to be used through the redirect options. For example:

import { useRouter } from ‘next/router’

export default function IndexPage(props) {

  const router = useRouter()

  return (

    <div

      onClick={() => {

        router.push(‘/another’, ‘/another’, { locale: ‘fr’ })

      }}

    >

      to /fr/another

    </div>

  )

}

Please note that if you only want to change the language while retaining all other information, you can provide the href as an object.

import { useRouter } from ‘next/router’

const router = useRouter()

const { pathname, asPath, query } = router

// change just the locale and maintain all other route information including href’s query

router.push({ pathname, query }, asPath, { locale: nextLocale })

If the href provided already includes the language, you can opt out of automatic language prefix:

import Link from ‘next/link’

export default function IndexPage(props) {

  return (

    <Link href=”/fr/another” locale={false}>

      To /fr/another

    </Link>

  )

}

With just a few simple Next JS i18n configuration steps, you have now built a multilingual website with Next JS. However, these are just basic settings, you can add more customizations by referring to Next JS localization code samples on GitHub to create a tailored version.

Tips for localizing a website with NextJS 

Here are a few points to keep in mind when localizing a website with NextJS:

  1. ● Next JS allows storing selected languages in the NEXT_LOCATE cookie. This cookie can later be used to set the Accept-Language header for automatic language detection. For example: When NEXT_LOCATE=en is set, users will be automatically redirected to the English page until the cookie expires or is deleted.
  2. ● Since Next.js knows what language a user is using, it will automatically add the lang attribute to the <html> tag. Next.js is unaware of page variants, so you can add hreflang meta tags using next/head to inform search engines about the languages used on each page. More details on hreflang tags can be found in Google’s Webmaster guidelines.
  3. Sub-path routing should generally be prioritized over domain routing. The reason for this is that it is less complex to implement and suitable for smaller to medium-sized sites.

Globalize Your Website with Thao & Co.

Translation Services - Thao & Co.

Obtaining a high-quality translation requires many steps of translation & proofreadinglocalization testing, etc. Additionally, when translating a website, it is necessary to ensure SEO, UI/UX factors, etc. Once the translations are complete, they need to be integrated into the website, which will require coding knowledge. 

With the growing demand for internationalization of products like apps, games and websites, Thao & Co. provides optimal solutions for individuals and businesses. Our professional website translation and custom integration services provide standardized translations localized by native experts and support for integration into your CMS system.

As a translation agency with many years of experience in partnering with large domestic and international companies, Thao & Co. understands your challenges. We offer transparent workflows, native translators, marketing experts, experienced programmers, and a proprietary platform for convenient progress tracking and a direct line of communication throughout projects.

Next.js localization is a popular method for building multilingual websites. However, implementation can still pose certain difficulties. For a free consultation on software, application, game, or website translation services, don’t hesitate to contact Thao & Co. through the Get a Quote page, we’ll get back to you as soon as possible.

Source: Thao & Company
Professional Translation and Localization Services in Vietnam
Where Precision Meets Quality Standards
Get in touch
Let us know how we can help!
Our industries
Healthcare
We provide accurate translations of items such as clinical instructions, medical records, articles, product labels and questionnaires.
Advertising + Marketing
Get your message across in any language when we translate your informational materials, instructions and simple promotional content.
Banking + Finance
As you tap new markets, we can translate sales materials, emails, job applications, CVs, legal documents, and entire banking/trading platforms and apps.
Legal
Get fast, precise translation of legal documents, contracts, memos, emails and other forms of communication.
Real Estate + Construction
Our translators have sufficient familiarity with architecture, construction, real estate and civil engineering to help translate relevant documents.
Retail + E-commerce
If you’re selling to global markets, let us translate your sales materials, company announcements and meeting minutes for your international partners.
Travel + Tourism
We can provide general translation of content for internal communications and customer-facing text for hotels, restaurants, travel guides and more.
Entertainment
Relying on our experience translating films, plays and commercials, we give careful attention to word selection and meaning in every project.
Automotive + Aerospace
Look to our specialized linguists to translate and localize user guides, CAD drawings, repair manuals and business contracts.
Manufacturing
Get precise translation of technical terminology whether for instructions, safety, quality control or regulatory compliance.
Manufacturing
Explore new markets for your games once we translate the rules, instructions, storyline, dialog, graphics and technical details.
Education
Empower global education with our translation and localization services. Available for academic transcripts, diplomas, degrees, certificates, websites, apps, and more.
Technology
Our expert localization services are here to get your tech materials, websites, apps, software and other digital products into new markets.
Ready to take the next step? Tell us about your project.

Get a quote