Retour à l'accueil
📚

Exercices Pratiques

Liste des exercices à réaliser pour maîtriser Next.js et l'intégration IA

🚀 Projet

Next.js Studio est un petit site Next.js proposant plusieurs fonctionnalités IA.

🎯 Objectif

Créer un petit site Next.js proposant plusieurs fonctionnalités IA :

  • Page d'accueil statique (SSG)
  • Chatbot interactif (CSR)
  • Générateur d'idées IA (SSR)
  • API Route connectée à un modèle IA (OpenAI, Groq ou local)

👉 Le but

  • Apprendre les fondamentaux de Next.js (App Router, rendu, API)
  • Découvrir l'intégration d'un modèle IA via Vercel AI SDK
  • Obtenir un projet concret et valorisable sur un portfolio.

Objectif des Exercices

Ces exercices vous permettront de pratiquer les concepts vus en cours : SSG, SSR, CSR et l'intégration d'un modèle IA avec Vercel AI SDK. Chaque exercice est progressif et vous amènera à créer un projet complet et valorisable.

1

Créer un nouveau projet Next.js

Mettre en place le projet avec la configuration recommandée

Étapes à suivre :

  • Utiliser `create-next-app@latest` avec l'App Router
  • Sélectionner TypeScript, Tailwind CSS, ESLint
  • Installer les dépendances nécessaires
2

Page d'accueil en SSG

Créer une page de présentation statique

Étapes à suivre :

  • Créer/modifier `app/page.tsx`
  • Afficher une photo ou avatar
  • Se présenter (nom, passions, compétences)
  • Utiliser Server Component (pas de 'use client')
  • Design avec Tailwind CSS
3

Page en SSR avec génération de contenu via Route Handler + AI SDK

Apprendre à créer un Route Handler interne et une page SSR qui l'appelle

Étapes à suivre :

  • Créer `app/api/ai/route.ts` (Route Handler)
  • Utiliser `generateText()` de l'AI SDK pour générer du texte
  • Retourner un JSON avec `NextResponse.json()`
  • Créer `app/idee/page.tsx` (ou autre nom) avec `export const dynamic = 'force-dynamic'`
  • Appeler le Route Handler interne avec `fetch('/api/ai', { cache: 'no-store' })`
  • Afficher le contenu généré par l'IA (citation, idée, fun fact, etc.)
  • Comprendre : la clé API reste sécurisée côté serveur (jamais exposée au client)

4

Chatbot en CSR avec AI SDK

Créer un chatbot interactif avec streaming

Étapes à suivre :

  • Installer `@ai-sdk/react` et `@ai-sdk/groq`
  • Créer une clé API sur groq.com (gratuit)
  • Créer `app/chat/page.tsx` avec `'use client'`
  • Utiliser le hook `useChat()` pour gérer les messages
  • Afficher les messages et le formulaire de chat
  • Suivre la documentation : https://ai-sdk.dev/docs/getting-started/nextjs-app-router
5

Route Handler API pour le chatbot

Créer l'endpoint API qui communique avec le LLM

Étapes à suivre :

  • Créer `app/api/chat/route.ts`
  • Implémenter une fonction `POST` async
  • Utiliser `streamText()` de la lib `ai`
  • Configurer le modèle Groq avec la clé API
  • Retourner `result.toTextStreamResponse()` ou `result.toUIMessageStreamResponse()`
  • Gérer les erreurs (clé API manquante, etc.)
6

Chat Collaboratif en Temps Réel avec WebSocket et IA

Créer un chat multi-utilisateurs avec Socket.IO et intégration IA conditionnelle

Étapes à suivre :

  • Installer les dépendances : `socket.io`, `socket.io-client`, `dotenv`, `tsx`, `concurrently`
  • Créer un serveur WebSocket standalone (`server.ts`) avec Socket.IO sur le port 3001
  • Configurer le serveur pour charger les variables d'environnement avec dotenv
  • Implémenter la gestion des connexions/déconnexions des utilisateurs
  • Créer un système de pseudos uniques avec validation (max 20 caractères)
  • Gérer l'historique des messages en mémoire (stockage temporaire)
  • Implémenter le broadcast des messages à tous les clients connectés
  • Détecter les mentions @chatbot avec une regex (case-insensitive)
  • Intégrer l'IA (Groq avec Llama 3.3 70B) qui analyse les 5 derniers messages pour répondre
  • Créer la page client (`app/collaborative-chat/page.tsx`) avec 'use client'
  • Implémenter la connexion Socket.IO côté client avec gestion de l'état (connecté/déconnecté)
  • Créer une page de connexion pour choisir un pseudo avant d'entrer dans le chat
  • Afficher la liste des utilisateurs connectés en temps réel
  • Implémenter l'affichage des messages avec distinction visuelle (utilisateurs vs IA)
  • Ajouter un indicateur 'en train d'écrire...' avec les événements `user:typing` et `user:stop-typing`
  • Implémenter l'auto-scroll vers les nouveaux messages avec useRef
  • Créer un design responsive avec Tailwind (messages alignés, couleurs différentes pour l'IA)
  • Ajouter les scripts npm dans `package.json` : `socket` et `dev:all` (avec concurrently)
  • Tester avec plusieurs onglets/navigateurs en utilisant différents pseudos
  • Vérifier que l'IA répond correctement quand on mentionne @chatbot dans un message

Ressources Utiles

Documentation Next.js :nextjs.org/docs
Groq Console (API Key) :console.groq.com
ShadCn UI (composants) :ui.shadcn.com
Libs / Outils / Plateformes recommandées :Ressources

Checklist de Validation

Avant de considérer les exercices terminés, vérifiez que :

  • La page d'accueil s'affiche correctement (SSG)
  • La page SSR appelle le Route Handler et génère du contenu différent à chaque actualisation
  • Le Route Handler utilise l'AI SDK et la clé API reste sécurisée côté serveur
  • Le chatbot fonctionne et affiche les réponses en streaming
  • L'API route est fonctionnelle et communique avec Groq
  • (Bonus) Le chat collaboratif fonctionne avec WebSocket : plusieurs utilisateurs peuvent discuter en temps réel et l'IA répond aux mentions @chatbot
  • Le projet est déployé sur Vercel (optionnel mais recommandé)