GIG INC.

Supabase + Next.jsで認証機能付きWebアプリケーションを作る方法｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG

BLOG

ブログ

Supabase + Next.jsで認証機能付きWebアプリケーションを作る方法

2024-03-26 制作・開発

こんにちは！GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた(片田)です！

突然ですが、モダンな技術って魅力的ですよね。

FirebaseをはじめとするBaaS（Backend as a Service）が登場して久しいですが、最近はSupabaseというさらにモダンなBaaSが個人的に気になっています。

このSupabaseとモダンなフロントエンドフレームワークであるNext.jsと組み合わせたら……まるで表参道のセレクトショップのようにモダンなWebアプリケーションを作ることができるでしょう。

今回は気になることは全部やってみるでお馴染みの私ちいかたが、Next.jsとSupabaseを使った認証機能つきWebアプリケーションの構築をハンズオン形式で解説します。

Supabaseとは

概要

Supabaseとは、オープンソース版のFirebaseのようなBaaSです。Supabaseを使えば、バックエンドをほぼ実装せずとも、認証機能やデータベース操作をする機能をWebアプリケーションに実装できます。

公式サイトはこちら

Firebaseとの比較

個人的に重要だと感じる、Firebaseとの違いは主に2つあります。

■データベース（DB）
FirebaseではNoSQLのCloud Firestoreが採用されています。

私も前職ではFirebaseを使った開発をしており、Cloud Firestoreをがっつり触っていました。データ構造の変更が容易なため、初期開発の段階ではかなり恩恵を受けられていました。

しかしプロダクトの規模が大きくなってくると、「必要に応じてデータを抽出したい」「REST APIをやめてGraphQLを採用したい」などなど、NoSQLでは対応しきれない要件が出てくることもありますよね。

SupabaseではRDSであるPostgreSQLを採用しており、GraphQLのインターフェースも用意されているため、かなり気軽にRDSを使った開発を行えます。

■料金
Firebaseが従量課金制なのに対し、Supabaseでは定額プラン制を採用しているため、料金面でも安心して利用できるのも特徴です。

料金プランの詳細については公式サイトのこちらに記載されています。執筆時点（2024年3月）ではProプランでも$25で利用できます。

プロダクトをリリースするまでの初期開発段階ではfreeプランを採用し、ユーザー数が増えてきたり、DBやStorageの容量やスペックが足りなくなってきたりしたら、アップグレードするといった使い方もできて便利ですよね。

Supabase + Nextjsで認証機能つきWebアプリケーションを作る方法

ここからはハンズオン形式で、実際に認証機能がついたWebアプリケーションを実装していきましょう！

■Nextjsプロジェクトを作成
まずはNextjsのプロジェクトを作成します。ターミナルで以下のコマンドを実行します。

npx create-next-app nextjs-supabase-auth


プロジェクトが作成されたら、そのディレクトリに移動します。

cd nextjs-supabase-auth


■Supabaseのセットアップ
次にSupabaseのセットアップを行います。Supabaseの公式サイトにアクセスし、無料で新しいプロジェクトを作成します。

プロジェクトが作成されたら、プロジェクトの設定から環境変数を取得します。envファイルを作成し、以下のように環境変数をセットします。

NEXT_PUBLIC_SUPABASE_URL=ここにSupabaseのURLを入力
NEXT_PUBLIC_SUPABASE_ANON_KEY=ここにSupabaseの公開用アノン認証キーを入力


次に、Supabaseライブラリをインストールします。

 npm install @supabase/supabase-js


これでSupabaseのセットアップも完了です！

■認証機能の実装
いよいよ認証機能を実装していきましょう！

まず、utils/supabase.tsファイルを作成し、以下のコードを記述します。

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

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

export const supabase = createClient(supabaseUrl, supabaseAnonKey);


このコードではSupabaseクライアントを初期化しています。

次に、components/Auth.tsxファイルを作成し、認証に関連するコンポーネントを実装します。

"use client"

import { useState } from "react";
import { supabase } from "../utils/supabase";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleLogin = async () => {
    try {
      setIsLoading(true);
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
      });
      if (error) throw error;
      alert("Login successful!");
    } catch (error) {
      alert(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  const handleSignUp = async () => {
    try {
      setIsLoading(true);
      const { error } = await supabase.auth.signUp({
        email,
        password,
      });
      if (error) throw error;
      alert("Sign up successful!");
    } catch (error) {
      alert(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <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)}
      />
      <button onClick={handleLogin} disabled={isLoading}>
        Login
      </button>
      <button onClick={handleSignUp} disabled={isLoading}>
        Sign Up
      </button>
    </div>
  );
};

export default Auth;


このコンポーネントでは、メールアドレスとパスワードを入力するための入力フィールドと、ログインとサインアップのボタンが用意されています。

ボタンをクリックすると、対応する関数(handleLoginまたはhandleSignUp)が呼び出され、Supabaseの認証APIを使ってログインまたはサインアップが実行されます。

最後に、pages/index.tsxファイルを編集し、Authコンポーネントをレンダリングします。

import Auth from "../components/Auth";

const Home = () => {
  return (
    <div>
      <h1>Supabase + Nextjs Auth App</h1>
      <Auth />
    </div>
  );
};

export default Home;


これで、認証機能付きのアプリケーションが完成しました。ローカルサーバーを起動して、ブラウザで確認してみましょう。

 npm run dev


まとめ

SupabaseとNextjsを組み合わせれば、最小限のリソースで効率的にモダンなWebアプリケーションを作ることができます！

今回はご紹介できませんでしたが、PostgreSQLを使用したり、Storageを使用したり、Functionを実装したり、Supabaseだけでさまざまなことができるので、ぜひご自身でも試してみてください！

◇

株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。また、45,000人以上が登録するフリーランス・副業向けマッチングサービス『Workship』や、7,000人以上が登録するデザイナー特化エージェントサービス『クロスデザイナー』、リード獲得に必要な機能を備えたCMS『LeadGrid』、UXコンサルティングサービス『UX Design Lab』などを展開しています。

多くのシステムをローンチしてきた知見を活かした開発が可能です。Web制作やDX支援のご相談はいつでもご連絡ください。

Web制作に関するご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

WebやDXの課題、お気軽にご相談ください。

無料相談はこちら

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。

RELATED ARTICLES

VIEW MORE