Payload Local API에서 locale을 사용하는 방법

아카이브된 문서 - Payload 폐기

Frontend에서 Payload를 더 이상 사용하지 않습니다. 이 문서는 실제 고양이의 만행 홈페이지에서 구현된 내용과는 무관합니다.

이 문서가 필요한 이유

Payload에서 데이터를 가져올 때, find(global의 경우 findGlobal)를 사용합니다. 이때, locale을 전달해서 로케일별 데이터를 가져올 수 있습니다. 일반적으로 이 경우 2가지 고민거리가 생깁니다.

1. 타입 에러: find에서 원하는 locale 타입은 locale?: "ko" | "en" | "all" | undefined과 같은 형태로 정해져있습니다. 하지만, 일반적으로 locale은 string 타입으로 전달하는 경우가 많아서 타입 에러가 발생합니다.
2. locale 값: locale을 동적으로 변경하려면 어디선가 locale 값을 가져와야 하는데, 상위 컴포넌트에서 하위 컴포넌트로 넘기는 등 다양한 방법이 있습니다.

통일성 있는 코드 작성을 위해 이 프로젝트에서 어떻게 국제화 처리를 진행했는지 정리합니다.

next-intl을 이용한 Payload 국제화 처리

1. TypedLocale로 로케일 타입 지정

아래처럼 TypedLocale을 임포트합니다. 그리고 find에서 locale의 타입을 지정해줍니다.

import { TypedLocale } from "payload";
 
// 생략
 
  const footerSections = await payload.findGlobal({
    slug: "footer-sections",
    locale: locale as TypedLocale,
  });

2. next-intl에서 Locale 가져오기

next-intl에서 locale 값을 가져옵니다. 상황에 따라 useLocale()이나 getLocale()을 사용하면 됩니다. 해당 작업을 상위 컴포넌트에서 진행하고 하위 컴포넌트로 locale을 전달하는 것에 비해서 필요한 곳에서 매번 호출하는 것이 실제로 얼마나 서버에 부하가 가는지는 저도 모르겠습니다.

// Regular components
import {useLocale} from 'next-intl';
const locale = useLocale();
 
// Async Server Components
import {getLocale} from 'next-intl/server';
const locale = await getLocale();

주의사항

아마도 Payload에서 지정한 로케일 값과 next-intl에서 설정한 로케일 값이 다르면 오류가 날 것으로 예상됩니다. 그래서 아래처럼 별도의 locale을 관리하는 값을 만들어서 Payload와 next-intl에서 import해서 사용하고 있습니다.

// src/i18n/locales.ts
export const locales = ['ko', 'en'];
export const defaultLocale = 'ko';