supabaseを何も知らなくてもとりあえずデータを入れる方法

このコードはとりあえずsupabaseを使う足がかりにすることを推定しており、実際に使えるような感じではないかも、
そこに注意してください。間違えていることもあるかもしれないので、何かあれば遠慮なくコメントでご指摘ください

supabaseを使用した人はまずnext.jsとsupabaseを引っ付けるのにとても苦戦することが予想されます。
なぜなら私のように初心者はフロントエンド部分しか作っておらず、
html,css JavaScript、ほかにもReactやVue.jsなどのフレームワーク
つまりフロントエンド部分しか作っておらずsupabaseやfirebaseなどのbaasサービスを使用してもなんもやったことがないバックエンドはとてもむずかしいでしょう。

なので取得方法はともかくとりあえずデータベースから取得する体験を行い、とっかかりを作って見ました

環境

  "dependencies": {
    "@supabase/supabase-js": "^2.45.4",
    "next": "14.2.11",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.11",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }

まずこちらをご覧ください

https://github.com/starmagichat/learn/tree/table-fetch
これはtableからデータを取得する方法を示したものです。

基本的にはgithubにあるようなコードを使えばなんとかなりますが、
複雑なことにまずnext.jsのテンプレートを作ったり
このようなものも行おう

npm iを行う
npm run devをする（上記二つでターミナルで入力しましょう。git とかでもよくありますがどこに入力すれば良いか全くわからんということがあると思いますが基本的にbashとかzshで入力するものです。）

あとはgithubを見てくれれば解説は完了ですが、最後に一つ伝えておきたいことがutilsフォルダからのデータの流れについてです
登場するファイルは

.env.local
supabase.ts
tableFetch.ts (ちゃんとわかればなんでも良いです。)
page.tsx (ルートディレクトリ)

まず.env.localに環境変数を入れます。
supabaseのここを見ればnext.js用の構文はあるよん。

ここをクリックしたあと
「App Frameworks」をクリックするとnext.js用の環境変数を出せます
そしてその値はどこに運ばれるかというと
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

if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error('Missing Supabase environment variables')
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

process.env.NEXT_PUBLIC_SUPABASE_URL

process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

とかに入れ込まれます。
そしてtableFetchでは

import { supabase } from '@/app/utils/supabase'

export const tableFetch = async () => {
    const { data, error } = await supabase.from("storys").select("*")
    if (error) {
        throw error
    }
    return data
}

そうするとsupabasejsであるように使ってみて
このあとpage.tsxで

'use client'
import { useState, useEffect } from 'react'
import { tableFetch } from '@/app/utils/tableFetch'

interface Todo {
    id: number
    title: string
    // 他の必要なフィールドを追加
}

export default function Todos() {
    const [todos, setTodos] = useState<Todo[]>([])
    const [isLoading, setIsLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)

    useEffect(() => {
        async function loadTodos() {
            try {
                setIsLoading(true)
                const fetchedTodos = await tableFetch()
                if (fetchedTodos) {
                    setTodos(fetchedTodos)
                } else {
                    setError("データの取得に失敗しました。")
                }
            } catch (err) {
                setError("エラーが発生しました: " + (err instanceof Error ? err.message : String(err)))
            } finally {
                setIsLoading(false)
            }
        }
        loadTodos()
    }, [])

    if (isLoading) return <p>Loading...</p>
    if (error) return <p>Error: {error}</p>

    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id}>{todo.title}</li>
            ))}
        </ul>
    )
}

こんな感じでtitleとかを指定してあげれば
supabaseのcolumnのtitleをブラウザに出力することができます。
私はこの方法でうまくいきましたが、環境によってはうまくいかない時もあるかもしれないです。
こんな感じであなたもsupabaseでnext.jsのnpm run devで何か表示してみましょう