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

einführung in diesem leitfaden werden wir den aufbau einer vollständigen crud (erstellen, lesen, aktualisieren, löschen) anwendung mit next js für ihr frontend und back4app als backend lösung durchgehen sie werden ein projekt mit dem namen basic crud app nextjs , ein dynamisches datenbankschema entwerfen und robuste crud funktionalität in ihre next js app integrieren wir werden alles abdecken, von der konfiguration ihres back4app projekts und dem entwerfen von sammlungen bis hin zur verbindung ihrer next js oberfläche mit dem parse sdk oder rest/graphql methoden am ende werden sie eine produktionsbereite webanwendung mit sicherer benutzerauthentifizierung und effizientem datenmanagement haben wichtige erkenntnisse erstellen sie eine vollständige crud anwendung mit next js und back4app lernen sie, ein flexibles backend schema zu entwerfen, das auf ihre datenbedürfnisse zugeschnitten ist nutzen sie eine intuitive drag and drop admin oberfläche für das datenmanagement entdecken sie bewährte praktiken für die bereitstellung, einschließlich docker containerisierung und github integration voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem neuen projekt eingerichtet für anleitungen, siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine next js entwicklungsumgebung verwenden sie create next app https //nextjs org/docs/api reference/create next app oder ein ähnliches tool stellen sie sicher, dass node js (version 14 oder höher) installiert ist ein grundlegendes verständnis von javascript, next js und api integrationen besuchen sie die next js dokumentation https //nextjs org/docs für einen überblick, falls erforderlich schritt 1 – einrichten ihres projekts ein neues back4app projekt initiieren melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ auf ihrem dashboard geben sie den projektnamen ein basic crud app nextjs und folgen sie den anweisungen neues projekt erstellen ihr neues projekt erscheint im dashboard und dient als kern für ihr backend erstellen sie ihre next js anwendung öffnen sie ihr terminal und führen sie aus npx create next app\@latest basic crud app nextjs wechseln sie in ihr projektverzeichnis cd basic crud app nextjs dieser befehl richtet ein next js projekt framework ein, das bereit für anpassungen ist schritt 2 – erstellen ihres datenbankschemas strukturierung ihres datenmodells für diese crud app werden sie wesentliche sammlungen erstellen unten sind zwei hauptsammlungen mit felddetails aufgeführt, die die kernfunktionen ermöglichen 1 artikel sammlung diese sammlung speichert details zu jedem artikel feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der name oder titel des artikels beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstellt am datum zeitstempel, wann der artikel erstellt wird aktualisiert am datum zeitstempel für das letzte update 2 benutzersammlung diese sammlung verwaltet benutzerprofile und authentifizierungsdaten feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge einzigartiger benutzername für den benutzer e mail zeichenfolge eindeutige e mail adresse passwort hash zeichenfolge sicher gehashte passwörter zur benutzerauthentifizierung erstellt am datum zeitstempel, wann das konto erstellt wurde aktualisiert am datum zeitstempel für das letzte kontoupdate sie können diese sammlungen manuell im back4app dashboard definieren, indem sie eine neue klasse für jede sammlung erstellen und die entsprechenden spalten hinzufügen neue klasse erstellen erstellen sie felder, indem sie den entsprechenden datentyp auswählen, die spalte benennen und standardwerte oder anforderungen festlegen spalte erstellen verwendung des back4app ai assistenten für die schemaeinrichtung der back4app ai assistent vereinfacht die generierung von datenbankschemas beschreiben sie ihre gewünschten sammlungen und felder und lassen sie den assistenten die struktur automatisch generieren schritte zur verwendung des ai assistenten öffnen sie den ai assistenten finden sie ihn im menü ihres back4app dashboards beschreiben sie ihr datenmodell fügen sie eine detaillierte aufforderung ein, die ihre sammlungen und feldanforderungen umreißt überprüfen und anwenden überprüfen sie das generierte schema und implementieren sie es in ihrem projekt beispielaufforderung 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) diese methode spart nicht nur zeit, sondern stellt auch sicher, dass ihr schema konsistent und optimiert ist schritt 3 – aktivierung der admin oberfläche & crud funktionen erkundung der admin oberfläche die back4app admin oberfläche bietet eine no code lösung zur verwaltung ihrer backend daten mit ihrem intuitiven drag and drop system können sie crud operationen ganz einfach durchführen aktivierung der admin oberfläche navigieren sie zum abschnitt „mehr“ in ihrem back4app dashboard klicken sie auf „admin app“ und wählen sie dann „admin app aktivieren “ konfigurieren sie ihre admin anmeldeinformationen indem sie ihren ersten admin benutzer einrichten dies legt auch rollen wie b4aadminuser und notwendige systemkollektionen fest admin app aktivieren nach der aktivierung melden sie sich bei der admin oberfläche an, um ihre daten zu verwalten admin app dashboard crud operationen über die admin oberfläche ausführen innerhalb der admin oberfläche können sie datensätze erstellen verwenden sie die schaltfläche „datensatz hinzufügen“ in einer sammlung (z b artikel), um neue daten einzufügen datensätze anzeigen oder aktualisieren klicken sie auf einen datensatz, um seine felder zu überprüfen oder zu ändern datensätze löschen verwenden sie die löschoption, um veraltete einträge zu entfernen diese optimierte oberfläche macht die datenverwaltung einfach und effizient schritt 4 – verbindung von next js mit back4app nachdem ihr backend eingerichtet ist, besteht der nächste schritt darin, ihre next js anwendung zu verbinden option a verwendung des parse sdk installieren sie das parse sdk npm install parse initialisieren sie parse in ihrer next js app erstellen sie eine datei (z b 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; integrieren sie parse in eine next js seite erstellen sie beispielsweise eine seite, um elemente abzurufen und anzuzeigen // 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 verwendung von rest oder graphql wenn sie das parse sdk nicht verwenden möchten, können sie crud operationen mit rest oder graphql verwalten zum beispiel, um elemente über rest abzurufen 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(); integrieren sie diese api aufrufe nach bedarf in ihre next js komponenten schritt 5 – sicherung ihres backends implementierung von zugriffskontrolllisten (acls) sichern sie ihre daten, indem sie acls für objekte zuweisen zum beispiel, um ein element zu erstellen, auf das nur der eigentümer zugreifen kann 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); } } konfigurieren von klassenebene berechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um den datenzugriff nur autorisierten benutzern zu ermöglichen schritt 6 – implementierung der benutzerauthentifizierung einrichten von benutzerkonten back4app nutzt die integrierte benutzerklasse von parse zur authentifizierung verwenden sie in ihrer next js app die folgende verwaltung für registrierung und anmeldung // 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> ); } ein ähnlicher ansatz kann für die anmeldung und sitzungsverwaltung verwendet werden sie können auch zusätzliche funktionen wie soziale anmeldungen, e mail verifizierung und passwortwiederherstellung über das back4app dashboard aktivieren schritt 7 – bereitstellung ihres next js frontends die bereitstellungsoptionen von back4app ermöglichen es ihnen, ihre next js anwendung mühelos zu hosten, sei es durch github integration oder docker containerisierung 7 1 erstellen ihrer produktionsversion öffnen sie ihr projektverzeichnis im terminal führen sie den build befehl aus npm run build dies generiert einen next ordner, der optimierte statische und servergerenderte dateien enthält 7 2 organisieren und hochladen ihres codes ihr repository sollte alle quell dateien für ihre next js app enthalten eine typische struktur könnte sein basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md beispiel 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; beispiel pages/index js (siehe den im schritt 4 bereitgestellten codeausschnitt) ihr code auf github committen ein git repository initialisieren git init alle dateien hinzufügen git add ihre änderungen committen git commit m "initial commit of next js crud application" ein github repository erstellen zum beispiel, nennen sie es basic crud app nextjs ihren code pushen git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 integration mit back4app web bereitstellung zugriff auf die web bereitstellung melden sie sich bei ihrem back4app dashboard an, navigieren sie zu ihrem projekt und wählen sie die funktion zur web bereitstellung aus verbinden sie ihr github konto befolgen sie die anweisungen, um ihr repository zu verknüpfen wählen sie ihr repository und branch wählen sie das repository (z b basic crud app nextjs ) und den branch (z b main ), der ihren code enthält 7 4 konfigurieren der bereitstellungseinstellungen build befehl wenn ihr repository keinen vorgefertigten next ordner enthält, geben sie den befehl an (z b npm run build ) ausgabeverzeichnis setzen sie das ausgabeverzeichnis auf next damit back4app weiß, wo sich ihre kompilierten dateien befinden umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen hinzu, wie z b api schlüssel 7 5 containerisierung ihrer next js anwendung mit docker wenn sie docker für die bereitstellung bevorzugen, fügen sie eine dockerfile in ihr repository ein # 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;"] wählen sie die docker bereitstellungsoption in back4app, um ihre anwendung zu containerisieren und bereitzustellen 7 6 starten ihrer anwendung bereitstellen ihrer app klicken sie auf die bereitstellen schaltfläche in back4app überwachen des build prozesses back4app wird ihren code abrufen, den build befehl ausführen und ihre anwendung bereitstellen zugriff auf ihre live app sobald die bereitstellung abgeschlossen ist, wird eine url bereitgestellt, unter der ihre next js anwendung gehostet wird 7 7 überprüfung ihrer bereitstellung besuchen sie die bereitgestellte url öffnen sie die url in ihrem browser testfunktionalität stellen sie sicher, dass ihre seiten korrekt geladen werden und dass alle crud operationen funktionieren fehlerbehebung falls erforderlich verwenden sie die entwicklertools ihres browsers und die back4app protokolle, um probleme zu diagnostizieren schritt 8 – fazit und nächste schritte herzlichen glückwunsch! sie haben erfolgreich eine robuste crud anwendung mit next js und back4app erstellt sie haben ihr projekt konfiguriert, maßgeschneiderte sammlungen entworfen und ihr next js frontend mit einem sicheren backend verbunden nächste schritte verbessern sie ihr frontend erweitern sie ihre next js app mit erweiterten funktionen wie detailansichten, suchfunktionen oder echtzeit updates erweitern sie ihr backend erforschen sie cloud funktionen, integrationen von drittanbietern oder zusätzliche zugriffskontrollen weiter lernen besuchen sie die back4app dokumentation https //www back4app com/docs und next js ressourcen für weitere optimierung und anpassung indem sie dieses tutorial befolgt haben, verfügen sie nun über die fähigkeiten, eine skalierbare und sichere crud anwendung mit next js und back4app zu erstellen viel spaß beim programmieren!