PayloadとSupabaseで簡単にCMSを構築してみた

アプリを作る中で告知用のブログ記事を書く必要があり、payloadとsupabaseを使用して簡単に構築してみたので紹介します

Payloadとは

Next.jsをベースとしてい作られているCMSフレームワークです

特徴としては

• ✅ TypeScriptで型安全な開発ができる
• ✅ 管理画面が自動生成されるが、カスタマイズも可能
• ✅ GraphQL / REST APIの両方を提供
• ✅ SSRやSSGにも対応（Next.jsと相性が良い）

などが挙げられます

ユースケースとしては企業向けの管理システムやヘッドレスCMSとして運用することができるそうです

環境構築してみた

ここからは実際にPayloadとSupabaseを合わせた環境構築をしてみます

プロジェクト作成

以下のコマンドでプロジェクトを作成します

npx create-payload-app

プロジェクト名を聞かれるので適当に入れて進みます

T   create-payload-app
|
o   --------------------------------------------+
|                                               |
|  Welcome to Payload. Let's create a project!  |
|                                               |
+-----------------------------------------------+
|
*  Project name?
|  _

次にテンプレートを聞かれるのでブログを作るためにwebsiteとします

*  Choose project template
|    blank
|  > website
|    plugin
—

使用するデータベースを聞かれるのでSupabaseが対応しているPostgreSQLを選択します

*  Select a database
|    MongoDB
|  > PostgreSQL
|    SQLite
|    Vercel Postgres
—

するとデータベースに接続するURLを求められるのでSupabaseにログインしてダッシュボードからConnect → Connection String → Direct connectionにあるURLを貼り付けます

[YOUR-PASSWORD]の部分はご自身で付けたパスワードに置き換えてください

*  Enter PostgreSQL connection string
|  postgresql://postgres:[YOUR-PASSWORD]@db.zhhsguelphdhjkrwxisy.supabase.co:5432/postgres_
—

これでエンターを押せば構築を始めてくれます

作成された環境を見てみます

ディレクトリ構成はこんな感じ

普通のNext.jsのつくりで既にフロントエンドと管理画面用のバックエンドを作ってくれています

またSupabaseの方でもテーブルが複数作成されていて、フロントのデザインを直すだけですぐにブログ運営ができる状態になっています

管理者用の管理画面はこんな感じです

ページや投稿の追加はすでにできるようになっていて、必要であれば自分でコードを書けば追加もできます

まとめ

今回はNext.js製のPayloadというフレームワークを紹介しました

Next.jsを使ったことがある人であれば簡単に進められるのではないかなと思います

CMSの選択としては国産のmicroCMSが有名ですが、Payloadは無料ですし自由度も高いのでWEB制作や個人開発でもお勧めできますね