Centraliser vos formulaires Markdown, automatiser l'envoi des réponses vers Supabase et exposer un espace sécurisé dans Next.js.

FormsMD & Supabase

Ce guide résume l'intégration actuellement en place dans le projet :

Les formulaires sont décrits en Markdown (FormsMD) et versionnés dans le dossier src/lib/forms.ts.
Un espace privé /forms propose les QCM, protégé par une authentification par e-mail.
Supabase stocke les réponses (tables formsmd_qcm_introduction et formsmd_qcm_migrations).

Flux recommandé

Rédaction : un Product Builder rédige le formulaire dans FormsMD.
Validation : la Pull Request vérifie la structure via ESLint/Tests.
Publication : merge → déploiement → nouveau formulaire disponible dans /forms.
Collecte : l'Edge Function Supabase reçoit la soumission et la stocke.

sequenceDiagram
    participant Author as Auteur FormsMD
    participant Repo as Repo Git
    participant NextApp as Next.js (/forms)
    participant Edge as Supabase Edge Function
    participant DB as Table Postgres

    Author->>Repo: Commit Markdown (QCM)
    Repo->>NextApp: Build, déploiement
    NextApp->>User: Interface sécurisée après login e-mail
    User->>NextApp: Soumet le formulaire
    NextApp->>Edge: POST /formsmd/submit (payload JSON)
    Edge->>DB: INSERT réponse + métadonnées
    Edge-->>NextApp: 200 OK / erreurs

Exemple d'Edge Function

🔐 Remplacez formsmd_qcm_introduction par la table cible et activez les RLS avec une policy spécifique aux Edge Functions.

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

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!,
);

export async function handleSubmission(payload: {
  form: string;
  responderEmail: string;
  answers: Record<string, string>;
}) {
  const result = await supabase
    .from('formsmd_qcm_introduction')
    .insert({
      form_slug: payload.form,
      responder_email: payload.responderEmail,
      answers: payload.answers,
    })
    .select('*')
    .single();

  if (result.error) {
    throw new Error(result.error.message);
  }

  return result.data;
}

L'interface /forms est rendue uniquement si le cookie forms-auth-email est présent. L'authentification actuelle est volontairement simple (e-mail uniquement) pour préparer l'arrivée d'un dashboard Supabase.

const authEmail = cookies().get('forms-auth-email');
if (!authEmail) {
  redirect('/forms/login');
}

Aller plus loin

Ajouter un envoi réel dans Supabase via Edge Functions ou Route Handler.
Générer dynamiquement les formulaires à partir de fichiers *.form.md avec formsmd.
Construire un dashboard /forms/results qui consomme Supabase (tableau, export CSV, accès par rôle).

La simulation de soumission est déjà câblée dans /forms/[slug]. Il suffit de remplacer le console.info par un appel HTTP vers votre Edge Function Supabase.

FormsMD x Supabase

FormsMD & Supabase

Flux recommandé

Exemple d'Edge Function

Accès restreint dans Next.js

Aller plus loin

On this page