Automating Internationalization with Google Spreadsheet and i18next.

The article is for the front-end developers who are suffering from the manual “copy-and-paste” internationalization process. Through this guide executing a single line of script shall automate the entire process.

Use Case

  1. React app that supports multiple languages (with i18next and react-i18next library)
  2. Setup Google Spreadsheet as JSON Hosting + v4 Google sheet API authentication
  3. Script that auto synchronize translations between Google Spreadsheet & JSON file (with google-spreadsheet library & Google Sheets API) by given two methods:
    – Scanning the key from the source code and uploading the scanned key to Google spreadsheet.
    – Downloading the translated strings from Google spreadsheet when building the source code.

Let’s Start

Step 1 — Install and configure i18next & react-i18next library

npx create-react-app react-internationalization
cd react-internationalization
npm install @mui/material @emotion/react @emotion/styled

This will create a basic CRA. We also installed MUI 5 for creating UI components.

npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

This will install i18next framework and its React wrapper.

Next create a file i18n.js at the top level of the project with given configuration below:

Then import the file in index.js as shown below:

All translations goes into — public/locales — with a separate JSON file for each supported language.

├── public/
│   ├── locales/
│      ├── en/
|          ├── translation.json
│      ├── no
|          ├── translation.json

Also place the snippet below in App.js for UI components that reflects switch between multiple languages.

Step 2 — Setup Google Spreadsheet

Create a Google Sheet with the following structure:

Note the spreadsheet id.


To handle v4 Google sheet API authentication follow service account option. Generated JSON file as shown below; secret.json is kept at the top level of the project and add it to .gitignore!

  "type": "service_account",
  "project_id": "XXXXXXXXXXXXXXX",
  "private_key_id": "XXXXXXXXXXXXXXX",
  "private_key": "XXXXXXXXXXXXXXX",
  "client_email": "",
  "client_id": "XXXXXXXXXXXXXXX",
  "auth_uri": "",
  "token_uri": "",
  "auth_provider_x509_cert_url": "",
  "client_x509_cert_url": ""

Step 3 — Automated script to synchronize translations between Google Spreadsheet & JSON file

google-spreadsheet is a wrapper library that lets you use the Google Sheets API. It can be used to create a new sheet or to read, write, and manage cells and rows.

npm i google-spreadsheet

Create fetch-google-spreadsheet.js and push-google-spreadsheet.js file at the top level of the project and insert the below code in it.

Insert scripts in package.json

"start": "npm run fetch:i18n && react-scripts start",
"build": "npm run fetch:i18n && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"push:i18n": "node push-google-spreadsheet.js",
"fetch:i18n": "node fetch-google-spreadsheet.js"
  • Developer: Run npm run push:i18n then request translation.
  • Translator: Enter translations in the spreadsheet

This is it. Every time you build/start application, the npm run fetch:i18n will be executed and the most recent translation will be applied to the build. I hope this helps.

Source Code!

The full source code is available here —

More info!

  1. List of all config options available for i18next.
  2. v4 google sheets API Authentication using service account.