Supabaseでデータベースを作成してNext.jsと連携させる手順を紹介【チャレンジ企画第5弾】

現在の状況は Next.js のセットアップ済み ＆ Supabase のデータベース作成済み なので、次に進むべきステップは以下のようになります。

Supabaseのセットアップ

Supabase SDK を Next.js にインストールし、環境変数を設定する。

データベースとの接続をテスト。

ユーザー認証の実装

Supabase Authentication を使い、Google/メールログインを実装。

投稿の取得 & 作成機能

Supabase から 投稿一覧を取得。

新規投稿を作成できる機能を追加。

日本地図のUI実装

地図コンポーネントを作成し、都道府県を選択できるようにする。

まず、Supabase を Next.js で利用するために SDK をインストールします。

npm install @supabase/supabase-js

lib/supabase.ts ファイルを作成し、API キーを設定します。

ChatGPTより

Next.js の .env.local に Supabase の API キーを追加。

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

your-supabase-url と your-supabase-anon-key は Supabase コンソールの「Settings → API」 から取得できます。

pages/index.js に以下のコードを追加し、コンソールにデータが表示されるか確認。

import { useEffect } from 'react';
import supabase from '../lib/supabase';

export default function Home() {
  useEffect(() => {
    async function fetchData() {
      const { data, error } = await supabase.from('users').select('*');
      if (error) {
        console.error(error);
      } else {
        console.log(data);
      }
    }
    fetchData();
  }, []);

  return 
Check the console for user data!
;
}

npm run dev で開発サーバーを起動し、コンソールにデータが表示されれば成功！

つぎはapp/auth/page.tsx に認証ページを作成します。

'use client';

import { useState } from 'react';
import { supabase } from '@/lib/supabase';

export default function AuthPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = async () => {
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
    });
    if (error) alert(error.message);
    else alert('Sign-up successful! Check your email.');
  };

  const handleSignIn = async () => {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
    if (error) alert(error.message);
    else alert('Sign-in successful!');
  };

  return (
    <div>
      <input type="email" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleSignUp}>Sign Up</button>
      <button onClick={handleSignIn}>Sign In</button>
    </div>
  );
}
  

ログインしたユーザーの情報を表示するために、app/users/page.tsx を作成。

'use client';

import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';

export default function UsersPage() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const { data, error } = await supabase.from('users').select('*');
      if (error) console.error('Error fetching users:', error);
      else setUsers(data);
    }
    fetchUsers();
  }, []);

  return (
    <div>
      <ul>
        {users.map((user: any) => (
          <li key={user.id}>
            <h3>{user.name}</h3>
            <p>Location: {user.location}</p>
            <p>Skills: {user.skills}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
  

app/components/CreatePost.tsxを作成して、Supabaseにデータを保存する機能を追加。

'use client';

import { useState } from 'react';
import { supabase } from '@/lib/supabase';

export default function CreatePost() {
  const [content, setContent] = useState('');
  const [category, setCategory] = useState('');

  const handleSubmit = async () => {
    const user = await supabase.auth.getUser();
    if (!user) {
      alert('You must be logged in to create a post.');
      return;
    }

    const { data, error } = await supabase.from('posts').insert([
      { content, category, user_id: user.data.user?.id },
    ]);

    if (error) console.error(error);
    else alert('Post created successfully!');
  };

  return (
    <div>
      <input type="text" placeholder="Category" onChange={(e) => setCategory(e.target.value)} />
      <textarea placeholder="Content" onChange={(e) => setContent(e.target.value)} />
      <button onClick={handleSubmit}>Post</button>
    </div>
  );
}
  

• ✅ lib/supabase.ts を作成（app の外に置く）
• ✅ 環境変数 .env.local を設定
• ✅ app/auth/page.tsx にログイン/サインアップ機能を追加
• ✅ app/users/page.tsx でユーザーリストを表示
• ✅ app/components/CreatePost.tsx で投稿作成機能を実装
• 🔜 app/posts/page.tsx に投稿一覧を表示する機能を追加！

認証機能（ログイン・サインアップ）を実装

→ すでに app/auth/page.tsx にログイン機能を作成しましたが、次は ログイン状態を管理し、ページ遷移時にも維持できるようにする 必要があります。

→ app/posts/page.tsx に、posts テーブルのデータを表示する。

→ app/components/CreatePost.tsx で新規投稿を作成できるようにする。