NextJS & Supabase

Supabase est une alternative open-source à Firebase qui offre une base de données, une authentification, des API instantanées, des webhooks en temps réel, et plus encore.

Création du projet Next.js

1. Ouvrez un terminal et exécutez la commande suivante :

npx create-next-app@latest mon-projet

2. Répondez aux questions de configuration selon vos préférences.

3. Naviguez dans le dossier du projet :

cd mon-projet

Intégration de Supabase

1. Installez le SDK Supabase pour Next.js :

npm install @supabase/supabase-js @supabase/auth-helpers-nextjs

2. Créez un compte sur Supabase (https://supabase.com) si ce n'est pas déjà fait.

3. Créez un nouveau projet Supabase et notez l'URL et la clé API.

4. Ajoutez ces informations à votre fichier .env.local à la racine du projet :

NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_api_supabase

Configuration de l'authentification

1. Créez un fichier lib/supabase.js pour initialiser le client Supabase :

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

2. Mettez en place les composants d'authentification dans votre application. Par exemple, créez un composant SignUp.js :

import { useState } from 'react'
import { supabase } from '../lib/supabase'

export default function SignUp() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSignUp = async (e) => {
    e.preventDefault()
    const { user, error } = await supabase.auth.signUp({ email, password })
    if (error) console.log('Erreur:', error.message)
    else console.log('Utilisateur inscrit:', user)
  }

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Mot de passe"
      />
      <button type="submit">S'inscrire</button>
    </form>
  )
}

3. Créez des composants similaires pour la connexion et la déconnexion.

Gestion des sessions

Pour gérer les sessions utilisateur, vous pouvez utiliser le hook useUser fourni par Supabase :

import { useUser } from '@supabase/auth-helpers-react'

export default function Profile() {
  const { user } = useUser()

  if (!user) return <div>Connectez-vous pour voir votre profil</div>

  return <div>Bienvenue, {user.email}</div>
}

Vous pouvez ensuite étendre les fonctionnalités en ajoutant des tables personnalisées dans Supabase pour stocker des données spécifiques à votre application.