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

introduzione in questa guida, passeremo attraverso la costruzione di un'applicazione crud completa (crea, leggi, aggiorna, elimina) utilizzando next js per il tuo frontend, abbinato a back4app come soluzione backend imposterai un progetto chiamato basic crud app nextjs , progetterai uno schema di database dinamico e integrerai funzionalità crud robuste nella tua app next js coprirà tutto, dalla configurazione del tuo progetto back4app e progettazione delle collezioni, alla connessione della tua interfaccia next js utilizzando il parse sdk o i metodi rest/graphql alla fine, avrai un'applicazione web pronta per la produzione con autenticazione utente sicura e gestione dei dati efficiente punti chiave costruisci un'applicazione crud completa con next js e back4app impara a progettare uno schema backend flessibile su misura per le tue esigenze di dati utilizza un'interfaccia admin intuitiva e drag and drop per la gestione dei dati scopri le migliori pratiche per il deployment, inclusa la containerizzazione docker e l'integrazione con github prerequisiti prima di iniziare, assicurati di avere un account back4app con un nuovo progetto impostato per indicazioni, fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo next js usa crea next app https //nextjs org/docs/api reference/create next app o uno strumento simile assicurati che node js (versione 14 o successiva) sia installato una comprensione di base di javascript, next js e integrazioni api visita la documentazione di next js https //nextjs org/docs per una panoramica se necessario passo 1 – impostare il tuo progetto iniziare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” nella tua dashboard inserisci il nome del progetto basic crud app nextjs e segui le istruzioni crea nuovo progetto il tuo nuovo progetto appare nella dashboard, fungendo da nucleo per il tuo backend crea la tua applicazione next js apri il tuo terminale e esegui npx create next app\@latest basic crud app nextjs cambia nella directory del tuo progetto cd basic crud app nextjs questo comando imposta un framework di progetto next js pronto per la personalizzazione passo 2 – creazione del tuo schema di database strutturare il tuo modello di dati per questa app crud, creerai collezioni essenziali di seguito sono riportate due collezioni principali con dettagli sui campi che abilitano le funzionalità di base 1 collezione di articoli questa collezione memorizza i dettagli su ciascun elemento campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa il nome o titolo dell'oggetto descrizione stringa un breve riassunto dell'elemento creato il data timestamp quando l'elemento viene creato aggiornato a data timestamp per l'ultimo aggiornamento 2 raccolta utenti questa raccolta gestisce i profili utente e i dati di autenticazione campo tipo di dato descrizione id objectid identificatore unico generato automaticamente nome utente stringa nome utente unico per l'utente email stringa indirizzo email unico hash password stringa password crittografata in modo sicuro per l'autenticazione dell'utente creato il data timestamp quando l'account è stato creato aggiornato a data timestamp per l'ultimo aggiornamento dell'account puoi definire manualmente queste collezioni nel pannello di controllo di back4app creando una nuova classe per ogni collezione e aggiungendo le colonne pertinenti crea nuova classe crea campi scegliendo il tipo di dato appropriato, nominando la colonna e impostando valori predefiniti o requisiti crea colonna utilizzare l'assistente ai di back4app per la configurazione dello schema l'assistente ai di back4app semplifica la generazione dello schema del database descrivi le tue collezioni e campi desiderati e lascia che l'assistente generi automaticamente la struttura passaggi per utilizzare l'assistente ai apri l'assistente ai trovalo nel menu della tua dashboard di back4app descrivi il tuo modello di dati incolla un prompt dettagliato che delinei le tue collezioni e i requisiti dei campi rivedi e applica controlla lo schema generato e implementalo nel tuo progetto esempio di 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) questo metodo non solo fa risparmiare tempo, ma garantisce anche che il tuo schema sia coerente e ottimizzato passo 3 – attivazione dell'interfaccia admin e funzionalità crud esplorare l'interfaccia admin l'interfaccia admin di back4app offre una soluzione senza codice per gestire i tuoi dati di backend con il suo intuitivo sistema di trascinamento, puoi facilmente eseguire operazioni crud abilitare l'interfaccia admin naviga nella sezione “altro” nel tuo dashboard di back4app clicca su “admin app” poi seleziona “abilita admin app ” configura le tue credenziali admin impostando il tuo primo utente admin questo stabilisce anche ruoli come b4aadminuser e le collezioni di sistema necessarie abilita l'app admin dopo l'attivazione, accedi all'interfaccia di amministrazione per iniziare a gestire i tuoi dati dashboard dell'app admin esecuzione delle operazioni crud tramite l'interfaccia di amministrazione all'interno dell'interfaccia di amministrazione puoi creare record usa il pulsante “aggiungi record” in una collezione (ad es , articoli) per inserire nuovi dati visualizzare o aggiornare record clicca su un record per ispezionare o modificare i suoi campi eliminare record usa l'opzione di eliminazione per rimuovere voci obsolete questa interfaccia semplificata rende la gestione dei dati semplice ed efficiente passaggio 4 – collegare next js a back4app con il tuo backend configurato, il passo successivo è collegare la tua applicazione next js opzione a utilizzare il parse sdk installa il parse sdk npm install parse inizializza parse nella tua app next js crea un file (ad esempio, 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; integra parse in una pagina next js ad esempio, crea una pagina per recuperare e visualizzare gli elementi // 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> ); } opzione b utilizzare rest o graphql se preferisci non utilizzare il parse sdk, puoi gestire le operazioni crud con rest o graphql ad esempio, per recuperare oggetti tramite 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(); integra queste chiamate api nei tuoi componenti next js secondo necessità passo 5 – sicurezza del tuo backend implementazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati assegnando acl agli oggetti ad esempio, per creare un oggetto a cui può accedere solo il suo proprietario 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); } } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, regola i clp per ogni collezione per limitare l'accesso ai dati solo agli utenti autorizzati passo 6 – implementazione dell'autenticazione degli utenti impostazione degli account utente back4app sfrutta la classe utente integrata di parse per l'autenticazione nella tua app next js, gestisci la registrazione e il login come mostrato di seguito // 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> ); } un approccio simile può essere utilizzato per la gestione del login e delle sessioni puoi anche abilitare funzionalità aggiuntive come i login social, la verifica dell'email e il recupero della password tramite il dashboard di back4app passo 7 – distribuzione del tuo frontend next js le opzioni di distribuzione di back4app ti consentono di ospitare la tua applicazione next js senza sforzo, sia tramite integrazione con github che tramite containerizzazione docker 7 1 creazione della tua versione di produzione apri la directory del tuo progetto nel terminale esegui il comando di build npm run build questo genera una next cartella contenente file statici e renderizzati dal server ottimizzati 7 2 organizzazione e caricamento del tuo codice il tuo repository dovrebbe contenere tutti i file sorgente per la tua app next js una struttura tipica potrebbe essere basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md esempio 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; esempio pages/index js (fai riferimento al frammento di codice fornito nel passo 4) impegnare il tuo codice su github inizializza un repository git git init aggiungi tutti i file git add impegnare le tue modifiche git commit m "initial commit of next js crud application" crea un repository github ad esempio, chiamalo basic crud app nextjs invia il tuo codice git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 integrazione con il web deployment di back4app accedi al web deployment accedi al tuo dashboard di back4app, naviga al tuo progetto e seleziona la funzione web deployment collega il tuo account github segui le istruzioni per collegare il tuo repository seleziona il tuo repository e branch scegli il repository (ad esempio, basic crud app nextjs ) e il branch (ad esempio, main ) contenente il tuo codice 7 4 configurazione delle impostazioni di deployment comando di build se il tuo repository non include una cartella pre costruita next , specifica il comando (ad esempio, npm run build ) directory di output imposta la directory di output su next in modo che back4app sappia dove si trovano i tuoi file compilati variabili d'ambiente aggiungi eventuali variabili d'ambiente necessarie, come le chiavi api 7 5 contenitore della tua applicazione next js con docker se preferisci docker per il deployment, includi un dockerfile nel tuo repository # 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;"] seleziona l'opzione di deployment docker in back4app per contenere e distribuire la tua applicazione 7 6 lancio della tua applicazione distribuisci la tua app clicca sul distribuisci pulsante in back4app monitora il processo di build back4app recupererà il tuo codice, eseguirà il comando di build e distribuirà la tua applicazione accedi alla tua app live una volta completata la distribuzione, verrà fornito un url dove è ospitata la tua applicazione next js 7 7 verifica del tuo deployment visita l'url fornito apri l'url nel tuo browser testa la funzionalità assicurati che le tue pagine si carichino correttamente e che tutte le operazioni crud funzionino risolvi i problemi se necessario usa gli strumenti per sviluppatori del browser e i log di back4app per diagnosticare eventuali problemi passo 8 – conclusione e prossimi passi congratulazioni! hai costruito con successo un'applicazione crud robusta con next js e back4app hai configurato il tuo progetto, progettato collezioni su misura e collegato il tuo frontend next js a un backend sicuro prossimi passi migliora il tuo frontend espandi la tua app next js con funzionalità avanzate come viste dettagliate, funzionalità di ricerca o aggiornamenti in tempo reale aumenta il tuo backend esplora le funzioni cloud, integrazioni di terze parti o controlli di accesso aggiuntivi continua a imparare visita la documentazione di back4app https //www back4app com/docs e le risorse di next js per ulteriori ottimizzazioni e personalizzazioni seguendo questo tutorial, ora possiedi le competenze per creare un'applicazione crud scalabile e sicura utilizzando next js e back4app buon coding!