Connexion à Supabase

Connexion à Supabase depuis Next.js

Objectifs

• Compléter notre projet Next.js (créé précédemment).
• Configurer l'accès à Supabase depuis le code.
• Récupérer et afficher une question dans la console.

Notions théoriques

Nous avons créé un projet Next.js lors du lancement du projet. Mais qu'est-ce que Next.js exactement ?

1. Qu’est-ce que Next.js ?

Next.js est un framework JavaScript moderne basé sur React.

astuce

Next.js permet de créer rapidement des applications Web performantes.

Avec Next.js, nous allons :

• créer des pages Web dynamiques,
• gérer la navigation entre les pages,
• utiliser des composants React,
• héberger facilement votre projet avec Vercel.

2. Installer le client Supabase

Afin de stocker des données dans Supabase depuis notre application Next.js, nous devons installer le client Supabase.

Supabase propose une API JavaScript pour interagir avec votre base : lire, écrire, modifier les données.

Pour l’utiliser, il suffit d'installer le client :

npm install @supabase/supabase-js

Puis, vous devez initialiser le client dans votre code avec :

• l’URL de votre projet Supabase,
• la clé “anonyme” (public key) fournie par Supabase.

astuce

Ces 2 clés d’accès sont disponibles dans Supabase > Project Settings > API.

3. Variables d’environnement

Les 2 clés d’accès à Supabase ne doivent pas être visibles dans le code.

On les stocke dans un fichier .env.local :

NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

Dans votre code, vous les utilisez ainsi :

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

astuce

Les variables qui commencent par NEXT_PUBLIC_ sont accessibles dans le navigateur.

4. Lire une table avec Supabase

Pour lire des données, vous utilisez la méthode .from('nom_table').select() :

const { data, error } = await supabase
  .from('question')
  .select('*');

Vous pouvez ensuite afficher ces données dans la console ou les utiliser dans vos composants.

---

Quelques méthodes à connaître

Méthode	Rôle
createClient(url, key)	Crée une connexion à Supabase
.from('table')	Cible une table
.select('*')	Récupère toutes les colonnes
.limit(n)	Limite le nombre de résultats
.insert(data)	Insère des données
.update(data)	Modifie des données

---

Test de mémorisation/compréhension

Quelle commande permet de créer un projet Next.js ?

npx create-next-app

npm init react-app

npx vue-create

Quel fichier contient les clés d’accès à Supabase ?

.env.local

config.json

supabase.ts

Que fait la commande `npm run dev` ?

Elle compile le code TypeScript

Elle lance le serveur de développement Next.js

Elle démarre Supabase

Pourquoi utilise-t-on un fichier `.env.local` dans un projet Next.js avec Supabase ?

Pour stocker les styles CSS

Pour définir les variables d’environnement sensibles

Pour configurer les routes dynamiques

Pour stocker les composants React

Pour éviter d’utiliser TypeScript

Pour activer le mode développement

Quelle est la bonne syntaxe pour initialiser le client Supabase dans le code ?

createClient(url, key)

supabase.connect(url, key)

new Supabase(url, key)

supabase = connectClient(url, key)

createSupabaseClient(key, url)

initSupabase(url, key)

Pourquoi le mot-clé `await` est-il nécessaire lors de l’appel à Supabase ?

Parce que Supabase ne fonctionne qu’en mode synchrone

Pour bloquer l’exécution du navigateur

Pour attendre que la requête réseau soit terminée

Pour afficher les données dans la console

Pour créer une nouvelle table

Pour éviter les erreurs de compilation

Quelle méthode Javascript est utilisée pour récupérer toutes les colonnes d’une table ?

.get('*')

.select('*')

.fetch('*')

.read('*')

.columns('*')

.from('*')

À quoi sert le hook `useEffect` dans le composant React de la page d’accueil ?

Créer un formulaire

Lancer une action au chargement de la page

Définir la structure de la base de données

Afficher un message d'erreur

Créer une nouvelle table dans Supabase

Gérer les styles CSS dynamiques

Quelle ligne de code permet de limiter le nombre de résultats récupérés dans la BD ?

.select('*', 1)

.limit(1)

.take(1)

.first(1)

.restrict(1)

.slice(0,1)

Que fait ce bloc de code : `if (error) console.error(error); else console.log(data);` ?

Il supprime les données si une erreur est détectée

Il affiche les données sauf si elles sont vides

Il affiche l’erreur si elle existe, sinon les données

Il affiche toujours les deux : erreur et données

Il empêche le chargement de la page

Il affiche un message d’erreur personnalisé

Quelle méthode Javascript sera utilisée pour ajouter une nouvelle ligne dans une table ?

.append(data)

.insert(data)

.add(data)

.push(data)

.create(data)

.save(data)

---

TP pour réfléchir et résoudre des problèmes

Objectif du TP

Vous allez :

• ouvrir le projet Next.js créé précédemment,
• installer le client Supabase,
• configurer les variables d’environnement,
• afficher la première question du quiz dans la console.

---

Étapes à suivre

1. Dans Supabase, déactiver les RLS pour la table question

• Allez dans Supabase > Table Editor > question

  

• Cliquez sur le bouton Add RLS policy

  

