ブログ

Supabase + Next.jsで簡単にアプリを作ってみる

最終更新日: 2025-03-26T08:30:03.497Z • 5分で読めます

1. はじめに

1-1. Supabaseとは？（Firebaseとの違いも解説）

Supabaseは、近年、Firebase代替として注目されているBaas(Backend as a Service)です。PostgreSQLをベースにしたデータベース、認証機能、ストレージ、リアルタイム機能などが提供されていて、これだけでバックエンドの開発を手軽に行うことができます。

1-2. なぜNext.jsとSupabaseの組み合わせが良いのか

Next.jsは、ReactをベースにしたフルスタックのWebフレームワークで、以下の特徴を持っています。

  • SSR（サーバーサイドレンダリング）やISR（インクリメンタル静的生成）に対応し、ハイパフォーマンスなWebアプリを構築することができる。
  • API Routeと呼ばれる機能が利用可能 で、APIなどのサーバーサイド処理もNext.js内で完結できる。
  • Vercel(Paas)との親和性が高い ため、難しい設定をすることなくCI/CDを構築・デプロイできる。

また、Supabaseと組み合わせることで、以下のようなメリットが得られます。

  • フロントエンドのみで手軽にアプリを開発できる
  • 認証やデータ管理を簡単に実装できる
  • サーバーレスでスケーラブルなアプリを構築できる

よって、SupabaseとNext.jsの組み合わせは、フロントエンドエンジニアが簡単にフルスタックアプリを開発するにはベストプラクティスになるでしょう。

1-3. 本記事のゴール（Supabaseを使った簡単なアプリ開発）

本記事では、Supabaseの基本的な使い方を理解し、Next.jsと組み合わせて簡単なアプリを作ってみましょう。

本記事で学べること

  • Supabaseのセットアップ方法
  • Next.jsとの統合方法
  • Supabaseを使ったCRUD（データの作成・取得・更新・削除）操作
  • ユーザー認証機能の実装
  • 簡単なアプリの作成とデプロイ

2. Supabaseの基本 – セットアップ編

2-1. Supabaseのアカウント作成とプロジェクト作成

まずはSupabaseの公式サイトにアクセスし、アカウントを作成します。

手順

  1. 「Start your project」をクリック
  2. GitHubでログイン（またはアカウント作成）
  3. 「New Project」を選択し、新しいプロジェクトを作成
  4. プロジェクトの設定
    • Project name: 任意の名前を設定
    • Database password: 任意のパスワードを設定（メモしておく）
    • Region: 近いリージョンを選択（日本ならAsia）
  5. 「Create new project」をクリックし、数分待つ

2-2. データベースの初期設定（テーブル作成・カラム設定）

SupabaseはPostgreSQLをベースとしたデータベースを提供しており、UIから簡単にテーブルを作成できます。

手順

  1. Supabaseのダッシュボードにログイン
  2. 「Database」 > 「Table Editor」 を開く
  3. 「New Table」をクリックし、テーブルを作成
    • Table Name: 例 todos
    • Columns: 以下のように設定
      • id: UUID（Primary Key）
      • title: Text（NOT NULL）
      • is_complete: Boolean（デフォルト: false）
  4. 「Save」をクリックしてテーブルを作成

2-3. APIキーの取得と環境変数の設定

Next.jsでSupabaseを使用するには、APIキーを取得して環境変数に設定する必要があります。

手順

  1. Supabaseのダッシュボードを開く
  2. 「Settings」 > 「API」 に移動
  3. 以下の情報をメモ
    • Project URL: Supabaseのエンドポイント
    • anon public key: 認証不要の公開APIキー
  4. Next.jsの環境変数に設定 Next.jsプロジェクトのルートに .env.local ファイルを作成し、以下のように記述します。(後に同じ詳細を記述しています)
    NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Supabaseの基本的なセットアップは以上になります。次のステップでは、Next.jsと連携してデータを操作する方法を解説します。

