はじめに

今話題のSupabaseとpayload。色々なものに応用していきたいのでチュートリアル動画を元に記事を書いています。
この記事では、PayloadとSupabaseを設定して、Next.jsアプリの強力なバックエンドを構築する方法を紹介します。

なぜSupabaseなのか

Payloadはデータベースとファイルストレージが必要
Supabaseが提供するもの
- Postgres Database, MongoDB
- S3 Storage buckets
個人開発や少人数プロジェクトには十分な無料プラン: 500MB Database, 1GB storage

Payloadの利点

Payloadは、同カテゴリーで最も成長しているCMSだと思います。(2024/5/31)

Next.jsネイティブ：PayloadはNext.jsアプリにシームレスに統合されます。Vercelでワンクリックデプロイも可能です。
オープンソース：完全にオープンソースで、セルフホスティングやマネージドホスティングが可能です。
TypeScript：完全にTypeScriptで構築されており、UIを介さずにコードで設定を行えます。
高度な拡張性：カスタムフック、エンドポイントなどの完全なコントロールが可能で、CMSとしてだけでなく、あらゆるアプリケーションの包括的なバックエンドとして拡張できます。
スタンドアロン：他のフレームワークと一緒に使う場合でも、スタンドアロンアプリとして使用できます。

手順

payloadの導入
Supabaseのアカウント作成
envの'DATABASE_URI'をsupabaseから取得したものに置き換え
collectionsの中でhogehogeする

Payloadの導入

Payloadを展開。

npx create-payload-app@beta

SupabaseとPayloadの統合

https://supabase.com にてアカウント作成。
作成し終えたらcreate new projectで新しくプロジェクト作成してパスワードとPostgre Database_URIのリンクを取得してパスワードの部分を置き換えて保存。

設定し終えたら npm run dev　コマンド打ってlocalhostに/adminつけるとこのページに遷移する。

Supabaseは強力なPostgresデータベースソリューションとS3ストレージを提供しており、これをPayload設定に組み込みます。

Collections

Collectionsに.jsで追加していくことができる。以下はデフォルトで入っているUsers。

Payload上ではユーザーの追加などできることの幅を広げていける。

import type { CollectionConfig } from 'payload/types'

export const Users: CollectionConfig = {
  slug: 'users',
  admin: {
    useAsTitle: 'email',
  },
  auth: true,
  fields: [
    // Email added by default
    // Add more fields as needed
  ],
}

これによりユーザーの追加ができるようになる。

Supabase上のデータベース

S3の設定

PayloadプロジェクトでS3ストレージを設定するためのコード：

s3Storage({
  collections: {
    media: {
      prefix: 'media',
    }
  },
  bucket: process.env.S3_BUCKET,
  config: {
    forcePathStyle: true,
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
    region: process.env.S3_REGION,
    endpoint: process.env.S3_ENDPOINT,
  },
}),

環境変数

S3バケットの詳細と認証情報を格納する。

S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_REGION=
S3_ENDPOINT=

問題

ローカルとプロダクション環境の分離の重要性:
ローカル開発環境でプロダクションデータベースを使用すると、スキーマ変更の影響がプロダクションデータに及び、データが消失する危険性があルため、ローカル環境では必ずローカルデータベースを使用するか、テスト用の別のプロジェクトを作成推奨。
スキーマの変更によるデータ削除:
Payloadの設定ファイルでコレクションをコメントアウトすると、Payloadはそのコレクションのスキーマをデータベースから削除しようとすることにより、そのコレクションのすべてのデータが失われるらしい。

まとめ

PayloadとSupabaseを使ってNext.jsアプリのバックエンドを強化する方法を解説しています。
Payload公式から出ているチュートリアル動画を参考にして自分で実際に試してみました。これを応用して個人開発に生かしていきたい。

参考

How to set up Payload with Supabase Screenshot 2024-05-31 at 5.49.02 AM.png