Les API avec Next.js

L'API Fetch est une fonctionnalité native du navigateur web qui permet de faire des requêtes HTTP vers des ressources distantes. Elle fournit une interface moderne pour récupérer des données à partir de serveurs distants. Contrairement à son prédécesseur, XMLHttpRequest, Fetch travaille avec des données JSON, ce qui le rend plus puissant et plus facile à utiliser.

Utilisation de Fetch dans Next.js
Next.js ne fournit pas de méthodes spécifiques pour effectuer des requêtes réseau comme Fetch. Vous pouvez simplement utiliser la fonction fetch qui est native dans les navigateurs modernes. Cela signifie que vous pouvez utiliser fetch de la même manière que vous le feriez dans n'importe quelle application web JavaScript et Typescript.

Lorsqu'on utilise cette méthode, la réponse que vous obtenez est généralement un objet de type 'Response'. Pour récupérer les données JSON renvoyées par le serveur, vous devez utiliser la méthode 'json()' sur l'objet 'Response'. 

Exemple d'utilisation (Github)

 

Dans cet extrait de code, la constance 'handleSearch' effectue une requête à une API en utilisant fetch avec une URL construite dynamiquement selon ce que l'utilisateur recherche. Il parse la réponse en JSON, et met à jour l'état des articles avec les nouvelles données pour les afficher à travers un composant dans l'interface utilisateur.
 

Dans cette image, après avoir faite la réception de la réponse, il convertit les données en JSON et extrait les articles, qui sont ensuite stockés dans l'état local. Ces articles sont affichés à l'utilisateur à l'aide d'un composant qui utilise les paramètres urlToImage, title, description, url, et publishedAt comme clés, correspondant aux données de l'objet JSON retourné par l'API. Cela donne le résultat suivant pour une recherche sur des nouvelles sur le Bitcoin: 

Sources : 

Lorenzo Zarantonello, « Read Local JSON Data With Next.js », Medium, https://javascript.plainenglish.io/read-local-json-data-with-next-js-2a56c20eb651 (Page consultée le 12 mars 2024)

Favour Ogbonda, « Creating A Weather App With Next.Js », OpenReplay, https://blog.openreplay.com/creating-a-weather-app-with-nextjs/ (Page consultée le 13 mars 2024)

Nattira Maneerat et Agustín Kussrow, « Beginner Web Dev Project Tutorial – Weather App with Next.js, Tailwind CSS, and TypeScript » , Youtube, https://www.youtube.com/watch?v=KkC_wYM_Co4&t=1084s (Page consultée le 13 mars 2024)