Supabaseプロジェクト作成してデータを出力したい

Supabaseプロジェクト作成してデータを出力したい

CREATE TABLE instruments (
  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
  name TEXT NOT NULL
);
INSERT INTO instruments (name) VALUES ('violin'), ('viola'), ('cello');

RLSをdisableすること。

フォルダ構成

my-app/
├── app/
│   ├── components/
│   │   └── Instruments.tsx
│   ├── page.tsx
│   ├── layout.tsx
│   └── globals.css
├── utils/
│   └── supabase/
│       ├── client.ts
│       └── server.ts
├── types/
│   └── database.types.ts
├── public/
│   ├── favicon.ico
│   └── images/
├── .env.local
├── next.config.js
├── tsconfig.json
├── package.json
├── README.md
└── .gitignore

npx create-next-app@latest my-app --typescript
cd my-app
npm install @supabase/supabase-js @supabase/ssr

プロジェクトルートに.env.localファイルを作成し、Supabaseの認証情報を追加：
env

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

server.ts

export async function createClient() {
  const cookieStore = await cookies(); // cookies() を await

  console.log('Supabase URL:', process.env.NEXT_PUBLIC_SUPABASE_URL);
  console.log('Supabase Key:', process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY);

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value; // 同期的に cookieStore を使用
        },
        set(name: string, value: string, options: CookieOptions) {
          cookieStore.set(name, value, options);
        },
        remove(name: string, options: CookieOptions) {
          cookieStore.set(name, '', { ...options, maxAge: 0 });
        },
      },
    }
  );
}

client.ts

import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

Instruments.tsx

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/utils/supabase/client';

export default function Instruments() {
  const [instruments, setInstruments] = useState<any[]>([]);
  const supabase = createClient();

  useEffect(() => {
    async function fetchData() {
      const { data, error } = await supabase.from('instruments').select('*');
      if (!error) setInstruments(data);
    }
    fetchData();
  }, []);

  return (
    <ul>
      {instruments.map((instrument) => (
        <li key={instrument.id}>{instrument.name}</li>
      ))}
    </ul>
  );
}

page.tsx

import { createClient } from '@/utils/supabase/server';

export default async function Home() {
  const supabase = await createClient();
  const { data, error } = await supabase.from('instruments').select('*');

  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data?.map((instrument) => (
        <li key={instrument.id}>{instrument.name}</li>
      ))}
    </ul>
  );
}

これで下記のように表示されます。
violin
viola
cello