この記事では、Next.js と Supabase を使って、技術ブログ向けのデモプロジェクトをセットアップする方法を紹介します。

Supabase とは？

Supabase は、Firebase に代わるオープンソースのバックエンドサービスです。データベース、認証、リアルタイム通信などを提供し、PostgreSQL をベースにしたスケーラブルなバックエンドを簡単に構築できることが特徴です。特に、データベース管理が簡単で、API や認証機能も自動的に生成されるため、開発者にとって非常に使いやすいプラットフォームです。

Next.js とは？

Next.js は、React をベースにした人気のフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートしています。SEO に優れたパフォーマンスを持ち、動的ルーティングやAPIルートのサポートも含まれ、モダンなウェブアプリケーションを高速に開発できるのが魅力です。

1. プロジェクトのセットアップ

まずは Next.js プロジェクトを作成します。

必要なツール

Node.js
npm または yarn

ターミナルで以下のコマンドを実行して Next.js プロジェクトを作成します。

bash
コードをコピーする
npx create-next-app@latest my-nextjs-supabase-blog
cd my-nextjs-supabase-blog

必要なパッケージのインストール

Supabase の SDK をプロジェクトに追加します。

bash
コードをコピーする
npm install @supabase/supabase-js

また、Next.js の認証機能を使うために next-auth もインストールします。

bash
コードをコピーする
npm install next-auth

2. Supabase のセットアップ

Supabase プロジェクトの作成

Supabase にアクセスして、アカウントを作成します。
新しいプロジェクトを作成し、データベースと API キーを取得します。

Supabase のダッシュボードから以下の情報をメモしておきます。

API URL
anon public API key

データベースのセットアップ

Supabase ダッシュボードで「SQL Editor」に移動し、以下の SQL スクリプトを実行して、ブログ投稿を保存するテーブルを作成します。

sql
コードをコピーする
create table posts (
  id serial primary key,
  title text,
  content text,
  created_at timestamp default now()
);

これで、ブログ投稿を保存するためのデータベースがセットアップされました。

3. Supabase との接続

次に、Supabase を Next.js アプリケーションに接続します。

環境変数の設定

プロジェクトのルートに .env.local ファイルを作成し、以下の環境変数を追加します。

bash
コードをコピーする
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

これらの値は、Supabase のダッシュボードからコピーできます。

Supabase クライアントの作成

次に、Supabase に接続するためのクライアントを設定します。lib ディレクトリを作成し、supabaseClient.js ファイルを追加します。

javascript
コードをコピーする
// 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);

これで、Supabase クライアントを使ってデータベースとやり取りできる準備が整いました。

4. 認証機能の追加

次に、Supabase の認証機能を Next.js に統合します。今回は簡単な GitHub 認証を追加します。

Supabase の認証設定

Supabase ダッシュボードに戻り、Authentication セクションから「GitHub」を有効にします。GitHub の OAuth クレデンシャルを作成し、クライアント ID とシークレットを取得します。

認証の設定

pages/api/auth/[...nextauth].js に以下のコードを追加し、NextAuth.js を設定します。

javascript
コードをコピーする
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import { supabase } from '../../../lib/supabaseClient';

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    })
  ],
  callbacks: {
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    }
  }
});

.env.local に GitHub のクライアント情報も追加します。

bash
コードをコピーする
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret

ログインボタンの作成

pages/index.js に以下のコードを追加して、簡単なログインボタンを表示します。

javascript
コードをコピーする
import { useSession, signIn, signOut } from 'next-auth/react';

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        <p>Signed in as {session.user.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return <button onClick={() => signIn('github')}>Sign in with GitHub</button>;
}

これで、GitHub 認証を通じてログインできるようになりました。

5. データの読み込みと表示

最後に、Supabase データベースからブログ投稿を取得して表示する機能を実装します。

データの取得

pages/index.js に Supabase クライアントを使って、ブログ投稿を取得するコードを追加します。

javascript
コードをコピーする
import { supabase } from '../lib/supabaseClient';

export async function getStaticProps() {
  const { data: posts } = await supabase.from('posts').select('*');
  return {
    props: {
      posts,
    },
  };
}

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

これで、Supabase のデータベースから投稿を取得し、ページに表示できるようになりました。

結論

この記事では、Next.js と Supabase を使ってプロジェクトをセットアップし、簡単な認証とデータベース接続の機能を実装しました。これをベースにさらにブログの機能を拡張することができます。

UIデザインチェックリスト

Next.js と Supabase を使ったプロジェクトを始める方法

プチ贅沢

リブログ記事”アニメ「LAZARUS ラザロ」ついに、本日!”

リブログ記事”いつも温かく応援してくださっている皆さまへ”

トリミング✂️