Local Translations

Overview

This guide will show you how to store translations in your Next.js app rather than using a CDN. This means that translations will live in your app bundle. This can lead to faster loader times and avoids reliance on external infrastructure.

In this document, we will (1) explain what are local translations and how they work and (2) show you how to set up local translations for your Next.js app.

What are local translations?

Local translations are stored in your app's bundle, as opposed to being fetched from a CDN (Content Distribution Network).

Let's say that you have added the gtx-cli translate command to your CD process. This will generate JSON files containing translations for your app. The final step is to get these translations out of our API and into your app.

There are two ways to do this:

• In your app's bundle: After translations are generated, add them to your app's bundle.
• In a CDN (default): Fetch from translations from a CDN at runtime.

What are the benefits?

Faster load times: Local translations are served directly from your app, meaning that they will load faster than translations served from a CDN.

No reliance on external services: Your apps ability to load translations is not dependent on the availability of a CDN.

What are the drawbacks?

Increased bundle size: Local translations will increase your app's bundle size as they will be served alongside your app. This means that your app may take slightly longer on first load.

Locale management: In order to add or remove support for locales, you will need to redeploy your app each time.

Content management: Much like locale management, if you want to change a translation (i.e., you do not like how your content has been phrased in a different language), you must redeploy your app with the new translation.

Setup

Prerequisites

Make sure that you have followed the Quick Start Guide.

Steps

export default async function loadTranslations(locale) {
  const t = await import(`../public/_gt/${locale}.json`);
  return t.default;
}

npx gtx-cli init

npx gtx-cli translate

That's it! Your app will now only load translations from your local files.

Notes

• Local translations are an alternative to fetching translations from a CDN.
• You can customize loadTranslations() to also load translations from other sources, such as your database or your own CDN.

Next steps

• See loadTranslations() for more information on writing a custom translation loader.
• If you want to write your own translations check out custom translations.
• For more information on dictionary syntax, see the dictionary reference.