はじめに

Supabaseを触ったので、Next.jsでSupabaseからデータ取得ができるまでのやり方を書いていきます。以下のURLからSupabaseの登録をしておいてください。

以下のドキュメントに沿って書いていきます。

Supabaseとはなんぞや

ChatGPTに解説してもらいました。
Supabase（スーパーベース）は、オープンソースのリアルタイムデータベースであり、
バックエンドの機能を提供するプラットフォームです。
Supabaseは、アプリケーションのバックエンドを構築する際に必要な一般的な機能を簡単に利用できるように設計されています。

SupabaseはPostgreSQLデータベースをベースにしており、
リアルタイムのデータ同期、認証、ロールベースのアクセス制御、ストレージなどの機能を提供します。
これにより、開発者はサーバーサイドのコードを書かずに、高度なバックエンド機能を備えたアプリケーションを構築できます。

Supabaseの主な機能には以下のようなものがあります：

1.リアルタイムデータベース: リアルタイムウェブソケットを使用してデータのリアルタイム同期を実現します。データの変更をリッスンして、クライアントに即座に反映させることができます。

2.認証とアクセス制御: ユーザー認証やロールベースのアクセス制御を簡単に設定できます。ユーザーの管理とセキュリティを強化します。

3.ストレージ: ファイルのアップロードやダウンロードをサポートするストレージ機能を提供します。画像や動画などのメディアファイルを簡単に管理できます。

4.クエリ言語: SupabaseはPostgreSQLを採用しているため、強力なクエリ言語を使用してデータを操作できます。

5.サーバーレス関数: サーバーレス関数を使用して、サーバーサイドの処理を実行できます。APIエンドポイントを作成する必要がなく、シンプルでスケーラブルなバックエンドロジックを実装できます。

つまり、Supabaseはバックエンドの構築を簡単に行うことができて、様々な機能を実装することができるプラットフォームということです。

Supabaseでデータベース作成

まずはNext.jsでデータベースを作成して、データを引っ張ってこられるようにします。

1.データベースを作成

1.テーブル作成
サイドバーから「SQL Editer」を開木、「New query」をクリックします。

以下のクエリをエディターに貼り付け、右下の「Run」ボタンをクリック。

-- Create the table
CREATE TABLE todos (
  id SERIAL PRIMARY KEY,
  title TEXT,
  contents TEXT,
  start_date DATE,
  end_date DATE››
);

-- Insert some sample data
INSERT INTO todos (title, contents, start_date, end_date)
VALUES
  ('title1', 'contents1', '2024-02-19', '2024-02-19');

以下のようになれば成功。

「Table Editor」を開くと、テーブルが作成されていることが確認できます。

SupabaseをNext.jsにインストール

Next.jsのプロジェクトを作成する方法と、既存のプロジェクトにSupabaseを組み込む方法があります。

新規プロジェクトを作成する場合

以下のコマンドを実行

npx create-next-app -e with-supabase

Supabaseからデータを取得

先ほど作成したテーブルの情報を取得していきたいと思います。
まずは、「env.local」ファイルに作成したテーブルからデータを取得するための、プロジェクトURLと、キーを書いておきます。

NEXT_PUBLIC_SUPABASE_URL="SUBSTITUTE_SUPABASE_URL"
NEXT_PUBLIC_SUPABASE_ANON_KEY="SUBSTITUTE_SUPABASE_ANON_KEY"

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

page.tsx

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

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

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

次に、「app/todos/page.tsx」を作成し、以下のコードを書きます。

import TodoList from "@/components/TodoList"


export default function (){
    return(
        <>              
            <h1>TODO LIST</h1>
            <div><TodoList /></div>
        </>
    )
}

すると、以下のようにテーブルのデータが表示され、データが取得できたことが確認できます。

最後に

Supabaseには、これ以外にも様々な機能があり、色々なサービスに使えるなぁと思いました。

他にも色々な記事を書いているので、よければ読んでいってください、、、
基本設計について
 Vue.jsとNode.jsでチャットアプリを作った
 Next.js×TypeScriptでTODOアプリを作成する