5SENSEのDEV/IT事業部でUIデザインとバックエンドからフロントまでエンジニアリングを行っているSakataです！

今回は弊社のWEBサイトの全面リニューアルにあたり使用した技術基盤についてをメモとして残しておこうと思います。

採用した技術基盤

大きな枠として採用している技術基盤としては以下になります。

- Next.js
- TypeScript
- PayloadCMS
- Tailwind
- Vercel
- Neon (PostgresSQL)
- Zustand

などなど、Next.js環境でのよくある構成で構築を行なっています。

PayloadCMSを採用した背景

今回、コーポレートサイト作成にあたりCMS部分に何を採用しようかと検討を行なっていました。

今までコーポレートなどはクラウド系のHeadlessCMSを採用することが多かったのですが、どうしても一人当たりの課金が発生してしまう、RateLimitなどの制約がある、、、、
できればオンプレミスで自分で開発を行え、アカウント数により金額が変わらない構成を作りたいという気持ちがありました。

クラウド系のheadlessCMSは独自の拡張をするにしてもどうしても制約が発生してしまうことも悩ましいポイント。

オンプレミスで使えるものとしては有名どころではStrapiなどがあるのですが、どうせなら新しいものを採用してみたく色々と探していました。

採用条件としては

1. TypeScriptである
2. React・Next.jsである
3. 拡張性が高い

という軸での検討を進めていました。

そこで今回見つけたのが、オンプレミスで利用することができ、かつNext.jsとVercelの親和性が非常に高いPayloadCMSを知り、軽く触ってみたところの感触が非常によく今回採用にいたりました。

PayloadCMS

PayloadCMSのよいところは？

PayloadCMSの特徴としては、他のheadlessCMSと同様にクラウド版もありますが、OSSとして既存のNext.jsにオンプレとして直接インテグレートすることができる点にあります。

このようなオンプレミスできるheadlessCMSとしては有名どころではStrapiなどがありますが、PayloadCMSの良いところは、基本の構築はTypescriptとdrizzleでできており、GUI部分の管理画面が完全にNext.jsでできている点にあります。

このNext.jsに直接インテグレートすることができるというのが非常に魅力のポイントで、AppRouterの機能を使い、使用しているNext.jsの環境にPayloadのルートを直接生やすことが可能なところです。

また、CMS部分のみを単独の環境にデプロイし、API経由で他の環境から呼び出すということももちろん可能です。

普段ReactやNext.jsでフロントの開発を行っているフロントエンドエンジニア視点で見ても、仕組みが完全にTypeScript Drizzle Next.jsでできているため学習の難易度も低く、普段使っている技術のみでCMSを導入することができるのがとてもありがたいところ。

なおかつ、VercelとNeon Blobを用いることで瞬時にコーポレートサイトやブログを展開することができるテンプレートが豊富に揃っている点も、今回の構築にあたりとてもありがたかったポイントです。

公式のGithubリポジトリの中にあるVercelDeployのボタンを押すと、瞬時にリポジトリを自分のGithub Organizationに置きつつ、Vercelに繋ぎ、そのままデプロイまでが可能になっています。

このテンプレート上で、Vercelから連携のできるNeonの設定も行えるので、デプロイまではボタンを数回ぽちぽちしているだけで完了ができます！

また、弊社は日本とアジアに拠点があるため基本的には多言語の対応が必須となりますが、この多言語対応も公式で対応を行ってくれているため設定が簡単に行えました。

PayloadCMSの悪いところは？

個人的には悪いところというのはありませんが、何点か注意事項があります。

まずPayloadCMSは開発者が開発をすることが前提であるという点です。

これはどういうことかというと、他のCMSなどは管理画面から要素の追加や拡張が行えることが多いですが、PayloadCMSにはGUIによるカラム追加や要素の追加はありません。

そのため、何かを更新したい場合はコードを編集しmigrationを行ってデプロイをする、という手順を踏む必要があります。

PayloadCMSを扱うためには、基本的なNext.js TypeScript Drizzle（PayloadCMSがラップしてくれている）を扱うことができる知識が必要になってきます。

特にDBはPostgresSQLを使用するため、PayloadCMSがmigrationを自動で行ってくれるとはいえ、Schema変更に伴うデータの移行処理などは自前でmigrationファイルを更新する必要が出てきます。

この点で、フロントエンドだけの知識では対応しきれない部分があるため、メインはWEBデザイナーかつフロントが少し触れる程度の知識では構築で詰まる可能性があります。

（とはいえ昨今はAIがあるので、AIに対応をさせれば十分に対応が可能です。）

また、フロント画面もテンプレートにない部分は自分で作成をする必要があるため、Payloadを採用する場合にはどこかで必ず開発手順が挟まることになります。

そう言った点で、例えば運用者が自前でカラムを追加したりページを作成したりが難しいため、運用者が開発者ではない場合、運用に開発者を充てることができない場合などには採用は難しくなる部分もあるかと思います。

GUIから色々設定をしたいという場合には、Strapiなど老舗のCMSに軍配が上がります。

また、Strapiなどと比較した場合、Plugin機能の豊富さコミュニティの情報量の多さでは新興のPayloadCMSは一歩劣ります。ただ、それを差し引いても現代的な技術構成でできているPayloadCMSは学習コストと拡張性において開発がとてもしやすく非常に感触が良いです。

その他悪い点としては、管理画面の見方が最初少し慣れないところにあります。

Wordpressなどとは見た目が大きく異なるため、この点でも運用者が拒否反応を最初起こしてしまう可能性があります。

導入の際には使い方の説明などを初期に厚く行なっておく必要がありそうです。

PayloadCMSの勢いが伸びている

NPM Trendで見ても、最近はPayloadCMSの伸びが非常に良いです！

ここ1年で採用されている数が逆転しました。

やはり技術基盤が昨今採用される技術基盤に沿って作られていることと、Next.js環境にインテグレートしやすいことが強みに思います。

PaylodCMSは個人的なブログやポートフォリオなどにも使用がとてもしやすいことと、VercelさえあればCMSが完結するため、組織でも個人でも非常に使いやすいCMSだと思います！

技術そのものは、Next.jsとPostgresSQLなので、VercelではなくてもNodeさえあればどこにでも動かすことができるというのも魅力ですね。

公式の開発も盛んで、E-Comarceとの連携などもできるため、今後のPayloadCMSの発展が楽しみです！

ぜひ一度お試しください！