Learning
Supabase

Gyakorlati példák

Next.js login, egyszerű CRUD (todo) és avatar feltöltés minták Supabase-szel.

Gyakorlati példák

Next.js login (client)

"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/utils/supabase/client"

export default function LoginPage() {
  const supabase = createClient()
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)

  const handleLogin = async () => {
    setError(null)
    const { error } = await supabase.auth.signInWithPassword({ email, password })
    if (error) setError(error.message)
    else {
      router.push("/dashboard")
      router.refresh()
    }
  }

  return null
}

Todo CRUD minta

await supabase.from("todos").select("*").order("created_at", { ascending: true })
await supabase.from("todos").insert({ task })
await supabase.from("todos").update({ is_done: true }).eq("id", id)
await supabase.from("todos").delete().eq("id", id)

Avatar feltöltés (Storage)

await supabase.storage.from("avatars").upload(path, file, { upsert: true })
const { data } = supabase.storage.from("avatars").getPublicUrl(path)
await supabase.from("profiles").update({ avatar_url: data.publicUrl }).eq("id", userId)

Rövid összefoglaló

  • Auth: signIn + redirect.
  • CRUD: from/select/insert/update/delete.
  • Storage: upload + public URL + DB update.

On this page