Pourquoi Next.js avec Supabase : guide pratique ?
Dans un monde où les développeurs doivent s'occuper de projets croissants et complexes, il est crucial d'utiliser des outils puissants pour optimiser la productivité et l'efficacité. Next.js et Supabase sont deux technologies très populaires qui peuvent grandement aider dans cette tâche.
Next.js : C'est un framework React côté serveur (SSR) qui permet une expérience utilisateur fluide tout en améliorant les performances des applications web.
Supabase : C'est une base de données réactive, dédiée à l'IA et aux applications web modernes. Elle offre une interface simplifiée pour gérer les données en temps réel.
L'utilisation de Next.js avec Supabase permet d'élargir considérablement les possibilités d'un développeur, en combinant le côté serveur rendu par Next.js avec la facilité de gestion des données fournie par Supabase. Cela offre une solution complète pour construire des applications web dynamiques et réactives.
Un cas concret serait un système de gestion de contenu (CMS) simple où les utilisateurs peuvent créer, lire, mettre à jour et supprimer des articles en temps réel, tout en bénéficiant d'une expérience utilisateur fluide et rapide.
Prerequis
Connaissances nécessaires :
- Base en React.js
- Compréhension de la programmation asynchrone avec JavaScript (Promise, async/await)
- Connaissance des bases de données SQL ou NoSQL
- Familiarité avec l'API REST et GraphQL
Outils à installer :
- Node.js (version recommandée : >= 14.0.0)
- npm (package manager pour Node.js)
- Code editor (ex: VSCode)
Concepts fondamentaux
1. Création d'un projet Next.js
Pour commencer, créons un nouveau projet Next.js en utilisant la commande create-next-app.
npx create-next-app@latest nextjs-supabase-example
cd nextjs-supabase-example
npm run dev
npx create-next-app@latest nextjs-supabase-example: Crée un nouveau projet Next.js nomménextjs-supabase-example.cd nextjs-supabase-example: Change le répertoire vers le nouveau projet.npm run dev: Lance le serveur de développement.
2. Installation de Supabase
Supabase est disponible en tant que package npm. Installez-le dans votre projet avec la commande suivante :
npm install @supabase/supabase-js
3. Configuration de Supabase
Créez un fichier .env.local à la racine de votre projet et ajoutez vos informations de connexion à Supabase.
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImN4eHhtdCIsInByZWZlcnJlZCI6IjQzMjgxMzE2LTYyNjktNGU1OC05MThkLTM3MmYxY2IwNDc0YSIsImlhdCI6MTY4NjEwMDAwMCwiZXhwIjozMjQ0NTgzMDB9.7ZnD2RJpXoKJhFqzHdU5a9g1tXVx8yS3tTnWz3kGf6Q
4. Connexion à Supabase dans Next.js
Créez un fichier supabaseClient.js dans le répertoire utils.
// utils/supabaseClient.js
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseAnonKey)
export default supabase
5. Utilisation de Supabase dans une page Next.js
Créez une page pages/index.js pour tester la connexion à Supabase.
// pages/index.js
import supabase from '../utils/supabaseClient'
export default function Home() {
const [data, setData] = React.useState(null)
const [loading, setLoading] = React.useState(true)
React.useEffect(() => {
async function fetchData() {
const { data: articles, error } = await supabase
.from('articles')
.select('*')
if (error) {
console.error(error)
} else {
setData(articles)
setLoading(false)
}
}
fetchData()
}, [])
return (
<div>
{loading ? (
<p>Loading...</p>
) : (
<ul>
{data.map((article) => (
<li key={article.id}>{article.title}</li>
))}
</ul>
)}
</div>
)
}
6. Création d'une table dans Supabase
Connectez-vous à votre projet Supabase via le tableau de bord et créez une nouvelle table nommée articles avec les champs suivants :
id(Type : Serial, Primary Key)title(Type : Text, Non Null)content(Type : Text, Nullable)
Mise en pratique : projet fil rouge
Pour illustrer l'intégration de Next.js et Supabase, créons un simple gestionnaire de tâches. Ce système permettra aux utilisateurs de créer, lire, mettre à jour et supprimer des tâches.
Étape 1 : Création d'un modèle pour les tâches
Créez une nouvelle table tasks dans Supabase avec les champs suivants :
id(Type : Serial, Primary Key)title(Type : Text, Non Null)description(Type : Text, Nullable)completed(Type : Boolean, Default : false)
Étape 2 : Création des composants React
Créez un composant TaskForm.js pour ajouter de nouvelles tâches.
// components/TaskForm.js
import { useState } from 'react'
import supabase from '../utils/supabaseClient'
export default function TaskForm({ onSubmit }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
async function handleSubmit(e) {
e.preventDefault()
const { data: task, error } = await supabase
.from('tasks')
.insert([{ title, description }])
if (error) {
console.error(error)
} else {
onSubmit(task[0])
setTitle('')
setDescription('')
}
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
<textarea
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<button type="submit">Add Task</button>
</form>
)
}
Étape 3 : Création de la page d'accueil
Créez une nouvelle page pages/index.js pour afficher et gérer les tâches.
// pages/index.js
import { useState, useEffect } from 'react'
import supabase from '../utils/supabaseClient'
import TaskForm from '../components/TaskForm'
export default function Home() {
const [tasks, setTasks] = useState([])
const [loading, setLoading] = useState(true)
useEffect(() => {
async function fetchData() {
const { data: taskData, error } = await supabase
.from('tasks')
.select('*')
if (error) {
console.error(error)
} else {
setTasks(taskData)
setLoading(false)
}
}
fetchData()
}, [])
async function addTask(newTask) {
setTasks([...tasks, newTask])
}
return (
<div>
{loading ? (
<p>Loading...</p>
) : (
<>
<h1>Task Manager</h1>
<TaskForm onSubmit={addTask} />
<ul>
{tasks.map((task) => (
<li key={task.id}>
<strong>{task.title}</strong>: {task.description}
<button
onClick={() =>
supabase
.from('tasks')
.delete()
.eq('id', task.id)
.then(() => setTasks(tasks.filter((t) => t.id !== task.id)))
}
>
Delete
</button>
</li>
))}
</ul>
</>
)}
</div>
)
}
Erreurs fréquentes et debugging
1. Erreur : supabase is not defined
## ❌ Mauvais
import supabase from './utils/supabaseClient'
function MyComponent() {
const { data, error } = await supabase.from('tasks').select('*')
}
## ✅ Correct
import supabase from '../utils/supabaseClient'
export default function MyComponent() {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
async function fetchData() {
const { data: taskData, error } = await supabase
.from('tasks')
.select('*')
if (error) {
console.error(error)
} else {
setData(taskData)
setLoading(false)
}
}
fetchData()
}, [])
return (
<div>
{loading ? <p>Loading...</p> : data.map((task) => <li key={task.id}>{task.title}</li>)}
</div>
)
}
2. Erreur : Uncaught ReferenceError: React is not defined
## ❌ Mauvais
import { useState } from 'react'
function MyComponent() {
const [count, setCount] = useState(0)
return (
<div>
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
## ✅ Correct
import React, { useState } from 'react'
export default function MyComponent() {
const [count, setCount] = useState(0)
return (
<div>
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
3. Erreur : Invalid hook call
## ❌ Mauvais
import { useState } from 'react'
function MyComponent() {
if (typeof window !== 'undefined') {
const [count, setCount] = useState(0)
}
return (
<div>
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
## ✅ Correct
import React, { useState } from 'react'
export default function MyComponent() {
const [count, setCount] = useState(0)
return (
<div>
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
Pour aller plus loin
1. Authentification avec Supabase Auth
Supabase Auth permet une authentification simple et sécurisée pour vos applications. Vous pouvez intégrer cela facilement dans votre application Next.js.
2. Réactivité en temps réel avec Supabase Realtime
Supabase Realtime permet une mise à jour automatique des données en temps réel, ce qui est idéal pour les applications modernes.
3. Optimisation des performances avec Next.js
Next.js offre plusieurs optimisations pour améliorer la performance de vos applications web.
Défi pratique : Création d'une API de blog
Créez une API de blog en utilisant Next.js et Supabase. L'API devrait permettre aux utilisateurs de créer, lire, mettre à jour et supprimer des articles.
- Étape 1 : Créer la table
articlesdans Supabase. - Étape 2 : Créer un composant pour afficher les articles.
- Étape 3 : Créer un formulaire pour ajouter de nouveaux articles.
- Étape 4 : Implémenter des fonctionnalités d'édition et de suppression d'articles.
Cette API devrait être accessible via des endpoints RESTful, permettant aux utilisateurs de gérer leurs articles en toute simplicité.