Träff 6 · Data

Data som stannar

Koppla en riktig databas med Supabase. Miljövariabler och var datan bor.

Går du kursen på egen hand? Hoppa över rundan och demon. Läs genomgången, gör övningen och hemuppgiften – och visa någon vad du byggt. Fastnar du: klistra in felet till Claude, eller se om en ledd cirkel passar dig eller din arbetsplats.

Mål för träffen

  • Förstå skillnaden mellan frontend, backend och databas.
  • Ha en Supabase-databas kopplad till ditt cirkelprojekt.
  • Kunna hantera miljövariabler – och veta varför de aldrig ska till GitHub.

Agenda (60 min)

Tid Vad
0–10 Runda: vilken förbättring fick du?
10–25 Genomgång: databas, Supabase och nycklar
25–50 Koppla Supabase – lokalt och på Vercel
50–60 Testa varandras appar: överlever datan en omladdning?

Genomgång

Var bor datan?

Hittills har din app glömt allt när du laddat om sidan (eller sparat i webbläsaren, där bara du ser det). En databas gör att datan finns kvar och är samma för alla användare.

Del Liknelse Hos oss
Frontend Skyltfönstret – det användaren ser Next.js-sidorna
Backend Personalen bakom disken Next.js server + Supabase
Databas Lagret Supabase (PostgreSQL)

Supabase ger dig en riktig databas, inloggning och ett webbgränssnitt där du kan titta i tabellerna som i ett kalkylark – gratis för små projekt.

Nycklar och miljövariabler

För att appen ska prata med Supabase behövs en adress och en nyckel. De läggs i en fil som heter .env.local – aldrig direkt i koden, och den filen ska aldrig till GitHub.

Supabase har två sorters nycklar:

  • Publik nyckel (publishable / anon) – får finnas i webbläsaren. Skyddet ligger i databasens regler (träff 7).
  • Hemlig nyckel (secret / service_role) – full åtkomst till allt. Används inte i den här cirkeln. Hamnar den fel kan vem som helst läsa och radera allt.

Samma variabler läggs in i Vercel (Settings → Environment Variables) så att den publicerade appen också hittar databasen.

Välj region i EU

När du skapar projektet i Supabase: välj en region i EU. Det är en god vana inför riktiga projekt – även om vi inte lagrar personuppgifter nu.

Övning

  1. Skapa ett nytt projekt på supabase.com (EU-region, spara databaslösenordet i din lösenordshanterare).
  2. Kör prompt C1 – låt Claude föreslå tabeller utifrån din CLAUDE.md. Granska förslaget.
  3. Kör prompt C2 – Claude ger dig SQL att klistra in i Supabase SQL Editor, och kopplar appen.
  4. Lägg in adress och publik nyckel i .env.local (Claude visar var du hittar dem under Project Settings → API).
  5. Testa lokalt: lägg till data, ladda om – finns den kvar? Titta i Table Editor i Supabase.
  6. Lägg in samma variabler i Vercel, push, och testa live (prompt F4).

Du är klar när

  • Data du skapar i den publicerade appen syns i Supabase Table Editor.
  • .env.local finns inte i ditt GitHub-repo (kolla på github.com!).

Hemuppgift

  • Låt någon annan lägga till data i din app. Ser du den?
  • Fundera: vem borde få se och ändra vad? Det är nästa träff.

Supabase-projektet pausat? Gratisprojekt pausas efter en tid utan aktivitet. Logga in på supabase.com och klicka Restore – datan finns kvar.