• Cliquez sur le bouton Disable RLS.

  

• Cliquez sur le bouton Confirm.

astuce

• La RLS sera réactivée plus tard (pour la sécurité). Nous verrons, à une étape ultérieure, comment faire ça bien.
• Pour l’instant, nous voulons juste récupérer des données facilement.

2. Démarrer VSCode et ré-ouvrir le dossier du projet :

---

3. Ouvrir le terminal intégré dans VS Code. Menu Terminal → New Terminal.

---

4. Installer Supabase :

Exécutez la commande suivante dans le terminal pour installer le client Supabase :

npm install @supabase/supabase-js

---

5. Créer un fichier .env.local à la racine du projet.

info

Pour créer un fichier dans VS Code :

• Faites clic droit dans l’explorateur de fichiers,
• Choisissez "New File",
• Nommez le fichier .env.local.

Nous allons y stocker les clés d’accès à Supabase.

• NEXT_PUBLIC_SUPABASE_URL (l’URL de votre projet Supabase)
• NEXT_PUBLIC_SUPABASE_ANON_KEY la clé “anonyme” (anon public)

astuce

Ces 2 clés d’accès sont disponibles dans Supabase > Project Settings.

---

---

Copiez-collez ces clés dans le fichier .env.local :

NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

---

6. Créer un dossier lib/ à la racine du projet, puis un fichier supabaseClient.ts à l’intérieur :

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

---

7. Lancer le serveur de développement :

npm run dev

---

8. Vider et modifier app/pages.tsx pour afficher une question dans la console :

"use client"

import { useEffect } from 'react';
import { supabase } from '../lib/supabaseClient';

export default function Home() {
  useEffect(() => {
    async function fetchQuestion() {
      const { data, error } = await supabase
        .from('question')
        .select('*')
        .limit(1);

      if (error) console.error(error);
      else console.log(data);
    }

    fetchQuestion();
  }, []);

  return <h1>Bienvenue sur CyberQuiz</h1>;
}

---

9. Ouvrir la console du navigateur pour vérifier que la question s’affiche correctement.

• Ouvrez votre navigateur.
• Allez sur la page d’accueil de votre projet.
• Faites clic droit > "Inspecter" > "Console".
• Vous verrez s’afficher la question récupérée depuis Supabase (dans la console).

---

Décryptage du code

useEffect(() => { ... })

React est une bibliothèque JavaScript pour créer des interfaces utilisateur.

useEffect est une fonction spéciale (on dit "hook") fournie par React. Elle permet de faire une action au moment où la page est affichée.

Quand la page d’accueil de votre quiz s’ouvre, vous voulez récupérer une question depuis la base de données Supabase. C’est exactement ce que permet useEffect.

astuce

Sans useEffect, le code ne saurait quand exécuter le chargement des données.
useEffect = "Quand la page se charge, fais ceci".

async function fetchQuestion() { ... }

Le mot-clé async signifie que la fonction est asynchrone.

Une fonction asynchrone est une fonction qui peut attendre des choses qui prennent du temps, comme :

• récupérer des données sur Internet,
• lire un fichier,
• attendre une réponse d’un serveur.

Dans notre cas, on attend une réponse de Supabase.

await supabase.from('question').select('*').limit(1);

Cette ligne demande à Supabase :

• d’aller chercher dans la table question,
• de sélectionner toutes les colonnes ('*'),
• mais de ne prendre qu'une seule ligne (limit(1)).

Le mot await signifie :

"Attends que Supabase réponde avant de passer à la suite."

La réponse de Supabase est stockée dans deux variables :

const { data, error } = ...

• data contiendra la question récupérée.
• error contiendra une erreur s’il y en a une (par exemple si la table n’existe pas).

if (error) console.error(error); else console.log(data);

Ce code vérifie :

• S’il y a une erreur → on l’affiche dans la console.
• Sinon → on affiche les données récupérées (la question).

C’est une bonne pratique : toujours vérifier si une erreur s’est produite.

fetchQuestion();

On appelle la fonction fetchQuestion() pour qu’elle s’exécute.
Cela se fait à l’intérieur de useEffect, donc automatiquement au chargement de la page.

Élément	Rôle
useEffect	Lance une action au chargement de la page
async	Permet d’attendre une opération longue
await	Attend la réponse de Supabase
supabase.from(...).select(...)	Lit une table dans la base de données
console.log(data)	Affiche les données dans la console du navigateur
console.error(error)	Affiche une erreur si quelque chose ne va pas

remarque

• Le code ne modifie pas encore l’interface, mais il récupère déjà des données.
• Vous apprenez ici à connecter votre application à une vraie base de données.
• Dans les prochaines séances, vous apprendrez à afficher ces données à l’écran, et pas seulement dans la console.

Corrigé du TP

• Le projet quiz-cyber a bien été créé avec TypeScript.
• Le client Supabase est installé via npm install @supabase/supabase-js.
• Le fichier .env.local contient les bonnes clés.
• Le fichier supabaseClient.ts est bien configuré dans lib/.
• Le composant pages.tsx utilise useEffect pour appeler Supabase.
• La question s’affiche dans la console du navigateur.
• Le projet fonctionne en local avec npm run dev.