Aller au contenu principal

Supabase

Supabase est une alternative open-source à Firebase qui offre une base de données, une authentification, des API instantanées, des webhooks en temps réel, et plus encore.

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 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)

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.

  1. Se placer dans le dossier de vos 'Documents'

  2. Cloner le dépôt supabase en utilisant git :

    git clone https://github.com/supabase/supabase

  3. Naviguer dans le répertoire du projet cloné :

    cd supabase/docker

  4. Copier le fichier .env.example en .env

  5. 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.

  1. Si demandé, autoriser l'ouverture des ports nécessaires

  2. 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)