GUIDA

La tua prima app con Next.js

Una lista di cose da fare in cui le persone si registrano con la loro email e vedono solo le proprie attività. Userai la dashboard per il database e @espobase/client nell'app.

← Tutte le guide

1. Crea un progetto e una tabella

Nella dashboard, crea un progetto. Apri l'Editor SQL ed esegui:

create table todos (
  id bigint generated by default as identity primary key,
  owner_id uuid not null default espobase.user_id(),
  title text not null,
  done boolean not null default false,
  created_at timestamptz not null default now()
);

-- Row level security is already on. This rule lets each signed-in user see and change only their own todos:
create policy "Users manage their own todos" on todos
  for all
  using (owner_id = espobase.user_id())
  with check (owner_id = espobase.user_id());

Preferisci cliccare? Crea la tabella nell'Editor tabelle, poi aggiungi il modello “L'utente è proprietario della riga” in Database › Policy con owner_id come colonna del proprietario.

2. Impostazioni e chiavi

  • Autenticazione › Impostazioni: imposta come Site URL l'indirizzo in cui gira la tua app (ad es. http://localhost:3000 durante lo sviluppo). Le email di conferma e di reimpostazione della password rimandano lì.
  • API: crea una chiave pubblicabile. Copiala subito: le chiavi vengono mostrate solo al momento della creazione.

Nella tua app Next.js, installa il client e aggiungi le impostazioni a .env.local:

npm install @espobase/client
NEXT_PUBLIC_ESPOBASE_URL=https://api.espobase.com/project/<your project ref>
NEXT_PUBLIC_ESPOBASE_KEY=eb_pk_…   # the PUBLISHABLE key: safe in the browser

Non mettere mai una chiave segreta (eb_sk_…) in una variabile NEXT_PUBLIC_: queste variabili vengono inviate al browser. Con la CLI, npx espobase init mostra l'URL e scrive i tipi TypeScript per te.

3. Il client

// lib/espobase.ts
import { createClient } from "@espobase/client";

export const espobase = createClient(
  process.env.NEXT_PUBLIC_ESPOBASE_URL!,
  process.env.NEXT_PUBLIC_ESPOBASE_KEY!,
);

4. Registrazione e accesso

"use client";
import { espobase } from "@/lib/espobase";

// Sign up: Espobase emails a confirmation link to your Site URL.
await espobase.auth.signUp({ email, password });

// Sign in (after confirming): the session is kept and refreshed for you.
await espobase.auth.signInWithPassword({ email, password });

// React to sign-in and sign-out anywhere in your app.
espobase.auth.onAuthStateChange((_event, session) => setSession(session));

Il link di conferma apre il tuo Site URL con il token dopo un #. Confermalo con espobase.auth.verifyEmail({ token }): vedi Accesso e regole di sicurezza per le poche righe che lo fanno e per la reimpostazione della password.

5. Leggi e scrivi i tuoi dati

// Only the signed-in user's todos come back: the security rule filters them.
const { data: todos, error } = await espobase.from("todos").select("*").order("created_at");

// owner_id fills itself in (its default is espobase.user_id()).
await espobase.from("todos").insert({ title: "Buy milk" });

await espobase.from("todos").update({ done: true }).eq("id", todo.id);
await espobase.from("todos").delete().eq("id", todo.id);

Ogni richiesta porta con sé l'utente che ha effettuato l'accesso, e il database applica la tua regola. Un utente che non ha effettuato l'accesso riceve una lista vuota, e nessuno può leggere o modificare le attività di un altro, nemmeno chiamando direttamente l'API.