Deployer Next.js sur Supabase

Pourquoi Déployer Next.js sur Supabase ?

Déployer un projet Next.js sur Supabase peut offrir une solution complète et flexible pour les développeurs. Supabase, une plateforme d'infrastructure backend open-source, offre des fonctionnalités telles que la base de données relationnelle avec PostgreSQL, le stockage objet, l’authentification sociale et un serveur d’API auto-hébergé.

Au quotidien, un développeur pourrait avoir besoin de déployer une application Next.js pour plusieurs raisons :

• Créer des applications web modernes et réactives.
• Utiliser les fonctionnalités serverless et auto-scaling offertes par Supabase pour gérer les charges de travail de l'application.
• Faciliter le développement collaboratif en utilisant les outils de gestion de base de données et d’API de Supabase.

Un cas concret pourrait être la création d'une application de gestion des tâches. Cette application nécessite une interface utilisateur réactive pour ajouter, modifier et suivre les tâches, ainsi qu'un backend robuste pour stocker et gérer ces données en temps réel.

Prérequis

• Connaissances en JavaScript/TypeScript
• Familiarité avec Next.js
• Supabase compte (gratuit pour une utilisation limitée)
• Node.js installé sur votre machine
• npm ou yarn comme gestionnaire de paquets
• Terminal accessible

Concepts Fondamentaux

1. Supabase et le backend auto-généré

Supabase offre un serveur d'API auto-hébergé, ce qui signifie que vous n’avez pas besoin de configurer votre propre serveur pour exposer des données via une API RESTful.

## Installation de supabase CLI (Command Line Interface)
npm install -g supabase-cli

## Connexion à votre projet Supabase
supabase login

2. Authentification avec Supabase

Supabase offre un système d’authentification robuste qui supporte les comptes locaux, la connexion sociale et le fournisseur OAuth.

// Utilisation du client Supabase pour l'authentification
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

// Connexion à l'API
supabase.auth.signIn({ email: 'email@example.com', password: 'password' })
  .then(response => {
    if (response.error) throw response.error;
    console.log('Connexion réussie');
  });

3. Stockage objet et BLOB

Supabase offre un stockage objet pour stocker des fichiers binaires, tels que les images et les documents.

// Upload d'un fichier sur Supabase Storage
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

supabase.storage.from('avatars').upload(file.name, file)
  .then(response => {
    if (response.error) throw response.error;
    console.log('Fichier uploadé');
  });

Mise en Pratique : Projet Fil Rouge

Mini-projet : Gestionnaire de Tâches

Étape 1 : Initialiser le projet Next.js

## Créer un nouveau projet Next.js
npx create-next-app@latest task-manager

## Naviguer dans le dossier du projet
cd task-manager

Étape 2 : Configurer Supabase

• Créez une nouvelle base de données sur Supabase et notez les informations d'identification.
• Ajoutez le client Supabase à votre projet.

## Installer le client Supabase
npm install @supabase/supabase-js

Étape 3 : Créer la table des tâches

-- Création de la table "tasks" dans Supabase
CREATE TABLE tasks (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  completed BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Étape 4 : Connexion à Supabase et récupération des tâches

// pages/index.js
import { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

export default function Home() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetchTasks();
  }, []);

  async function fetchTasks() {
    try {
      const { data, error } = await supabase
        .from('tasks')
        .select('*');

      if (error) throw error;
      setTasks(data);
    } catch (error) {
      console.error(error.message);
    }
  }

  return (
    <div>
      <h1>Gestionnaire de Tâches</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.title} - {task.description}
          </li>
        ))}
      </ul>
    </div>
  );
}

Étape 5 : Ajouter une tâche

// pages/index.js (suite)
export default function Home() {
  // ...
  const [newTask, setNewTask] = useState('');

  async function addTask(e) {
    e.preventDefault();
    try {
      await supabase
        .from('tasks')
        .insert([{ title: newTask }]);

      setTasks([...tasks, { id: tasks.length + 1, title: newTask }]);
      setNewTask('');
    } catch (error) {
      console.error(error.message);
    }
  }

  return (
    <div>
      {/* ... */}
      <form onSubmit={addTask}>
        <input type="text" value={newTask} onChange={e => setNewTask(e.target.value)} />
        <button type="submit">Ajouter</button>
      </form>
    </div>
  );
}

Erreurs Fréquentes et Debugging

1. Connexion échouée à Supabase

Code incorrect :

const supabase = createClient('https://your-supabase-url.supabase.co', 'your-anon-key');

Code correct :

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

2. Erreur lors de l'upload d'un fichier

Code incorrect :

supabase.storage.from('avatars').upload(file.name, file);

Code correct :

const { data, error } = await supabase.storage.from('avatars').upload(file.name, file);
if (error) throw error;

3. Erreur lors de la récupération des données

Code incorrect :

supabase.from('tasks').select('*');

Code correct :

const { data, error } = await supabase.from('tasks').select('*');
if (error) throw error;
setTasks(data);

Pour Aller Plus Loins

1. Utiliser Supabase Functions

Supabase offre des fonctions serverless pour exécuter du code côté serveur.

• Documentation sur les fonctions Supabase

2. Intégrer Next.js et Supabase avec NextAuth.js

NextAuth.js est une bibliothèque qui facilite l'authentification dans Next.js applications.

• Intégration de NextAuth.js avec Supabase

3. Utiliser Supabase Realtime API

Supabase offre une fonctionnalité réal-time pour les applications qui nécessitent des mises à jour en temps réel.

• Documentation sur le Realtime API de Supabase

Défi Pratique

Défi : Créer une application complète de todo list avec les fonctionnalités suivantes :

• Ajouter des tâches
• Marquer des tâches comme terminées
• Supprimer des tâches
• Afficher le nombre de tâches restantes

Instructions :

1. Suivez les étapes ci-dessus pour créer la structure de base de votre application.
2. Ajoutez une nouvelle fonctionnalité pour marquer et supprimer des tâches.
3. Utilisez Supabase Realtime API pour mettre à jour l'interface utilisateur en temps réel.

Indice :

• Pour la suppression, utilisez supabase.from('tasks').delete().eq('id', taskId).
• Pour marquer une tâche comme terminée, utilisez supabase.from('tasks').update({ completed: true }).eq('id', taskId).