How to Build a Basic CRUD App with Next.js?

introduction dans ce guide, nous allons parcourir la création d'une application crud complète (créer, lire, mettre à jour, supprimer) en utilisant next js pour votre frontend, associé à back4app comme solution backend vous allez configurer un projet nommé basic crud app nextjs , concevoir un schéma de base de données dynamique et intégrer une fonctionnalité crud robuste dans votre application next js nous couvrirons tout, de la configuration de votre projet back4app et de la conception des collections à la connexion de votre interface next js en utilisant le sdk parse ou les méthodes rest/graphql à la fin, vous aurez une application web prête pour la production avec une authentification utilisateur sécurisée et une gestion efficace des données points clés à retenir construire une application crud complète avec next js et back4app apprendre à concevoir un schéma backend flexible adapté à vos besoins en données utiliser une interface admin intuitive, par glisser déposer, pour la gestion des données découvrir les meilleures pratiques pour le déploiement, y compris la conteneurisation docker et l'intégration github prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un nouveau projet configuré pour des conseils, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement next js utilisez créer une application next https //nextjs org/docs/api reference/create next app ou un outil similaire assurez vous que node js (version 14 ou ultérieure) est installé une compréhension de base de javascript, next js et des intégrations api visitez la documentation de next js https //nextjs org/docs pour un aperçu si nécessaire étape 1 – configuration de votre projet initier un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” sur votre tableau de bord entrez le nom du projet basic crud app nextjs et suivez les instructions créer un nouveau projet votre nouveau projet apparaît dans le tableau de bord, servant de noyau pour votre backend créez votre application next js ouvrez votre terminal et exécutez npx create next app\@latest basic crud app nextjs changez de répertoire vers votre projet cd basic crud app nextjs cette commande configure un cadre de projet next js prêt pour la personnalisation étape 2 – élaboration de votre schéma de base de données structuration de votre modèle de données pour cette application crud, vous allez créer des collections essentielles ci dessous se trouvent deux collections principales avec des détails de champ qui permettent les fonctionnalités de base 1 collection d'articles cette collection stocke des détails sur chaque article champ type de données description id identifiant d'objet identifiant unique généré automatiquement titre chaîne le nom ou le titre de l'article description chaîne un bref résumé de l'article créé à date horodatage lorsque l'élément est créé mis à jour le date horodatage de la dernière mise à jour 2 collection des utilisateurs cette collection gère les profils d'utilisateur et les données d'authentification champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour l'utilisateur email chaîne adresse e mail unique hash de mot de passe chaîne mot de passe haché de manière sécurisée pour l'authentification de l'utilisateur créé à date horodatage de la création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez définir manuellement ces collections dans le tableau de bord back4app en créant une nouvelle classe pour chaque collection et en ajoutant les colonnes pertinentes créer une nouvelle classe créez des champs en choisissant le type de données approprié, en nommant la colonne et en définissant des valeurs par défaut ou des exigences créer une colonne utiliser l'assistant ai de back4app pour la configuration du schéma l'assistant ai de back4app simplifie la génération de schémas de base de données décrivez vos collections et champs souhaités, et laissez l'assistant générer automatiquement la structure étapes pour utiliser l'assistant ai ouvrez l'assistant ai trouvez le dans le menu de votre tableau de bord back4app décrivez votre modèle de données collez un prompt détaillé décrivant vos collections et exigences de champ examinez et appliquez vérifiez le schéma généré et mettez le en œuvre dans votre projet exemple de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) cette méthode non seulement fait gagner du temps mais garantit également que votre schéma est cohérent et optimisé étape 3 – activation de l'interface d'administration et des fonctionnalités crud exploration de l'interface d'administration l'interface d'administration back4app offre une solution sans code pour gérer vos données backend avec son système intuitif de glisser déposer, vous pouvez facilement effectuer des opérations crud activation de l'interface d'administration accédez à la section “plus” dans votre tableau de bord back4app cliquez sur “admin app” puis sélectionnez “activer l'application admin ” configurez vos identifiants d'administrateur en configurant votre premier utilisateur administrateur cela établit également des rôles comme b4aadminuser et les collections système nécessaires activer l'application admin après activation, connectez vous à l'interface d'administration pour commencer à gérer vos données tableau de bord de l'application admin exécution des opérations crud via l'interface d'administration dans l'interface d'administration, vous pouvez créer des enregistrements utilisez le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour insérer de nouvelles données voir ou mettre à jour des enregistrements cliquez sur un enregistrement pour inspecter ou modifier ses champs supprimer des enregistrements utilisez l'option de suppression pour retirer les entrées obsolètes cette interface simplifiée rend la gestion des données claire et efficace étape 4 – connexion de next js à back4app avec votre backend configuré, l'étape suivante consiste à connecter votre application next js option a utiliser le sdk parse installer le sdk parse npm install parse initialiser parse dans votre application next js créer un fichier (par exemple, lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; intégrer parse dans une page next js par exemple, créez une page pour récupérer et afficher des éléments // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } option b utiliser rest ou graphql si vous préférez ne pas utiliser le sdk parse, vous pouvez gérer les opérations crud avec rest ou graphql par exemple, pour récupérer des éléments via rest const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); intégrez ces appels api dans vos composants next js selon vos besoins étape 5 – sécuriser votre backend mise en œuvre des listes de contrôle d'accès (acl) sécurisez vos données en attribuant des acl aux objets par exemple, pour créer un élément auquel seul son propriétaire peut accéder async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin de restreindre l'accès aux données uniquement aux utilisateurs autorisés étape 6 – mise en œuvre de l'authentification des utilisateurs configuration des comptes utilisateurs back4app utilise la classe utilisateur intégrée de parse pour l'authentification dans votre application next js, gérez l'inscription et la connexion comme indiqué ci dessous // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } une approche similaire peut être utilisée pour la gestion des connexions et des sessions vous pouvez également activer des fonctionnalités supplémentaires telles que les connexions sociales, la vérification par e mail et la récupération de mot de passe via le tableau de bord back4app étape 7 – déploiement de votre frontend next js les options de déploiement de back4app vous permettent d'héberger votre application next js sans effort, que ce soit par intégration github ou containerisation docker 7 1 construction de votre version de production ouvrez votre répertoire de projet dans le terminal exécutez la commande de construction npm run build cela génère un next dossier contenant des fichiers statiques et rendus par le serveur optimisés 7 2 organisation et téléchargement de votre code votre dépôt doit contenir tous les fichiers source de votre application next js une structure typique pourrait être basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md exemple lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemple pages/index js (référez vous au code fourni à l'étape 4) engager votre code sur github initialiser un dépôt git git init ajouter tous les fichiers git add engagez vos modifications git commit m "initial commit of next js crud application" créer un dépôt github par exemple, nommez le basic crud app nextjs poussez votre code git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 intégration avec le déploiement web de back4app accéder au déploiement web connectez vous à votre tableau de bord back4app, accédez à votre projet et sélectionnez la fonctionnalité de déploiement web connectez votre compte github suivez les instructions pour lier votre dépôt sélectionnez votre dépôt et votre branche choisissez le dépôt (par exemple, basic crud app nextjs ) et la branche (par exemple, main ) contenant votre code 7 4 configuration des paramètres de déploiement commande de construction si votre dépôt ne comprend pas de dossier pré construit next , spécifiez la commande (par exemple, npm run build ) répertoire de sortie définissez le répertoire de sortie sur next afin que back4app sache où se trouvent vos fichiers compilés variables d'environnement ajoutez toutes les variables d'environnement nécessaires, telles que les clés api 7 5 conteneuriser votre application next js avec docker si vous préférez docker pour le déploiement, incluez un dockerfile dans votre dépôt # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] sélectionnez l'option de déploiement docker dans back4app pour conteneuriser et déployer votre application 7 6 lancement de votre application déployez votre application cliquez sur le déployer bouton dans back4app surveillez le processus de construction back4app récupérera votre code, exécutera la commande de construction et déploiera votre application accédez à votre application en direct une fois le déploiement terminé, une url sera fournie où votre application next js est hébergée 7 7 vérification de votre déploiement visitez l'url fournie ouvrez l'url dans votre navigateur testez la fonctionnalité assurez vous que vos pages se chargent correctement et que toutes les opérations crud fonctionnent déboguez si nécessaire utilisez les outils de développement du navigateur et les journaux de back4app pour diagnostiquer tout problème étape 8 – conclusion et prochaines étapes félicitations ! vous avez construit avec succès une application crud robuste avec next js et back4app vous avez configuré votre projet, conçu des collections sur mesure et connecté votre frontend next js à un backend sécurisé prochaines étapes améliorez votre frontend développez votre application next js avec des fonctionnalités avancées telles que des vues détaillées, une fonctionnalité de recherche ou des mises à jour en temps réel augmentez votre backend explorez les fonctions cloud, les intégrations tierces ou des contrôles d'accès supplémentaires continuez à apprendre visitez la documentation de back4app https //www back4app com/docs et les ressources next js pour une optimisation et une personnalisation supplémentaires en suivant ce tutoriel, vous possédez désormais les compétences nécessaires pour créer une application crud évolutive et sécurisée en utilisant next js et back4app bon codage !