Intégrer des API tierces, comme celles de météo, dans une application Next.js peut être compliqué, entraînant des erreurs et une mauvaise performance.
Sans une méthode structurée, les développeurs risquent de créer des applications instables, compromettant l’expérience utilisateur et augmentant le temps de développement.
Dans cet article, apprenez à utiliser Next.js pour appeler des API de manière dynamique, gérer l’affichage des données en temps réel, et implémenter un composant de chargement personnalisé pour une meilleure expérience utilisateur.
Découvrir l’exercice Next.js d’affichage météo en temps réel
Dans cet exercice, nous allons tenter d’afficher la température actuelle d’une ville sélectionnée en temps réel. Nous disposons de différentes options de ville et lorsque l’une d’entre elles est sélectionnée, sa température en temps réel s’affiche juste en dessous du champ d’options. Pour mieux illustrer cela, je vous fournis une visualisation comme celle-ci pour vous aider à comprendre le sujet.
Alors, passons à travers les étapes ensemble dans les sections suivantes.
Installer Next.js pour le projet météo
Afin d’atteindre nos objectifs de faire un exercice Next.js sur l’API météo, nous commencerons par installer Next.js dans le répertoire de notre exercice. Comme vous l’avez déjà vu dans l’article sur l’installation de Next.js, il vous suffit de saisir la commande bien connue : npx create-next-app@latest dans le répertoire de votre choix, là où vous souhaitez travailler. Ensuite, Next.js mettra en place la structure de base de notre projet et installera toutes les dépendances nécessaires. Si vous oubliez la commande, vous pouvez la retrouver sur le site de Next.js : https://nextjs.org/
Le préfixe « ./ » avant la commande signifie que vous installez immédiatement Next.js dans le dossier où vous vous trouvez. Une fois que vous lancez cette commande, vous remarquerez que l’installation va se lance comme ceci et il suffit juste de répondre les questions d’installation.
Une fois l’installation terminée, vous pouvez démarrer l’application en tapant la commande suivante dans le même répertoire : npm run dev, afin de visualiser la structure par défaut de notre page. Voici ce que nous allons examiner par la suite :
Parfait, notre application est prête à être modifiée et personnalisée. Donc, apportons maintenant une petite modification dans le fichier layout.js pour changer le titre et la description de notre application.
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Afficher la méteo",
description: "Afficher la méteo en temps réel",
};
export default function RootLayout({ children }) {
return (
<html lang="fr">
<body className={inter.className}>{children}<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"74f497b25a","url":"https:\/\/blog.alphorm.com\/integration-api-meteo-dans-next-js","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
);
}
Comme vous pouvez le constater, nous avons modifié le titre et la description pour correspondre aux contenus de notre application selon nos objectifs. Essayons également de supprimer les contenus par défaut de notre page en ne conservant que ceci dans le fichier app/page.js.
export default function Home() {
return (
<main>
</main>
);
}
Ensuite, nous devons effacer toutes les propriétés CSS dans le fichier page.module.css, puis supprimer également la propriété CSS de l’attribut body dans le fichier global.css. À la fin, nous aurons un visuel comme ceci dans le navigateur.
Donc, dans la partie suivante, nous allons créer notre composant.
Écrire le JSX pour l’exercice Next.js de météo
Maintenant que tout est en place, nous pouvons mettre en place la structure de base de notre application en implémentant les options de la ville dont nous voudrions afficher l’exercice Nrxt.js sur l’API météo . Examinons cela maintenant dans le code ci-dessous dans le fichier app/page.js.
import styles from './page.module.css';
export default function Home() {
return (
<div>
< h2>Afficher la météo< /h2>
<select
name = "ville"
id="ville"
>
<option value="paris">Paris</option>
<option value="lyon">lyon</option>
<option value="marseille">Marseille</option>
<option value="toulouse">Toulouse</option>
</select>
</div>
);
}
Voilà, nous avons un élément select qui crée une liste déroulante permettant à l’utilisateur de sélectionner une ville pour afficher la météo. L’attribut name est défini sur « ville » et l’attribut id est défini sur « ville » également, ce qui permet une référence facile à cet élément en utilisant ces attributs. Et puis nous avons 4 villes comme options. Et tout cela nous donne un visuel comme ceci :
La liste des options de villes est correctement positionnée, et maintenant nous allons incorporer des styles CSS pour embellir notre page.
Écrire le CSS pour le style de l’application météo pour un exercice Next.js
Pour améliorer légèrement la mise en page de notre page, nous allons appliquer nos compétences en CSS. Ainsi, nous allons commencer par déclarer la classe de la balise div dans notre composant comme suit :
import styles from './page.module.css';
export default function Home() {
return (
<div className={styles.div}>
< h2>Afficher la météo< /h2>
<select
name = "ville"
id="ville"
>
<option value="paris">Paris</option>
<option value="lyon">lyon</option>
<option value="marseille">Marseille</option>
<option value="toulouse">Toulouse</option>
</select>
</div>
);
}
Cette ligne est celle qui nous intéresse :
<div className={styles.div}>
car elle nous permet de déclarer la classe div afin de pouvoir la cibler dans le fichier page.module.css.
Examinons maintenant les propriétés css dans ce fichier alors :
.div{
width: 75%;
margin: auto;
background-color:#ecf0f1;
padding: 20px;
margin-top: 15px;
border-radius :9px;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
align-items: center;
}
.div h2{
margin-bottom: 15px;
border-bottom:1px dashed #ccc;
padding-bottom: 4px;
color: #333;
}
.div select{
padding: 12px;
border:1px solid #ccc;
border-radius:6px;
cursor: pointer;
outline: none;
margin-bottom: 20px;
}
Tout cela nous donne un visuel comme ceci dans notre navigateur.
Bah c’est jolie notre page maintenant. Par la suite, nous allons recupérer notre API météo Next.js dans le l’article suivant.
Récupérer une API de météo pour les données en temps réel
Maintenant, il est temps de recuperer l’exercice Next.js sur l’API météo pour chaque ville afin de l’afficher dans notre application. Donc pour faire cela, je vous propose d’aller dans le site d’openweathermap dans le lien suivant :
https://openweathermap.org/ là où vous trouverez les APIs de la météo. Dans ce lien, vous y trouverez les contenus comme ceci :
Pour accéder ou utiliser les API météo Next.js sur le site, vous devez disposer d’une clé d’API. Pour cela, vous devez d’abord vous inscrire ou créer un compte. Après cela, vous recevrez un email de confirmation contenant une clé d’API spécifique à votre compte.
Pour tester l’appel à une API, vous pouvez accéder à la section « API » dans la barre de navigation et chercher « current weather data » pour trouver l’API correspondante, dont l’URL ressemble à ceci :
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
Pour tester cette API, vous pouvez remplacer les variables {lat} et {lon} par les coordonnées de latitude et de longitude de la ville pour laquelle vous souhaitez obtenir des informations météorologiques. Alternativement, vous pouvez remplacer ces variables par la lettre q, qui prend une valeur correspondant au nom de la ville pour laquelle vous voulez afficher ces informations.
Par exemple, l’API sera comme ceci si je prends par exemple la ville de « paris » :
https://api.openweathermap.org/data/2.5/weather?q=paris&appid= API key
La clé d’API à utiliser dans l’URL est celle qui vous a été attribuée lors de la création de votre compte.
Après avoir testé cette API dans notre navigateur, il nous affiche bien comme ceci les informations météorologiques de la ville de Paris :
Parfois, on arrive à appeler une API météo Next.js maintenant. Nous allons voir dans la partie suivante comment implémenter cela dans notre application.
Exercice Next.js : Afficher le résultat de l’appel API météo dans la console
Nous avons réussi à appeler notre API et à afficher les informations météorologiques de la ville de notre choix. Cependant, jusqu’à présent, nous avons effectué nos tests directement dans le navigateur. Maintenant, nous souhaitons intégrer cette fonctionnalité dans notre code et afficher les informations dans la console.
Pour mettre en œuvre cette idée, examinons les codes ci-dessous dans le fichier app/page.js
'use client'
import { useEffect, useState } from 'react';
import styles from './page.module.css';
export default function Home() {
const [datas, setDatas] = useState('');
let meteo = async()=>{
let url = "https://api.openweathermap.org/data/2.5/weather?q=paris&appid=API key ";
let res = await fetch(url)
let valeur = await res.json();
setDatas(datafinal);
}
useEffect(()=>{
meteo()
console.log(datas)
},[])
return (
<div className={styles.div}>
< h2>Afficher la météo< /h2>
<select
name = "ville"
id="ville"
>
<option value="paris">Paris</option>
<option value="lyon">lyon</option>
<option value="marseille">Marseille</option>
<option value="toulouse">Toulouse</option>
</select>
</div>
);
}
let meteo = async()=>{ ... }: Cette fonction asynchrone meteo est définie pour effectuer une requête HTTP à l’API OpenWeatherMap pour récupérer les données météorologiques. Elle est déclarée comme une fonction fléchée asynchrone.
let res = await fetch(url): Cette ligne effectue une requête HTTP GET à l’URL de notre API en utilisant la fonction native fetch. Elle retourne une promesse qui résoudra en un objet Response une fois que la requête aura été traitée.
let valeur = await res.json();: Cette ligne utilise la méthode json() de l’objet Response pour extraire le corps de la réponse HTTP sous forme de JSON. Elle retourne une promesse qui résoudra en l’objet JavaScript représentant les données JSON.
Puis, pour mettre à jour la variable d’état datas avec les données météorologiques récupérées, nous avons appeler le setter dans notre fonction avec cette ligne de code :
setDatas(datafinal);
Enfin, on a aussi cet extrait de code :
useEffect(()=>{
meteo()
console.log(datas)
},[])
Ce hook useEffect est utilisé pour exécuter la fonction meteo lors du montage initial de la composante. Le tableau vide [] en tant que deuxième argument indique que cette fonction ne doit être exécutée qu’une seule fois et même temps, les informations extraites sont affichées dans la console.
Pour lancer et tester cela, il faut changer « API key » par votre clé d’API météo Next.js et cela nous donne des informations comme ceci dans la console :
Excellent, les informations sont correctement affichées dans la console. Même si nous n’avons pas encore atteint notre objectif final, nous avons déjà fait un excellent progrès et nous continuerons à avancer pas à pas. Passons maintenant à l’intégration de tout cela dans notre application dans la section suivante.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
Appeler l’API météo avec une valeur dynamique pour un exercice Next.js
Nous progressons dans notre exercice, et dans cette section, nous allons utiliser le hook useState pour sélectionner dynamiquement la ville dans l’URL de l’API météo Next.js. Pour ce faire, nous allons déclarer un useState pour stocker les valeurs des villes, puis remplacer la valeur fixe de la ville dans l’URL par notre état dynamique. Pour mieux comprendre cette démarche, examinons à présent notre code.
'use client'
import { useEffect, useState } from 'react';
import styles from './page.module.css';
export default function Home() {
const [datas, setDatas] = useState(null);
const [country,setCountry] = useState('paris')
let meteo = async()=>{
const url = "https://api.openweathermap.org/data/2.5/weather?q="+country+"&appid=API key ";
let res = await fetch(url)
let valeur = await res.json();
console.log(valeur)
setDatas(valeur);
}
useEffect(()=>{
meteo()
console.log(datas)
},[country])
return (
<div className={styles.div}>
< h2>Afficher la météo< /h2>
<select
name = "ville"
id="ville"
>
<option value="paris">Paris</option>
<option value="lyon">lyon</option>
<option value="marseille">Marseille</option>
<option value="toulouse">Toulouse</option>
</select>
</div>
);
}
Comme modification dans notre code, on a cette ligne de code :
const [country,setCountry] = useState('paris')
Cette ligne de code initialise une variable d’état appelée country avec la valeur ‘paris’, représentant la ville dont nous voulons afficher la température. Elle utilise le hook useState de React. Par la suite, cette valeur sera concaténée dans notre URL API pour cibler la ville enregistrée. Cette idée est mise en œuvre grâce à cette déclaration.
const url = "https://api.openweathermap.org/data/2.5/weather?q="+country+"&appid=API key ";
Il suffit juste de changer la clé d’API météo Next.js par la clé de votre compte.
En lançant notre application, on constate très bien que les données sont affichées dans la console :
Voilà, les données météorologiques de Paris sont correctement affichées. Donc, si vous souhaitez afficher les données pour une autre ville, il vous suffit de changer la valeur dans le hook useState. Une petite précision : les valeurs que nous obtenons sont en kelvins (c’est-à-dire la valeur en degrés Celsius + 273). Comme vous voyez sur le visuel ci-dessus, la température en France est actuellement de 290.98 K. Pour convertir cette valeur en degrés Celsius, voyons maintenant la modification.
const [country,setCountry] = useState('Marseille')
let meteo = async()=>{
const url = "https://api.openweathermap.org/data/2.5/weather?q="+country+"&appid=API key ";
let res = await fetch(url)
let valeur = await res.json();
const temperatureCelsius = valeur.main.temp - 273;
valeur.main.temp = temperatureCelsius
console.log(valeur)
setDatas(valeur);
}
Comme vous pouvez remarquer nous avons modifié la ville pour Marseille et également inclus une opération pour convertir la valeur en degrés Celsius.
Et cela nous donne un visuel comme ceci au console :
Bah, c’est génial. On arrive à appeler l’API avec une valeur dynamique.
Relier le menu déroulant avec l’API météo pour un exercice Next.js
Maintenant que tout est prêt pour atteindre notre objectif, nous allons quitter la console et afficher la température dans notre application. Pour ce faire, il suffit d’ajouter une balise <p> dans notre div et d’afficher les attributs name (le nom de la ville) et temp (pour la valeur de la température). Donc, ajoutons cette ligne de code :
<p>{data && data.name +":" + data.main.temp +"°"} : </p>
Dans le retour de notre composant, juste au-dessous de la balise fermante de select.
Comme resultat, tout cela nous donne un resultat comme ceci :
Excellent, l’affichage se fait de manière dynamique. Nous sommes donc presque arrivés à notre objectif. Cependant, si vous remarquez, il y a un léger délai pendant le chargement des données. Ce serait génial si nous mettions en place un indicateur de chargement (loading) pour informer l’utilisateur que le chargement est en cours. Passons à la prochaine partie pour le faire.
Mettre en place un indicateur de chargement pour un exercice Next.js
Dans la section précédente, nous avons examiné comment implémenter un indicateur de chargement. Maintenant, pour mettre en pratique nos connaissances, voyons pourquoi il est important de l’appliquer. Par conséquent, ajoutons-le à notre application pour informer l’utilisateur que le chargement est en cours s’il prend du temps.
Pour le faire, il faut déclarer un hook useState pour avoir un getter et setter et puis mettre en place une condition ternaire. Examinons cela maintenant. App/page.js
'use client'
import { useEffect, useState } from 'react';
import styles from './page.module.css';
export default function Home() {
const [data, setData] = useState(null);
const [country,setCountry] = useState('paris')
const [load,setLoad] = useState(true)
let meteo = async()=>{
const url = "https://api.openweathermap.org/data/2.5/weather?q="+country+"&appid=ce7cc3a600a92b7fe86f7b0255f2906f";
let res = await fetch(url)
let valeur = await res.json();
const temperatureCelsius = valeur.main.temp - 273;
valeur.main.temp = temperatureCelsius
console.log(valeur)
setData(valeur);
setLoad(false)
}
useEffect(()=>{
meteo()
},[country])
return (
<div className={styles.div}>
< h2>Afficher la météo< /h2>
<select
name = "ville"
id="ville"
onChange={(e)=>{
setCountry(e.target.value)
}}
>
<option value="paris">Paris</option>
<option value="lyon">lyon</option>
<option value="marseille">Marseille</option>
<option value="toulouse">Toulouse</option>
</select>
<p>{
load?
("Loading ...")
:(data && data.name +":" + data.main.temp +"°" )
} </p>
</div>
);
}
Comme modification ; on d’abord cette ligne de code :
const [load,setLoad] = useState(true)
C’est pour la déclaration de useState qui le getter prend une valeur initiale comme true . Ensuite, le setter sera appelé dans la fonction meteo() pour changer la valeur du getter false . Et enfin, nous avons mis en place la condition ternaire comme ceci :
<p>{
load?
("Loading ...")
:(data && data.name +":" + data.main.temp +"°" )
} </p>
C’est pour gérer les différents cas, que ce soit lorsque les données sont encore en cours de chargement ou prêtes à être affichées.
Mais d’une autre manière ; au lieu d’écrire loading, nous pouvons créer aussi un composant qui en occupe, voyons cela dans la section suivante.
Créer un composant de chargement pour un exercice Next.js
Voyons maintenant notre composant dans le dossier app/component/loading.js
import styles from './loading.module.css';
export default function Loading(){
retur(
<div id={styles.loading}>
<div className={styles.load1}></div>
<div className={styles.load2}></div>
<div className={styles.load3}></div>
</div>
)
}
N’oublie pas d’importer notre composant dans le fichier app/page.js afin que nous puissions l’appeler à la place de loading.. dans le paragraphe.
Voici comment les faire dans le fichier app/page.js
import styles from './page.module.css';
Cela est l’import du fichier et puis l’appel du composant est comme ceci :
<p>{
load?
(<Loading/>)
:(data && data.name +":" + data.main.temp +"°" )
} </p>
Ensuite, appliquons des styles CSS à notre composant Loading pour le rendre attrayant. Pour ce faire, créons le fichier loading.module.css dans le dossier des composants et écrivons-y nos propriétés CSS pour notre composant : app/component/loading.module.css
#loading{
width: 30px;
height: 30px;
border: radius 50%;
background-color:#e74c3c;
display: inline-block;
animation: loading 1.5s infinite;
}
#loading .load1{
animation-delay: -0.5s;
}
#loading .load3{
animation-delay: -0.25s;
}
@keyframes loading {
0%,70%,100%{transform: scale(1);}
35%{transform: scale(0);}
}
Bah, tout est bien impementé maintenant, il nous reste juste de lancer l’application pour voir si tout fonctionne bien.
Oui, notre animation s’affiche correctement pendant le chargement de la page. Nous avons donc terminé notre exercice avec succès.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En suivant ce tutoriel, vous avez appris à intégrer une API météo dans Next.js pour afficher les données météorologiques en temps réel. Vous savez maintenant installer Next.js, récupérer des données d’une API, et les afficher de manière dynamique et esthétique dans une application web.
Cette intégration est une compétence précieuse pour développer des applications réactives et interactives, enrichissant ainsi votre expertise en développement web avec Next.js. Et par la suite nous allons traiter le volet de création de composant Next.js.
