Exercice : Rick & Morty

Objectif :

Mettre en pratique les concepts de SSR, SSG et ISR appris en cours en développant une application Next.js qui affiche des données provenant de l’API Rick et Morty.

Consignes :

1. Créer une application Next.js.
2. Créer une page “Personnages” (/characters) :
   • Cette page doit afficher la liste des personnages de Rick et Morty, récupérés depuis l’API (https://rickandmortyapi.com/api/character).
   • Pour chaque personnage, afficher son nom, son image et un lien vers sa page dédiée.
   • Choisir le type de rendu le plus adapté (SSR ou SSG) et justifier votre choix.
3. Créer une page “Personnage” (/characters/[id]) :
   • Cette page doit afficher les détails d’un personnage spécifique, en fonction de son ID.
   • Les informations à afficher incluent : nom, statut, espèce, image, origine, localisation.
   • Choisir le type de rendu le plus adapté (SSR, SSG ou ISR)
4. Bonus :
   • Implémenter une pagination sur la page “Personnages”.
   • Ajouter un champ de recherche pour filtrer les personnages par nom.
   • Optimiser le chargement des images.
   • Déployer l’application sur Vercel.

Conseils :

• Consulter la documentation de l’API Rick et Morty pour comprendre la structure des données.
• Utiliser les fonctions getStaticProps, getServerSideProps ou getStaticPaths de Next.js pour implémenter les différents types de rendu.
• Structurer le code de manière claire et concise.