Zenn
🍣

Payloadの管理画面を日本語対応する方法

に公開
paylaod
tech

はじめに

Payloadの管理画面は多数の言語に対応しており、対応言語の一覧は下記のページで確認できます。

https://github.com/payloadcms/payload/tree/main/packages/translations

この記事では、管理画面を日本語で表示できるよう設定する方法を紹介します。

前提

Payloadは、code-first CMSという思想のもと、設定はすべてコードで行います。
詳しくは下記をご参照ください。

https://payloadcms.com/docs/configuration/overview

翻訳ファイルパッケージの導入

下記のコマンドで、翻訳ファイルをプロジェクトに追加します。

npm install @payloadcms/translations

Payload Configの編集

日本語のみサポートする場合

src/payload.config.tsに下記のコードを追加します。

src/payload.config.ts
import { ja } from '@payloadcms/translations/languages/ja'

export default buildConfig({
  // ...
  i18n: {
    supportedLanguages: { ja },
  },
})

日本語と英語をサポートする場合

src/payload.config.tsに下記のコードを追加します。
Payloadは、インストール時には英語がデフォルト言語になっていますが、日本語に加えて引き続き英語も使用し続けるにはenもsupportedLanguagesに含めます。

src/payload.config.ts
import { en } from '@payloadcms/translations/languages/en'
import { ja } from '@payloadcms/translations/languages/ja'

export default buildConfig({
  // ...
  i18n: {
    supportedLanguages: { en, ja },
  },
})

言語判定の仕組み

Payloadは、ブラウザの言語設定を検知して自動的に管理画面の言語を切り替えてくれます。
また、アカウント設定から言語を指定することも可能ですので、ブラウザの設定言語とは別の言語でPayload管理画面を表示させることもできます。

まとめ

このの記事では、Payloadの管理画面を日本語対応する方法を紹介しました。特に受託開発の場合は日本語UIが必ず求められますし、グローバルな組織では多様な言語に対応することが求められますので、Payloadの管理画面が多数の言語に対応しているのは実用的だと感じました。

参考

https://payloadcms.com/docs/configuration/i18n

Discussion