Next.js에서 다국어 지원하기 (1) google spreadsheet 연동편

원글은 React Native에서 적용이었으나...... 이젠 Next 적용하느라 고군분투하기

 

3월에 쓰려고 했던 이 글,,,

지금 만나러 갑니다

 

 

 Next.js에서 Google 스프레드시트와 i18n를 활용하여 다국어 지원을 구현하는 방법을 처음부터 차근차근 설명해드립니다.

 

 

0. 프로젝트 생성

Getting Started: Installation | Next.js

Next.js 공식문서를 보고 예시용 프로젝트를 만들어 줬습니다.

npx create-next-app@latest

 

What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`?  Yes
Would you like to customize the import alias (`@/*` by default)? Yes
What import alias would you like configured? @/*

 

이 설정은 마음대로 하시면 됩니다.

다만 App Router 설정에 따라 i18n 적용 난도가 달라지므로 주의하셔야 합니다.

(처음 하신다면 Would you like to use App Router? (recommended) No 하시길)

 

프로젝트 생성 직후 디렉터리 구조↓

node_modules
public
src
  └── app
      ├── favicon.ico
      ├── globals.css
      ├── layout.tsx
      └── page.tsx
eslint.config.mjs
next.config.ts
package.json
tsconfig.json
tailwind.config.ts

 

1. Google Spreadsheet Api

이전 프로젝트들를 진행하며, 텍스트 관리에 Google SpreadSheet api를 사용했습니다.

 

이유는 크게 두 가지인데:

1. 텍스트를 코드에다 때려박으면 본새가 나지 않음 (유지보수/재사용이 어렵기도 하고, 무엇보다 과한 하드코딩이다...)

2. 텍스트는 일반적으로 기획쪽에서 작성하게 되는데, 구글 스프레드시트의 경우 비개발자에게도 익숙한 관리 툴

 

1.1 구글 설정

1. https://cloud.google.com/?hl=ko 우측 상단의 [콘솔]버튼 클릭

2. 프로젝트 선택 > 새 프로젝트 생성

3. 탐색메뉴 > API 및 서비스 > 라이브러리

 

4. google sheet 검색 > Google Shetts API > 사용

 

5. 사용자 인증 정보 만들기 > 서비스계정 생성

 

 

생성 후 이 화면이 뜹니다.

6. 구글 스프레드시트 파일 > 공유 > 서비스 계정의 이메일 입력

 

7. IAM 및 관리자 > 서비스계정 > 작업 > 키관리 > 키 추가

 

비공개 키(json)는 로컬에 저장되는데, 1.2에서 써먹게 됩니다.

 

8. 번역 입력

다국어 지원이 목표이기에 eng까지 써줍니다.

 

 

1.2 코드

1. google-spreadsheet 라이브러리 설치

npm google-spreadsheet ^3.3.0

 

 

2. src/libs/googleSheet.json 작성

아까 다운받아 뒀던 비공개키 json (7.)

 

3. src/libs/googleSheet.js 스크립트 작성

여러 코드들을 따와 작성했습니다. 모쪼록 잘,, 사용해주신다면 기쁠 듯

/* eslint-disable @typescript-eslint/no-require-imports */
const { GoogleSpreadsheet } = require("google-spreadsheet");
const fs = require("fs");
const path = require("path");

// googleSheet.json 파일 경로
const SERVICE_ACCOUNT_PATH = path.join(__dirname, "googleSheet.json");

async function fetchDataAndSaveAsJson() {
  // googleSheet.json 파일에서 private_key 추출
  const serviceAccount = JSON.parse(
    fs.readFileSync(SERVICE_ACCOUNT_PATH, "utf-8")
  );
  const privateKey = serviceAccount.private_key;
  const clientEmail = serviceAccount.client_email;

  // 구글 시트 Document ID
  const SPREADSHEET_ID = "구글 시트 Document ID";

  // 구글 시트 문서 객체 생성
  const doc = new GoogleSpreadsheet(SPREADSHEET_ID);

  // 구글 시트 API 인증
  await doc.useServiceAccountAuth({
    client_email: clientEmail,
    private_key: privateKey,
  });

  // 시트 정보 로드
  await doc.loadInfo();

  // 시트 제목
  const sheetTitle = doc.title;

  // 시트 개수
  const sheetNumbers = doc.sheetCount;

  // 시트별로 반복
  for (let step = 0; step < sheetNumbers; step++) {
    const sheet = doc.sheetsByIndex[step]; // 각 시트 가져오기
    const title = sheet.title; // 시트 제목
    const rows = await sheet.getRows(); // 시트에서 데이터 행 가져오기

    // 'key', 'ko', 'eng' 컬럼을 기준으로 데이터 추출
    const data = rows.map((row) => ({
      key: row.key,
      ko: row.ko,
      eng: row.eng,
    }));

    // 한국어 데이터와 영어 데이터를 각각 분리하여 key를 값으로 사용
    const koData = {};
    const engData = {};

    data.forEach((item) => {
      koData[item.key] = item.ko; // key를 기준으로 ko 값 저장
      engData[item.key] = item.eng; // key를 기준으로 eng 값 저장
    });

    // 폴더 경로 설정 (없으면 생성)
    const koDir = path.join("public", "locales", "ko");
    const engDir = path.join("public", "locales", "eng");

    if (!fs.existsSync(koDir)) {
      fs.mkdirSync(koDir, { recursive: true });
    }

    if (!fs.existsSync(engDir)) {
      fs.mkdirSync(engDir, { recursive: true });
    }
    
	 // 경로 세팅
    const koFilePath = path.join(koDir, `${title}.json`);
    const engFilePath = path.join(engDir, `${title}.json`);

    // 파일 저장
    fs.writeFileSync(koFilePath, JSON.stringify([koData], null, 2), "utf-8");
    fs.writeFileSync(engFilePath, JSON.stringify([engData], null, 2), "utf-8");

    // 필요시 콘솔로그 작성
  }
}

fetchDataAndSaveAsJson().catch((err) => console.error(err));

 

4. 추출하기

node src/libs/googleSheet.js

 

googleSheet.js에서 정의해두었던 경로에 사진과 같이 json 파일이 생성된 걸 확인할 수 있습니다.

뿌듯~

 

 

 

글이 너무 길어져서 오늘은 여기까지,,,

i18n 적용기 정말 옵니다

 

 

 

ref.

https://soojae.tistory.com/67

[React] 구글 스프레드 시트 API 이용하기(with google-spreadsheet)

https://blog.naver.com/sah0007/223284074344?trackingCode=rss

[gspread] - 구글스프레드시트(Google Spread Sheet) API 활용하기

 

https://velog.io/@calvinsnax/getting-i18n-with-google-spreadsheet

구글스프레드시트를 200% 활용한 국제화(i18n) 자동화 사례