3. Next.jsでSupabaseを使う準備

Next.jsとSupabaseを組み合わせて開発するためには、まずその環境を整える必要があります。このセクションでは、Next.jsのプロジェクトを作成し、Supabaseを導入するための手順を説明します。

3-1. Next.jsの環境構築（プロジェクト作成）

まず、Next.jsを使ったプロジェクトを作成します。

  1. Node.jsのインストール Next.jsを使うためにはNode.jsが必要です。まだインストールしていない場合は、公式サイトからインストールしてください。
  2. Next.jsのプロジェクトを作成 ターミナルで以下のコマンドを実行して、新しいNext.jsのプロジェクトを作成します。
    npx create-next-app my-supabase-app

    my-supabase-appはプロジェクト名で、任意の名前に変更可能です。このコマンドで、Next.jsの基本的なプロジェクトが作成されます。

  3. プロジェクトディレクトリに移動
    cd my-supabase-app

    作成したディレクトリに移動します。

  4. 開発サーバーを立ち上げる 以下のコマンドで開発サーバーを立ち上げ、ブラウザで動作を確認します。
    npm run dev

    ローカルサーバーが起動するので、ブラウザでhttp://localhost:3000にアクセスして、Next.jsの初期画面が表示されれば成功です。

3-2. SupabaseのSDKをインストールする

次に、SupabaseをNext.jsプロジェクトに組み込むために、SupabaseのJavaScriptクライアントをインストールします。これにより、Supabaseの機能（データベース操作や認証機能など）をアプリケーションから簡単に利用できるようになります。

  1. Supabaseのインストール 以下のコマンドでSupabaseのSDKをインストールします。
    npm install @supabase/supabase-js
  2. インストール確認 インストールが完了したら、node_modulesフォルダ内に@supabase/supabase-jsが追加されていることを確認します。

3-3. Supabaseクライアントをセットアップする

次に、Supabaseと接続するためのクライアントを設定します。

  1. Supabaseのプロジェクト作成 Supabaseの公式サイトにログインして、新しいプロジェクトを作成します。プロジェクト作成後、ダッシュボードに移動してAPIキーを取得します。
  2. 環境変数の設定 セキュリティ上、APIキーはコード内に直接書かず、.env.localというファイルに記載するのがベストプラクティスです。このファイルをプロジェクトルートに作成します。

    .env.localファイルを以下の内容で作成してください：

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

    ここで、your-supabase-urlとyour-supabase-anon-keyはSupabaseのダッシュボードから取得したURLとAPIキーに置き換えます。

  3. Supabaseクライアントの設定 プロジェクト内の適切な場所（たとえばlib/supabase.js）に、Supabaseクライアントを初期化するコードを追加します。以下のコードをlib/supabase.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);

これで、Supabaseのクライアント設定が完了し、Next.jsのアプリケーションからSupabaseに接続する準備が整いました。

このセクションで、Next.jsのプロジェクトを作成し、Supabaseを使うための環境設定ができるようになりました。次は、実際にSupabaseを使ってデータ操作を行う方法を学んでいきましょう。

4. Supabaseを使った基本的なCRUD操作

ここでは、Next.jsでSupabaseを使って基本的なCRUD（Create、Read、Update、Delete）操作を実行する方法を解説します。これらの操作を通じて、データの取り扱い方を学び、アプリケーションに実装できるようになります。

4-1. データの取得（GET）

まずは、Supabaseを使ってデータを取得する方法を紹介します。Supabaseでは、select()メソッドを使ってデータを取得できます。

例: データベースから全てのユーザー情報を取得する

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

// Supabaseのクライアントを初期化
const supabase = createClient('https://your-project-url.supabase.co', 'your-anon-key');

async function fetchData() {
  const { data, error } = await supabase
    .from('users')  // usersテーブルからデータを取得
    .select('*');    // 全てのカラムを選択
  
  if (error) {
    console.error('エラー:', error);
    return;
  }
  
  console.log('取得したデータ:', data);
}

