Supabase local/distant
Intégrer l'API Supabase dans votre projet Next.js
Voici les étapes pour utiliser Supabase dans un projet Next.js :
-
Installer Node.js : https://nodejs.org/en/download/
-
Installer yarn :
npm install --global yarn
-
Installer "Docker Desktop" : https://docs.docker.com/desktop/install/windows-install/ (redémarrer l'ordi.)
-
Installer Supabase CLI :
yarn add supabase --save-dev
-
Se connecter à Supabase :
yarn supabase login
-
Dans le répertoire du projet :
yarn supabase init
Utiliser le serveur local Supabase
Il est également possible d'utiliser le serveur Supabase en local
Pour installer Supabase localement : yarn supabase start
Pour gérer le serveur local Supabase, dans un navigateur Web, ouvrir l'URL : http://127.0.0.1:54323
Pour démarrer le projet Next.js en mode 'développement' : yarn dev
Installer Supabase localement à partir des sources
Avant de commencer, assurez-vous que vous avez Docker installé et fonctionnant sur votre machine.
-
Se placer dans le dossier de vos 'Documents'
-
Cloner le dépôt
supabase
en utilisantgit
:git clone https://github.com/supabase/supabase
-
Naviguer dans le répertoire du projet cloné :
cd supabase/docker
-
Copier le fichier .env.example en .env
-
Démarrer Supabase à l'aide de
docker-compose
:docker-compose -f docker-compose.yml up -d
Cela lancera tous les services nécessaires pour exécuter Supabase localement, y compris la base de données Postgres, l'API Auth, l'API Realtime, et plus encore.
-
Si demandé, autoriser l'ouverture des ports nécessaires
-
Mémoriser les URL et les clés
Il est possible d'utiliser le serveur Supabase (local) dans votre projet Next.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'http://localhost:8000' // L'URL par défaut pour Supabase en local
const supabaseAnonKey = 'your-anon-key' // Remplacez avec votre propre clé anonyme
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
Utiliser le serveur distant Supabase
Il est possible d'utiliser le serveur Supabase (à distance) dans votre projet Next.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://supabase.com/
const supabaseAnonKey = 'your-anon-key' // Remplacez avec votre propre clé anonyme
export const supabase = createClient(supabaseUrl, supabaseAnonKey)