はじめに

こんにちは！
今回は Next.js (React 19) と Supabase だけでサクッと動く ToDo アプリ を作ったので、
セットアップ〜実装ポイントを 1 ページにまとめました。

話題のSupabaseを触ってみたい

という方の参考になれば幸いです 📝

目次

完成イメージ
技術スタック
フォルダ構成
環境変数を準備
Supabase プロジェクトを作成
テーブル todo を作成
Next.js 実装
動かしてみる

完成イメージ

ローカルで npm run dev → ブラウザにアクセスするとこんな感じです。
タスク追加・削除がリアルタイムに反映されます✨

技術スタック

区分	採用技術	メモ
フロント	Next.js 15 / React 19	App Router & Server Actions
スタイリング	Tailwind CSS	`className` だけで完結
バックエンド	Supabase	Postgres + Auth + Row Level Security
型	TypeScript

フォルダ構成

repo-root/
├─ app/             # Next.js App Router
│  └─ page.tsx      # 1 ページ構成
├─ utils/
│  └─ supabase.ts   # Supabase クライアント
├─ .env.local       # 環境変数
└─ README.md

最小構成なので 1 ファイルずつ把握すれば OK です。

環境変数を準備

.env.local に公開 URL / anon key を貼り付けます。

NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

ポイント

NEXT_PUBLIC_ で始まるキーはクライアントに露出するため 漏洩リスクのない anon key を使います。

Supabase プロジェクトを作成

数十秒で PostgreSQL + 認証サーバー + ストレージ が起動します。便利すぎる…。

テーブル todo を作成

SQL エディタに貼り付けて実行するだけです。

create table public.todo (
  id    bigint generated by default as identity primary key,
  title text   not null,
  created_at timestamptz default now()
);

-- RLS を有効化（今回は簡略化のため全員読み書き可）
alter table todo enable row level security;
create policy "Public CRUD" on todo
  for all using (true) with check (true);

Next.js 実装

1. Supabase クライアント

utils/supabase.ts

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);

2. ToDo 画面

app/page.tsx

"use client";

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

type Todo = { id: number; title: string };

export default function Home() {
  const [tasks, setTasks] = useState<Todo[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);

  // 一覧取得
  const fetchTodos = async () => {
    setLoading(true);
    const { data, error } = await supabase
      .from("todo")
      .select("*")
      .order("id", { ascending: false });
    if (!error && data) setTasks(data);
    setLoading(false);
  };

  useEffect(() => { fetchTodos(); }, []);

  // 追加
  const addTask = async (e: FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    setLoading(true);
    await supabase.from("todo").insert({ title: input.trim() });
    setInput("");
    await fetchTodos();
    setLoading(false);
  };

  // 削除
  const deleteTask = async (id: number) => {
    setLoading(true);
    await supabase.from("todo").delete().eq("id", id);
    await fetchTodos();
    setLoading(false);
  };

  return (
    <div className="flex flex-col items-center min-h-screen p-8 bg-gray-50 dark:bg-gray-900">
      <h1 className="text-3xl font-bold mb-8 mt-8 text-gray-800 dark:text-gray-100">
        ToDo アプリ
      </h1>

      <form onSubmit={addTask} className="flex gap-2 mb-8 w-full max-w-md">
        <input
          className="flex-1 px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white"
          placeholder="新しいタスクを入力..."
          value={input}
          onChange={e => setInput(e.target.value)}
        />
        <button
          type="submit"
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
          disabled={loading}
        >
          追加
        </button>
      </form>

      <ul className="w-full max-w-md space-y-2">
        {loading && <li className="text-gray-400 text-center">読み込み中...</li>}
        {!loading && tasks.length === 0 && (
          <li className="text-gray-400 text-center">タスクがありません</li>
        )}
        {tasks.map(t => (
          <li key={t.id} className="flex justify-between bg-white dark:bg-gray-800 px-4 py-2 rounded shadow">
            <span className="break-all text-gray-800 dark:text-gray-100">{t.title}</span>
            <button
              onClick={() => deleteTask(t.id)}
              className="ml-4 text-red-500 hover:text-red-700 font-bold"
              aria-label="タスクを削除"
              disabled={loading}
            >
              削除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

動かしてみる

# 1. プロジェクト作成
npx create-next-app@latest supabase-todo --ts --tailwind

# 2. 必要パッケージ
cd supabase-todo
npm install @supabase/supabase-js

# 3. 上記コードを貼り付け & .env.local を配置

# 4. 起動
npm run dev

http://localhost:3000 にアクセスしてタスクを追加すると、
即座に Postgres に INSERT → fetchTodos で再取得され UI が更新されます。