SupabaseでPayloadを設定する：Next.jsアプリのための強力なバックエンドを構築したい

## はじめに
今話題の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としてだけでなく、あらゆるアプリケーションの包括的なバックエンドとして拡張できます。
- **スタンドアロン**：他のフレームワークと一緒に使う場合でも、スタンドアロンアプリとして使用できます。

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


### Payloadの導入

Payloadを展開。
```sh
npx create-payload-app@beta
```

### SupabaseとPayloadの統合
https://supabase.com にてアカウント作成。
作成し終えたらcreate new projectで新しくプロジェクト作成してパスワードとPostgre Database_URIのリンクを取得してパスワードの部分を置き換えて保存。
![Screenshot 2024-05-31 at 5.42.04 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678426/55a0dd65-61ab-18d0-af8b-7be7cd9a5c5f.png)

設定し終えたら npm run dev　コマンド打ってlocalhostに/adminつけるとこのページに遷移する。
![Screenshot 2024-05-31 at 5.01.33 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678426/67e84b29-b3e5-27d1-e835-1f0a1ba78a6b.png)

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

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

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

```typescript 
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
  ],
}

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

![Screenshot 2024-05-31 at 5.02.27 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678426/d2e3ec51-d71d-85e4-4ff5-432a6481b4a0.png)

![Screenshot 2024-05-31 at 5.03.55 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678426/f094b6ef-a4cd-c9fa-6f6f-6e909b01a4e9.png)

### Supabase上のデータベース
![Screenshot 2024-05-31 at 5.04.30 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678426/9880880e-e9d4-f15e-1b07-5339f2d825ee.png)

#### S3の設定

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

```javascript
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678426/4bb21f24-961f-0317-d199-b5e59a541594.png)
](https://www.youtube.com/watch?v=L5w2QYB9-UU)

https://supabase.com/docs/guides/database/postgres/enums

https://payloadcms.com/docs/database/postgres