React, Next - localization with google spread sheet

대부분의 다국어 지원 서비스를 개발할 때, 비개발자랑 같이 진행하게 되는데

 

json만 던져주고 알아서 수정하라기에는 난이도가 있다보니

 

google spread sheet를 공유하면서 작업하는게 더 생산성이 높다 생각합니다

 

그래서 간단하게 예제를 만들어봤는데

(오랜만에 localization 작업하다가 정리 안해놨더니 다시 작업할 때 삽질 포인트를 반복해서 적는건 안비밀)

 

먼저 필자가 원하는 저장경로는 대략 /[lang code]/common.json으로

 

경로가 다르다면 구현할 때 해당 부분을 조금 신경써주시면 될거 같습니다

const Papa = require("papaparse");
const fs = require("fs/promises");

async function fetchTranslations() {
  const url = 'https://docs.google.com/spreadsheets/d/e/[id]/pub?output=csv';

  console.log("Fetching translations from Google Sheets...", { url });
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Failed to fetch sheet: ${res.statusText}`);

  const csvText = await res.text();
  const parsed = Papa.parse(csvText, { header: true });

  const rows = parsed.data;
  if (!rows.length) throw new Error("No data found in the sheet.");

  const languages = Object.keys(rows[0]).filter((col) => col !== "key");

  const translations = {};
  languages.forEach((lang) => {
    translations[lang] = {};
  });

  rows.forEach((row) => {
    const key = row.key;
    if (!key) return;
    languages.forEach((lang) => {
      translations[lang][key] = row[lang] || "";
    });
  });
  
  for (const lang of languages) {
    await fs.mkdir(`./src/i18n/${lang}`, { recursive: true });
    const filePath = `./src/i18n/${lang}/common.json`;
    await fs.writeFile(
      filePath,
      JSON.stringify(translations[lang], null, 2),
      "utf-8"
    );
    console.log(`Saved ${filePath}`);
  }

  console.log("All translation files saved successfully!");
}

fetchTranslations().catch((err) => {
  console.error("Error fetching translations:", err);
  process.exit(1);
});

먼저 spread sheet에서 웹에 게시를 해줍니다

(google api를 사용하실 예정이면 서비스계정으로 진행하시면 되겠습니다)

 

google api를 사용하지 않은 이유는 중요한정보를 글로서리로 관리하지 않았고 렌딩페이지 전용이었습니다

(가장 중요한 이유는.. 권한을 안주셨어요)

 

fetch로 csv파일 형태로 가져오고, papaparse라는 csv 파싱 라이브러리를 이용해 작업을 하는데

 

먼저 헤더에서 lang code를 추출하고, key value 형태로 저장합니다

(excel 형태에 따라 변경될 수 있습니다)

 

이후 각각 언어에 맞게 폴더 생성 및 저장을 진행해주면 됩니다

 

이후에 해당 파일을 node를 이용해서 해당 코드를 실행해주시면 되겠습니다

{
  "scripts": {
    "download:lang": "node src/i18n/index.js",
    "build": "yarn download:lang && next build",
  }
}

이런식으로 말이죠