// 呼び出し
fetchData();

このコードでは、usersというテーブルからすべてのカラムを取得しています。エラーが発生した場合は、コンソールにエラーメッセージを表示します。

4-2. データの追加（POST）

次に、Supabaseを使ってデータを追加する方法です。insert()メソッドを使用して、テーブルに新しいレコードを挿入できます。

例: ユーザー情報を追加する

async function addUser() {
  const { data, error } = await supabase
    .from('users')  // usersテーブルにデータを挿入
    .insert([
      { name: '山田太郎', email: '[email protected]' }
    ]);

  if (error) {
    console.error('エラー:', error);
    return;
  }
  
  console.log('追加されたデータ:', data);
}

// 呼び出し
addUser();

このコードでは、nameとemailというカラムに値を追加しています。新しいユーザー情報がusersテーブルに追加されます。

4-3. データの更新（PUT）

次に、既存のデータを更新する方法です。update()メソッドを使って、特定の条件に一致するレコードを更新できます。

例: ユーザーの名前を変更する

async function updateUser() {
  const { data, error } = await supabase
    .from('users')  // usersテーブルのデータを更新
    .update({ name: '田中一郎' })  // nameカラムの値を変更
    .eq('email', '[email protected]');  // 条件：emailが'[email protected]'のレコードを更新
  
  if (error) {
    console.error('エラー:', error);
    return;
  }
  
  console.log('更新されたデータ:', data);
}

// 呼び出し
updateUser();

この例では、emailが[email protected]のユーザーのnameを田中一郎に更新しています。eq()メソッドは、条件に一致するレコードを指定するために使用します。

4-4. データの削除（DELETE）

最後に、Supabaseでデータを削除する方法です。delete()メソッドを使って、特定のレコードを削除できます。

例: ユーザー情報を削除する

async function deleteUser() {
  const { data, error } = await supabase
    .from('users')  // usersテーブルからデータを削除
    .delete()
    .eq('email', '[email protected]');  // 条件：emailが'[email protected]'のレコードを削除
  
  if (error) {
    console.error('エラー:', error);
    return;
  }
  
  console.log('削除されたデータ:', data);
}

// 呼び出し
deleteUser();

このコードでは、emailが[email protected]のユーザーをusersテーブルから削除しています。delete()メソッドを使ってデータを削除しますが、必ず削除条件を指定するようにしましょう。

5. 実践：Next.js × Supabaseで簡単なアプリを作成

ついに、Next.jsとSupabaseを使って簡単なアプリを作成します。アプリはユーザー認証を含み、データの追加・表示・更新・削除ができるシンプルなものです。

5-1. ユーザー認証機能の実装（メール・パスワードログイン）

まずは、アプリにユーザー認証機能を追加しましょう。

Supabaseの認証設定を行う
Supabaseのプロジェクトダッシュボードに移動し、左側メニューの「Authentication」セクションにアクセスします。そこで、「Settings」タブを選択し、認証方法として「Email/Password」を有効にします。

  1. Next.jsに認証機能を組み込む
    次に、Next.jsのコードでSupabase認証を使用する準備をします。lib/supabase.js ファイルを作成し、以下のコードでSupabaseクライアントを初期化します。
    // lib/supabase.js
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

export default supabase;

  2. サインアップとログインのフォームを作成
    ユーザーがメールアドレスとパスワードでサインアップおよびログインできるフォームを作成します。次のコードは、サインアップ機能の一部です。
    // pages/signup.js
import { useState } from 'react';
import supabase from '../lib/supabase';

const SignUp = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const { user, error } = await supabase.auth.signUp({
      email,
      password,
    });
    if (error) {
      setError(error.message);
    } else {
      alert('サインアップ成功！');
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {error && <p>{error}</p>}
      <button type="submit">サインアップ</button>
    </form>
  );
};

