Internationalization with NextJS+TinaCMS

Overview

Here at TinaCMS, we are still working on our built-in solution for internationalizing your website.

However, for those users that need a simple solution and are willing to navigate a few hurdles, we do have a potential workaround utilizing content sub-folders.

Prerequisites

For this solution, we're going to leverage an advanced feature offered by Next.js: internationalized routing.

https://nextjs.org/docs/advanced-features/i18n-routing

While Next.js is used in our solution, other frameworks could be substituted as long as they offer similar features.

In this Guide

  • Updating the next.config.json to support i18n locales
  • Modifying getStaticPaths to build locale-aware paths
  • Modifying getStaticProps to include locale in the relativePath
  • Creating locale-ready Documents in the CMS

Update next.config.js

First off, we'll need to add the i18n section to the next.config.js along with both locales and a defaultLocale:

https://nextjs.org/docs/advanced-features/i18n-routing#getting-started

defaultLocale provides a fallback for any unsupported locales.

Modify getStaticPaths()

Given that we're adding i18n support to the post collection, we'll be updating getStaticPaths inside /pages/post/[filename].tsx.

Modify getStaticProps()

Next, we'll want to update getStaticProps to include locale as part of the relativePath.

Create Locale-Ready Documents

Now, we'll venture into the CMS either through the Global Nav or directly via /admin.

For our example, we'll want to create three versions in our post collection by modifying the filename field to include each locale as a sub-folder:

  • en-US/hello-world for our "English (United States)" version
  • fr/hello-world for our "French" version
  • nl-NL/hello-world for our "Netherlands" version

Testing

With our Documents created, we can confirm that the correct Document is loaded based on the user's locale by adding a console.log to getStaticProps:

The output will appear in the CLI console:

  • Visiting http://localhost:3000/post/hello-world
  • Visiting http://localhost:3000/fr/post/hello-world

Next Steps

From this point, we can explore more of what Next.js offers including:

https://nextjs.org/docs/advanced-features/i18n-routing#accessing-the-locale-information

  • Using useRouter() to attach locale information to the app
  • Using next/link with a locale prop to influence navigation to a locale