Nextjsにsupabaseの導入方法

こちらではsupabaseについてと、導入方法について書いています
nextjsの設定が基本なのでsupabaseそのものの設定やテーブル作成は追々の予定です。

supabaseとは

Supabaseは、オープンソースのFirebaseの代替として設計されたバックエンドサービスです。Supabaseを使用すると、リアルタイムデータベース、認証、ストレージなど、様々な機能を簡単に統合できます。以下にSupabaseの主な機能を紹介します

データベース

Supabaseは、PostgreSQLを基盤とする完全に管理されたデータベースを提供します。SQLクエリを使用してデータを操作し、データベース機能を最大限に活用できます。

認証

Supabaseは、ユーザー登録、ログイン、パスワードリセット、ソーシャルログインなどの認証機能をサポートしています。

リアルタイム機能

Supabaseは、データの変更をリアルタイムでリスンする機能を提供します。これにより、アプリケーションの状態をリアルタイムで更新できます。

ストレージ

Supabaseは、ユーザーが画像やファイルをアップロードおよび管理するためのストレージソリューションを提供します。

API

Supabaseは、RESTful APIやGraphQL APIを自動生成し、開発者がデータに簡単にアクセスできるようにします。

オープンソース

Supabaseのコードベースはオープンソースであり、誰でもアクセスしてカスタマイズすることができます。

導入方法

1,インストール

対象のフォルダに移動して
Supabaseクライアントをインストールします。

npm install @supabase/supabase-js

2,環境変数の設定

Supabaseのプロジェクト設定からAPIキーとURLを取得し、Next.jsプロジェクトのルートディレクトリに.env.localファイルを作成して以下の内容を追加します。

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

画像のようにプロジェクトに入って
projecysettings　→　DATA API び入り
NEXT_PUBLIC_SUPABASE_URLは Projectは ProjectURLのURLより
NEXT_PUBLIC_SUPABASE_ANON_KEYは anon publicより

3,Supabaseクライアントの設定

libディレクトリを作成し、その中にsupabaseClient.jsファイルを作成して以下の内容を追加します。

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

4,データの取得と表示

ページコンポーネントでSupabaseクライアントを使用してデータを取得し、表示します。例えば、pages/index.jsファイルに以下の内容を追加します。

import { supabase } from '../lib/supabaseClient';

export default function Home({ data }) {
  return (
    <div>
      <h1>Supabase Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export async function getServerSideProps() {
  const { data, error } = await supabase
    .from('your_table_name')
    .select('*');

  if (error) {
    console.error(error);
    return { props: { data: [] } };
  }

  return { props: { data } };
}