export default SignUp;

5-2. データの一覧表示（リアルタイム取得）

次に、Supabaseのデータベースからデータを取得して表示する機能を作成します。Supabaseではリアルタイムでデータを取得できるので、リアルタイムでデータが変化する様子も確認できます。

  1. データベースからデータを取得する
    例えば、posts というテーブルに投稿データを保存しているとしましょう。このテーブルからデータを取得して表示するコードを作成します。
    // pages/posts.js
import { useEffect, useState } from 'react';
import supabase from '../lib/supabase';

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await supabase
        .from('posts')
        .select('*')
        .order('created_at', { ascending: false });

      setPosts(data);
    };

    fetchPosts();

    // リアルタイムでデータを更新
    const postSubscription = supabase
      .from('posts')
      .on('INSERT', (payload) => {
        setPosts((prevPosts) => [payload.new, ...prevPosts]);
      })
      .subscribe();

    return () => {
      postSubscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      <h1>投稿一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

5-3. フォームを使ったデータの追加・更新・削除

次は、投稿データを追加・更新・削除するためのフォームを作成します。これを使って、ユーザーが簡単にデータを管理できるようにします。

  1. 投稿データを追加するフォーム
    投稿を追加するフォームを作成します。新しい投稿を作成するためのフォームのコードは以下のようになります。
    // pages/create-post.js
import { useState } from 'react';
import supabase from '../lib/supabase';

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [error, setError] = useState('');

  const handleCreatePost = async (e) => {
    e.preventDefault();
    const { data, error } = await supabase
      .from('posts')
      .insert([{ title, content }]);

    if (error) {
      setError(error.message);
    } else {
      alert('投稿が追加されました');
    }
  };

  return (
    <form onSubmit={handleCreatePost}>
      <input
        type="text"
        placeholder="Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <textarea
        placeholder="Content"
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      {error && <p>{error}</p>}
      <button type="submit">投稿を作成</button>
    </form>
  );
};

export default CreatePost;

  2. 投稿を削除する機能
    投稿を削除するための機能も追加できます。次のコードは、投稿を削除するためのボタンとその処理です。
    // 投稿を削除する処理
const handleDeletePost = async (postId) => {
  const { error } = await supabase.from('posts').delete().match({ id: postId });
  if (error) {
    alert('削除に失敗しました');
  } else {
    alert('投稿が削除されました');
  }
};

ここまでで、Next.jsとSupabaseを使ってユーザー認証、データの表示、データの追加・更新・削除ができる簡単なアプリが完成しました。これで、基本的なアプリケーション開発の流れを学びましたね。さらに、認証をカスタマイズしたり、エラーハンドリングを強化したりすることで、より実践的なアプリに仕上げることができます。

次は、デプロイ方法に進みましょう。

6. デプロイと運用

アプリをローカル環境で作成したら、次はインターネット上で公開するためのデプロイ作業を行います。ここでは、Next.jsアプリを Vercel にデプロイし、Supabaseとの接続も適切に設定する方法を紹介します。また、Supabaseの料金プランと運用時の注意点についても触れていきます。

6-1. Vercelを使ってNext.jsアプリをデプロイする

Next.jsはVercelとの相性が良く、簡単にデプロイできるのが特徴です。Vercelにアカウントを作成して、数回のクリックでアプリを公開できます。手順は以下の通りです。

Vercelにサインイン

まず、Vercelにサインインします。VercelはGitHub、GitLab、Bitbucketのいずれかのアカウントと連携できますが、GitHubでサインインするのが一般的です。Vercelの公式サイトにアクセスし、サインインしてください。

プロジェクトのリンク

次に、作成したNext.jsのプロジェクトをGitHubにプッシュします。

  • Vercelのダッシュボードから「New Project」をクリックします。
  • GitHubのリポジトリ一覧が表示されるので、デプロイしたいリポジトリを選択します。
  • Vercelが自動的にビルド設定を検出し、デプロイの準備を整えます。

