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.
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.
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.
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.
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:
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
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.
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.
Here are a few points to keep in mind when localizing a website with NextJS:
Obtaining a high-quality translation requires many steps of translation & proofreading, localization 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.
