Comment utiliser Supabase avec Next.js?

Next.js est un framework pour le développement d'applications web basé sur React. Il facilite la création d'applications performantes et scalables en fournissant des fonctionnalités telles que le routage en temps réel et la gestion des différents statuts du serveur.

Supabase est une plateforme open source qui permet de gérer facilement une base de données Postgres avec une interface web. Cela peut être très utile pour les développeurs qui veulent utiliser une base de données avec Next.js sans avoir à gérer les aspects techniques liés à la configuration et à la gestion de la base de données.

Pour configurer Next.js avec Supabase, vous devez d'abord vous assurer que vous avez installé les dernières versions de Next.js et de Supabase. Vous pouvez vérifier les versions en utilisant les commandes suivantes :

npx create-next-app@latest
npm install @supabase/supabase-js

Une fois que vous avez installé Next.js et Supabase, vous pouvez configurer l'accès à votre base de données en ajoutant les informations de connexion dans un fichier .env dans le répertoire racine de votre projet. Vous devez ajouter les variables suivantes :

SUPABASE_URL=https://<your-project-name>.supabase.co
SUPABASE_ANON_KEY=<your-project-anon-key>

Vous pouvez trouver les informations de connexion en vous connectant à votre compte Supabase et en naviguant vers la page "Project Settings" de votre projet.

Ensuite, vous pouvez utiliser l'objet supabase de l'package supabase-client pour accéder à votre base de données depuis votre application Next.js. Voici un exemple simple qui affiche tous les enregistrements d'une table dans une page de votre application :

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://<your-project-name>.supabase.co', 'your-project-anon-key')

Vous pouvez maintenant importer votre client dans un composant et écrire la query correspondante:

import React from 'react'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { supabase } from './src/supabase.js'

const Page = () => {
  const router = useRouter()
  const { table } = router.query

  useEffect(() => {
    supabase
      .from(table)
      .select('*')
      .then((response) => {
        // handle response
      })
  }, [])

  return (
    <div>
      // display data
    </div>
  )
}

export default Page

Ce code utilise la méthode from de l'objet supabase pour sélectionner une table dans votre base de données, puis la méthode select pour sélectionner tous les enregistrements de cette table. Vous pouvez ensuite utiliser la réponse de la requête pour afficher les données dans votre page.

Il est important de noter que vous devez utiliser la fonction useEffect de React pour exécuter la requête à la base de données, car elle ne doit être effectuée qu'une seule fois au chargement de la page. Vous pouvez également utiliser la fonction useRouter de Next.js pour récupérer les paramètres.

Guillaume Duhan