環境変数の設定

Vercelでデプロイする際に、SupabaseのAPIキーやURLを環境変数として設定する必要があります。

  • Vercelのプロジェクト設定画面に移動します。
  • 「Environment Variables」セクションに進み、以下の変数を追加します。
    • NEXT_PUBLIC_SUPABASE_URL: SupabaseプロジェクトのURL（例: https://xyzcompany.supabase.co）
    • NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabaseの公開APIキー

これで、Vercel上で環境変数が設定され、デプロイされたアプリからSupabaseと連携する準備が整いました。

デプロイ完了

すべて設定が完了したら、Vercelは自動的にビルドを開始し、数秒でアプリが公開されます。公開されたURLが表示されるので、クリックしてアプリを確認できます。

6-2. Supabaseの料金プランと運用の注意点

Supabaseは無料プランも提供していますが、使用するリソースが増えると料金が発生します。特にデータベースの使用量やAPIリクエスト数に応じて、コストが変動するため、アプリの運用には注意が必要です。

無料プラン

Supabaseの無料プランでは、以下の制限があります。

  • データベースサイズ: 最大500MB
  • APIリクエスト数: 最大2,000リクエスト/月
  • ストレージ: 最大1GB

これらの制限内であれば、無料プランで十分に使用できますが、アプリが成長してくると、リソースの増加が必要になる場合があります。

有料プラン

有料プランでは、リソースが大幅に増加し、以下のようなメリットがあります。

  • データベースサイズ: 最大8TB
  • APIリクエスト数: 月間10万リクエスト以上
  • ストレージ: 最大100GB以上

また、パフォーマンスや可用性の面でもより高いレベルのサポートが提供されるため、トラフィックが増えると有料プランへの移行を検討することをおすすめします。

これで、Next.jsとSupabaseを使ったアプリのデプロイと運用についての基本的な流れと注意点をカバーしました。デプロイ後も運用を意識しながら、アプリを安全かつ効率的に運営していきましょう！

7. まとめ

7-1. 本記事の振り返り（Supabaseの基本からアプリ開発まで）

この記事では、Next.jsとSupabaseを使って、以下のステップを順番に学びながら、実際に簡単なアプリを開発する方法を紹介しました。

  1. Supabaseのセットアップ
    Supabaseのアカウントを作成し、プロジェクトを設定。データベースの初期設定やAPIキーの取得。
  2. Next.jsのセットアップ
    Next.jsの環境を構築し、Supabase SDKをインストールして、クライアントをセットアップ。
  3. 基本的なCRUD操作
    データの取得、追加、更新、削除の基本的な操作を実装し、Supabaseを利用したデータのやりとりを行った。
  4. ユーザー認証機能の実装
    Supabaseの簡単な認証機能を使って、メールとパスワードでのログイン機能を作成。
  5. アプリのデプロイ
    Vercelを使って、作成したNext.jsアプリを簡単にデプロイした。

7-2. 参考リンクと公式ドキュメント紹介

これからさらにSupabaseを学びたい、または応用的な機能を使いたいという方に向けて、以下のリンクを参考にしてください。

この記事をシェア:

Brainlink

Brainlink は、議事録や要件定義書からタスクを自動生成し、プロジェクト管理を効率化するAIプラットフォームです。

関連記事

MicroCMS + Next.jsで作ったブログにクリックでスキップする目次をつける方法
Web制作

MicroCMS + Next.jsで作ったブログにクリックでスキップする目次をつける方法

Supabase + Next.jsで簡単にアプリを作ってみる
Supabase

Supabase + Next.jsで簡単にアプリを作ってみる

アジャイル開発の成功をサポートする効果的な戦略とベストプラクティス
アジャイル開発

アジャイル開発の成功をサポートする効果的な戦略とベストプラクティス