Premier projet
Crée ton projet Supabase, configure les clés et connecte ton app en 5 minutes.
2.1Créer un projet Supabase
- Va sur supabase.com et crée un compte (GitHub recommandé)
- Clique "New Project"
- Choisis un nom, un mot de passe pour la base, et la région West EU (Paris)
- Attends 1-2 minutes que le projet se déploie
2.2Les clés API
Une fois le projet créé, va dans Settings → API. Tu y trouves 3 informations essentielles :
Project URL
L'URL de ton projet : https://xxxxx.supabase.co
C'est l'adresse de ton backend Supabase.
anon key (publique)
Clé publique utilisée côté client (navigateur). Elle est safe à exposer car les Row Level Security policies protègent tes données.
→ Utilisée dans ton app React/Next.js
service_role key (secrète)
Clé admin qui bypass les RLS. Ne JAMAIS l'exposer côté client.
→ Uniquement côté serveur (API Routes, webhooks)
2.3Installer le SDK
Installationbash
npm install @supabase/supabase-jsPour un projet Next.js avec gestion de cookies (SSR), installe aussi le helper :
Helper Next.js (SSR)bash
npm install @supabase/ssr2.4Variables d'environnement
Crée un fichier .env.local à la racine de ton projet Next.js :
.env.localbash
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...
# Clé secrète (jamais exposée côté client)
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIs...2.5Créer le client Supabase
On crée deux fichiers : un client navigateur et un client serveur.
lib/supabase/client.ts (navigateur)typescript
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}lib/supabase/server.ts (serveur)typescript
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() {
return cookieStore.getAll()
},
setAll(cookiesToSet) {
cookiesToSet.forEach(({ name, value, options }) => {
cookieStore.set(name, value, options)
})
},
},
}
)
}2.6Tester la connexion
Un test rapide dans un Server Componenttypescript
// app/test/page.tsx
import { createClient } from '@/lib/supabase/server'
export default async function TestPage() {
const supabase = await createClient()
// Récupère la version de Postgres (preuve que ça marche)
const { data, error } = await supabase
.from('_supabase_migrations')
.select('*')
.limit(1)
return (
<div>
<h1>Connexion Supabase</h1>
{error
? <p>Erreur : {error.message}</p>
: <p>Connecté !</p>
}
</div>
)
}