Supabase + Next.jsアプリ開発(1)

アプリ開発においては、Googleが提供するFirebaseというBaaS(Backend as a Service)が有名ですが、最近Firebase代替を謳うSupabaseというオープンソースの名前をよく聞くようになっていました。

Supabase | The Postgres Development Platform.

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

supabase.com

Firebaseとの最も大きな違いは、オープンソースであることと、リレーショナルデータベース(RDBMS、SQL)であるPostgreSQLがベースであることが挙げられます（FirebaseのデータベースであるCloud FirestoreはNo SQLです）。一般にNo SQLの方が高速でスケール性が良いと言われますが、複雑なデータ構造には対応できなかったり、データの一貫性を保証しない、などのデメリットもあり、今でもデータベースと言えばRDBMSだろう、という風潮を感じます。というわけで、この際少し本気で勉強してみたいと思います。

Supabaseに登録して、まずProjectを作ります。test_projectとしておきます。SQL Editorのページを選択すると右のような画面になりますので、SQLクエリでテーブルを作っていきます。テーブル名をmy_tableとしておきます。

データは適当です。右下の”Run”で実行です。

このようにしてテーブルを作成すると、Table Editorで内容を確認することができます。

先ほど作成したテーブルです。便利ですね。簡単なデータならここで編集できます。

npx create-next-app -e with-supabase

localhost:3000でアクセスすると、いつものNextjsとは違うトップページが表示されます。

  "dependencies": {
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "autoprefixer": "10.4.17",
    "geist": "^1.2.1",
    "next": "latest",
    "postcss": "8.4.33",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.4.1",
    "typescript": "5.3.3"
  },

先ほど作成したSupabaseを接続して、データの読み込みを行ってみます。まず.env.localファイルを作成し、環境変数を設定します。

.env.local

NEXT_PUBLIC_SUPABASE_URL="SUBSTITUTE_SUPABASE_URL"
NEXT_PUBLIC_SUPABASE_API_KEY="SUBSTITUTE_SUPABASE_API_KEY"

次に、「components/UserList.tsx」を作成し、以下のコードを書いていきます。

import { createClient } from '@/utils/supabase/server';

export default async function UserList() {
  const supabase = createClient();
  const { data: users } = await supabase.from("my_table").select();

  return <pre>{JSON.stringify(users, null, 2)}</pre>
}

さらに、「app/users/page.tsx」を作成し、以下を記述します。

import UserList from "@/components/UserList"


export default function (){
    return(
        <>              
            <h1>User LIST</h1>
            <div><UserList /></div>
        </>
    )
}

これで、localhost:3000/usersにアクセスしてください。my_tableのJSONが表示されているはずです。これは簡単ですね。さらに深掘りしていきたいという意欲が湧いてきました。