How I translated my Next.js Blog

This post is also available in Spanish here: https://www.infoxicator.com/es/traduciendo-mi-blog-con-next-js

English is my second language and before I was proficient, I always found it really difficult to find tech resources in my own language. That’s why I decided to translate my blog and make all my content available in Spanish.

Internationalization with Next.js

Next.js has made Internationalization (i18n) a breeze with one of the most recent advanced features available in version 10: Internationalized Routing.

From the two options provided by Next.js, I have decided to use Sub-path Routing instead of Domain Routing since I don’t want to create a subdomain for the Spanish version of my blog.

Basic Configuration

next.config.js

This is the only setup required to enable “ Automatic Language Detection”.

The automatic language detection system provided by Next.js will redirect users to the /es path prefix if their browsers are set to Spanish (or any of its regional variations) as their default language. Next.js will look at the Accept-Language HTTP Header and try to set the correct language, however, if the language doesn't match, it will use the default language. For example, if users have German (DE-de) as their browser language, it will set the current language to English (en).

Managing Locale Files

Next.js doesn't prescribe a way of managing your locale data or what i18n library you should use (or if you need a library at all).

For small projects (like in my case) a simple key-value pair JSON file does the job, however, for a large application, a more robust solution is recommended to avoid things like a bloated bundle size.

I have created a folder called locale and created a single JSON file per language. i.e. locale/en.json and locale/es.json

We could use the key to render the value of the translated language without any library, however, I want to use since it is one of the most popular i18n libraries out there.

Add the following configuration to your app.js

In the snippet above, we are wrapping our entire application with the IntlProvider and passing the messages and the locale that we obtained from the useRouter() hook. Now we can use react-intl components like FormatedMessage throughout our application.

Changing The Language

When switching languages, I want to persist the user’s selection so if they visit my blog again it will set the language to their preferred language rather than the locale detected automatically by Next.js.

To achieve this, we can use the Next.js Locale Cookie:

getStaticProps For Each Locale

To render the list of blog posts in the selected language, the locale parameter will be available in getStaticProps so I can pass it to my data fetching function.

For Example:

Search Engine Optimization

Next.js will add a global lang HTML attribute to your site with the current locale, however, if you have a custom _document.js file make sure that you remove any hardcoded lang values you might have set there.

To tell search engines about alternative versions of your posts in different languages, we must set a hreflang meta tag for each language (including the original language) to the head section of our blog posts page.

For Example:

Conclusion

Internationalization (i(18 letters)n) used to be a complex task, however, with the aid of Meta-Frameworks like Next.js and tools like react-intl, providing localised text and translated data to our users has never been easier!.

I hope you enjoy my (translated) content and to my Spanish speaking friends out there, nos vemos pronto!.

--

--

--

👨‍💻Staff Engineer at Postman 🔈 Conference Speaker. ⚛️ Writing about Micro-Frontends and Frontend Architecture at Scale. ❤️ We rise by lifting others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Fake Preloading Images with Bootstrap/Nuxt.js (works most of the time)

3 Must-know fundamentals of ReactJS

My Work with Oppia during GSOC’20

React — Managing chaos with Zustand

Use of Strict Equal Operator With + In JavaScript;

How to make a random cat image generator with React and Cat API

WebdriverIO — Reusable Functions

Components vs Microfrontends. What is the difference?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruben Casas

Ruben Casas

👨‍💻Staff Engineer at Postman 🔈 Conference Speaker. ⚛️ Writing about Micro-Frontends and Frontend Architecture at Scale. ❤️ We rise by lifting others.

More from Medium

NextJs. What Next?

Routing at Next.js vs React.js

Next.JS the comfortzone for React JS developer.

Next.js -The next big thing