Aller au contenu principal

Supabase local/distant

Intégrer l'API Supabase dans votre projet Next.js

Voici les étapes pour utiliser Supabase dans un projet Next.js :

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)

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)