Dans le monde du développement web moderne, React et Next.js se sont imposés comme deux outils incontournables pour créer des applications performantes et réactives. React, avec sa bibliothèque de composants, permet de construire des interfaces utilisateur dynamiques, tandis que Next.js, en tant que framework basé sur React, offre des fonctionnalités avancées telles que le rendu côté serveur et la génération de sites statiques. Dans cet article, nous allons explorer ensemble les étapes pour créer un projet simple utilisant ces deux technologies.

À travers un exemple pratique, nous verrons comment configurer notre environnement, bâtir notre première page et ajouter des fonctionnalités essentielles. Que vous soyez un débutant désireux d’apprendre ou un développeur expérimenté cherchant à approfondir vos connaissances, cet article vous guidera pas à pas dans le développement d’une application avec React et Next.js.

” Réaliser un tableau de bord en React et NexJS. La base de données à utiliser est en PJ du mail. En React et NextJS, faire le dashboard avec une page divisée en trois composantes :  une barre de filtres · un nombre (pour le prix) ·  2 graphiques charts.”

Étape 1 : Configuration du Projet

1. Créer un nouveau projet Next.js :  

 2 . Installer les dépendances nécessaires : Pour les graphiques, vous pouvez

utiliser chart.js et react-chartjs-2 :

Étape 2 : Structure du Projet

Créez les composants nécessaires dans le dossier components :

• • Barre de filtres (FilterBar.js)
  • Affichage du prix (PriceDisplay.js)
  • Graphiques (ChartComponent.js)

Étape 3 : Implémentation des composants

• 1. FilterBar.js :
• FilterBar.js

  JavaScript

  // components/FilterBar.js import React from 'react'; const FilterBar = ({ onFilterChange }) => { return ( <div> <h3>Filtrer par saison</h3> <select onChange={(e) => onFilterChange(e.target.value)}> <option value="">Tous</option> <option value="été">Été</option> <option value="printemps">Printemps</option> <option value="automne">Automne</option> <option value="hiver">Hiver</option> </select> </div> ); }; export default FilterBar;

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  // components/FilterBar.js import React from 'react';   const FilterBar = ({ onFilterChange }) => {     return (         <div>             <h3>Filtrer par saison</h3>             <select onChange={(e) => onFilterChange(e.target.value)}>                 <option value="">Tous</option>                 <option value="été">Été</option>                 <option value="printemps">Printemps</option>                 <option value="automne">Automne</option>                 <option value="hiver">Hiver</option>             </select>         </div>     ); };   export default FilterBar;

• 2. PriceDisplay.js

• 3. Charts.js :

Commande vérification de la version de Chart.js

• Étape 4 : Intégration dans la Page Principale

  Dans le fichier pages/index.js, intégrez les composants :

  JavaScript

  // pages/index.js import React, { useState, useEffect } from 'react'; import FilterBar from '../components/FilterBar'; import PriceDisplay from '../components/PriceDisplay'; import Charts from '../components/charts/Charts'; import data from '../data/database.json'; // le fichier database const Home = () => { const [filteredData, setFilteredData] = useState(data); const [totalPrice, setTotalPrice] = useState(0); const handleFilterChange = (season) => { if (season) { setFilteredData(data.filter(item => item.saison === season)); } else { setFilteredData(data); } }; useEffect(() => { const total = filteredData.reduce((acc, item) => acc + item.prix, 0); setTotalPrice(total); }, [filteredData]); // une mise à jour automatique des données useEffect(() => { const interval = setInterval(() => { // la logique pour mettre à jour les données console.log("Mise à jour des données..."); // nouvelles données d'une API }, 5000); return () => clearInterval(interval); // Nettoyage de l'intervalle }, []); return ( <div> <h1>Tableau de Bord</h1> <FilterBar onFilterChange={handleFilterChange} /> <PriceDisplay totalPrice={totalPrice} /> <Charts data={filteredData} /> </div> ); }; export default Home;

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

  // pages/index.js import React, { useState, useEffect } from 'react'; import FilterBar from '../components/FilterBar'; import PriceDisplay from '../components/PriceDisplay'; import Charts from '../components/charts/Charts'; import data from '../data/database.json'; // le fichier database   const Home = () => {     const [filteredData, setFilteredData] = useState(data);     const [totalPrice, setTotalPrice] = useState(0);       const handleFilterChange = (season) => {         if (season) {             setFilteredData(data.filter(item => item.saison === season));         } else {             setFilteredData(data);         }     };       useEffect(() => {         const total = filteredData.reduce((acc, item) => acc + item.prix, 0);         setTotalPrice(total);     }, [filteredData]);       // une mise à jour automatique des données     useEffect(() => {         const interval = setInterval(() => {             // la logique pour mettre à jour les données             console.log("Mise à jour des données...");             // nouvelles données d'une API         }, 5000);           return () => clearInterval(interval); // Nettoyage de l'intervalle     }, []);       return (         <div>             <h1>Tableau de Bord</h1>             <FilterBar onFilterChange={handleFilterChange} />             <PriceDisplay totalPrice={totalPrice} />             <Charts data={filteredData} />         </div>     ); }; export default Home;

• NB. utiliser des hooks comme   useEffect pour mettre à jour automatiquement les données pour récupérer les données de votre base de données à intervalles réguliers ou en réponse à des événements spécifiques.

Créer le fichier  /data/database.json’; dans le répertoire src

/data/database.json

Étape 5 : Exécution de l’application

Lancez votre application avec la commande suivante :

Accédez à http://localhost:3000 pour voir votre tableau de bord en action.

Link GitHub