Learn

Créer ton premier projet

Supabase

Du compte gratuit à l'URL + anon key copiées dans ton .env.

Dans cette leçon, tu vas créer ton compte Supabase, lancer un premier projet sur le free tier, et récupérer les deux valeurs dont toutes tes apps auront besoin : l'URL du projet et la clé publishable (ou anon key). À la fin, elles seront dans ton .env et tu seras prêt pour les leçons suivantes.

Créer un compte et un projet

Ouvre database.new dans ton navigateur. Cette URL redirige directement vers l'interface de création de projet dans le dashboard Supabase.

Si tu n'as pas encore de compte, tu peux t'inscrire avec GitHub, Google ou un email - c'est gratuit et ne demande pas de carte bancaire pour le free tier.

Une fois connecté, l'interface te demande :

  • Organization : garde celle créée par défaut ou crée-en une nouvelle.
  • Name : le nom de ton projet (par exemple mon-premier-projet).
  • Database Password : génère un mot de passe fort et sauvegarde-le quelque part - il te servira si tu te connectes directement à PostgreSQL.
  • Region : choisis la région la plus proche de tes utilisateurs. Pour commencer, West EU (Ireland) ou EU West (Frankfurt) fonctionnent bien si tu es en Europe.
  • Plan : sélectionne Free.

Clique sur Create new project. Le provisionnement prend environ une minute. Supabase crée une instance PostgreSQL dédiée pour ton projet.

Récupérer l'URL et la clé API

C'est la partie la plus importante de cette leçon. Ton code a besoin de deux valeurs pour se connecter à Supabase :

  • Project URL : l'adresse de ton projet (quelque chose comme https://xyzabc.supabase.co).
  • Publishable key (ou anon key) : une clé publique, sûre à exposer côté client. Elle donne accès à ta base avec les permissions du rôle anon de PostgreSQL, c'est-à-dire uniquement ce que tes politiques RLS autorisent.

Dans le dashboard, va dans Settings > API Keys. Tu y trouves :

  • L'URL de ton projet dans la section "Project URL".
  • La publishable key (ou anon key en legacy) dans la section dédiée.

Ne copie jamais la secret key (ou service_role) dans un fichier côté client ou dans un repo public - elle bypasse toutes les politiques de sécurité.

Mettre les clés dans ton .env

Crée un fichier .env.local à la racine de ton projet et colle tes valeurs :

NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxx

Si tu travailles avec l'ancienne convention (anon key), les noms de variables courantes sont :

NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

Le préfixe NEXT_PUBLIC_ est spécifique à Next.js : il rend la variable accessible dans le code client. Pour d'autres frameworks (React + Vite, SvelteKit, etc.), le préfixe change (VITE_, PUBLIC_, etc.) mais les valeurs restent identiques.

Installer le client Supabase

Pour que ton app puisse parler à Supabase, installe le SDK JavaScript :

shell
pnpm add @supabase/supabase-js

Optionnel - le CLI Supabase

Le CLI Supabase permet de gérer ton projet en local (migrations, types TypeScript générés depuis ton schéma, stack locale avec Docker). C'est optionnel pour l'instant - les leçons suivantes t'y amèneront progressivement. Voici comment l'installer si tu veux l'avoir dès maintenant :

Sur macOS / Linux avec Homebrew :

shell
brew install supabase/tap/supabase

Sur Windows avec Scoop :

shell
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

Via npm (dépendance locale au projet) :

shell
pnpm add -D supabase

Tu peux aussi l'invoquer sans installation globale avec npx supabase <commande>.

Sources

À côté

À côté · package-managerspnpm vs bun vs npm : lequel choisir

Concepts-ponts

Coche les étapes pour débloquer la suite

Retour au cours