Scopri la potenza di Mongoose e come puoi usarla per gestire i dati per una semplice app web.
Next.js è un versatile framework JavaScript full-stack basato su React, che supporta le sue funzionalità principali come JSX, componenti e hook. Alcune delle funzionalità principali di Next.js includono il routing basato su file, CSS in JS e il rendering lato server.
Una capacità significativa di Next.js è la sua capacità di integrarsi perfettamente con varie tecnologie di back-end come Mongoose, consentendoti di gestire facilmente i dati in modo efficiente.
Con Mongoose, puoi facilmente definire un'API REST performante da un'applicazione Next.js per archiviare e recuperare dati da un database MongoDB.
Next.js: un framework JavaScript completo
A differenza di React, Next.js è considerato un framework Web full-stack perché fornisce una soluzione completa per la creazione di applicazioni Web renderizzate lato server.
Questo perché offre funzionalità che consentono di lavorare sia sul front-end che sul back-end di un'applicazione da un'unica directory di progetto. Non è necessario configurare una cartella di progetto back-end separata per implementare la funzionalità lato server, in particolare per le applicazioni su piccola scala.
Tuttavia, per quanto Next.js gestisca alcune funzionalità di back-end, per creare applicazioni full-stack su larga scala, potresti volerlo combinare con un framework di back-end dedicato come Express.
Alcune delle funzionalità principali che danno a Next.js le sue capacità full-stack includono:
- Rendering lato server: Next.js fornisce il supporto integrato per le funzionalità di rendering lato server. Essenzialmente significa che, una volta che un client invia richieste HTTP a un server, il server elabora le richieste e risponde con il contenuto HTML richiesto per ogni pagina da visualizzare sul browser.
- Routing: Next.js utilizza un sistema di routing basato su pagine per definire e gestire diversi percorsi, gestire gli input degli utenti e creare pagine dinamiche senza dover fare affidamento su librerie di terze parti. Inoltre, è facile aumentare le dimensioni poiché aggiungere nuovi percorsi è semplice come aggiungere una nuova pagina come about.js alla directory delle pagine.
- Endpoint API: Next.js fornisce il supporto integrato per le funzionalità lato server utilizzate per creare endpoint API che gestiscono le richieste HTTP e restituiscono i dati. Ciò semplifica la creazione di funzionalità di back-end senza dover configurare un server separato utilizzando un framework di back-end dedicato come Express. Tuttavia, è importante notare che Next.js è principalmente un framework Web front-end.
Imposta un database MongoDB
Per iniziare, impostare un database MongoDB. In alternativa, puoi creare rapidamente un database MongoDB tramite configurare gratuitamente un cluster MongoDB nel cloud. Una volta che il database è attivo e funzionante, copia la stringa URI di connessione al database.
Puoi trovare il codice di questo progetto in questo Deposito GitHub.
Imposta un progetto Next.js
Crea una directory per un nuovo progetto e CD dentro:
mkdir progetto nextjs
progetto cd nextjsQuindi installa Next.js:
npx create-next-app nextjs-mongodbUna volta completato il processo di installazione, installa Mongoose come dipendenza.
npm installa mangustaInfine, nella directory principale del progetto, crea un nuovo file .env per contenere la stringa di connessione al database.
NEXT_PUBLIC_MONGO_URI = "stringa di connessione dell'URI del database"Configurare la connessione al database
Nel src directory, creare una nuova cartella e assegnargli un nome utils. All'interno di questa cartella, crea un nuovo file chiamato dbConfig.js e aggiungervi il seguente codice:
importare mangusta da'mangusta';cost connectMongo = asincrono () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
esportarepredefinito collegareMongo;
Definire i modelli di dati
I modelli di dati definiscono la struttura dei dati che verranno archiviati, inclusi i tipi di dati e le relazioni tra i dati.
MongoDB memorizza i dati in documenti simili a JSON poiché è un file Banca dati NoSQL. Mongoose fornisce un modo per definire in che modo i dati dei client Next.js devono essere archiviati e accessibili dal database.
Nella directory src, crea una nuova cartella e assegna un nome a models. All'interno di questa cartella, crea un nuovo file chiamato userModel.js, e aggiungi il codice qui sotto:
importare { Schema, modello, modelli } da'mangusta';cost utenteSchema = nuovo Schema({
nome: Corda,
e-mail: {
tipo: Corda,
necessario: VERO,
unico: VERO,
},
});cost Utente = modelli. Utente || modello('Utente', userSchema);
esportarepredefinito Utente;
Crea gli endpoint API
A differenza di altri framework front-end, Next.js fornisce supporto integrato per la gestione delle API. Questo semplifica il processo di creazione delle API poiché puoi definirle direttamente nel progetto Next.js invece di impostare un server separato.
Una volta definiti i percorsi API all'interno della directory pages/api, Next.js genera endpoint API per ciascuno dei file in questa directory. Ad esempio, se crei userV1/user.js, Next.js creerà un endpoint accessibile a http://localhost: 3000/api/utenteV1/utente.
Dentro il pagine/api, crea una nuova cartella e chiamala userV1. All'interno di questa cartella, crea un nuovo file chiamato utente.jse aggiungi il codice qui sotto:
importare connectMongo da'../../../utils/dbConfig';
importare Utente da'../../../modelli/modelloutente';/**
* @param {importare('Prossimo').NextApiRequest} richiesta
* @param {importare('Prossimo').NextApiResponse} res
*/
esportarepredefinitoasincronofunzioneuserAPI(richiesta, ris) {
Tentativo {
consolare.tronco d'albero('CONNESSIONE A MONGO');
attendere collegareMongo();
consolare.tronco d'albero('COLLEGATO A MONGO');
Se (metodo richiesto 'INVIARE') {
consolare.tronco d'albero('CREAZIONE DOCUMENTO');
cost creatoUtente = attendere User.create (req.body);
consolare.tronco d'albero('DOCUMENTO CREATO');
res.json({creatoUtente});
} altroSe (metodo richiesto 'OTTENERE') {
consolare.tronco d'albero('RECUPERO DOCUMENTI');
cost utenti recuperati = attendere Utente.find({});
consolare.tronco d'albero('DOCUMENTI RIPORTATI');
res.json({ fetchedUsers });
} altro {
gettarenuovoErrore(`Metodo HTTP non supportato: ${req.metodo}`);
}
} presa (errore) {
consolare.log (errore);
res.json({ errore });
}
}
Questo codice implementa un endpoint API per l'archiviazione e il recupero dei dati utente da un database MongoDB. Definisce un userAPI funzione che accetta due parametri: req E ris. Questi rappresentano rispettivamente la richiesta HTTP in entrata e la risposta HTTP in uscita.
All'interno della funzione, il codice si connette al database MongoDB e controlla il metodo HTTP della richiesta in arrivo.
Se il metodo è una richiesta POST, il codice crea un nuovo documento utente nel database utilizzando il file creare metodo. Viceversa, se è a OTTENERE richiesta, il codice recupera tutti i documenti dell'utente dal database.
Consumo degli endpoint API
Aggiungi il codice qui sotto al file pagine/index.js file:
- Effettua una richiesta POST all'endpoint API per archiviare i dati nel database.
importare stili da'@/styles/Home.module.css';
importare { usaStato } da'reagire';esportarepredefinitofunzioneCasa() {
cost [nome, setName] = useState('');
cost [email, setEmail] = useState('');
cost [usersResults, setUsersResults] = useState([]);cost createUser = asincrono () => {
Tentativo {
cost creatoUtente = attendere andare a prendere('/api/utenteV1/utente', {
metodo: 'INVIARE',
intestazioni: {
'Tipo di contenuto': 'applicazione/json',
},
corpo: JSON.stringa({
nome,
e-mail,
}),
}).Poi((ris) => res.json());
consolare.tronco d'albero('DOCUMENTO CREATO');imposta nome('');
setEmail('');consolare.log (utente creato);
} presa (errore) {
consolare.log (errore);
}
}; - Definire una funzione per recuperare i dati utente effettuando richieste HTTP all'endpoint GET.
cost displayUtenti = asincrono () => {
Tentativo {
consolare.tronco d'albero('RECUPERO DOCUMENTI');
cost utenti recuperati = attendere andare a prendere('/api/utenteV1/utente').Poi((ris) =>
res.json()
);
consolare.tronco d'albero('DOCUMENTI RIPORTATI');
setUsersResults (fetchedUsers);
consolare.log (risultatiutenti)
} presa (errore) {
consolare.log (errore);
}
}; - Infine, esegui il rendering di un elemento del modulo con campi di immissione del testo e invia e visualizza i pulsanti dei dati utente.
ritorno (
<>
Infine, vai avanti e avvia il server di sviluppo per aggiornare le modifiche e passare a http://localhost: 3000 nel tuo browser.
npm esegue lo sviluppoUtilizzo di Next.js nelle applicazioni
Next.js è un'opzione fantastica per creare fantastiche applicazioni Web, sia che tu stia lavorando a un progetto secondario o a una soluzione Web su larga scala. Offre una gamma di caratteristiche e capacità che semplificano il processo di creazione di prodotti performanti e scalabili.
Sebbene sia principalmente un robusto framework lato client, puoi anche utilizzare le sue funzionalità lato server per avviare rapidamente un servizio di back-end.
