Entdecken Sie die Leistungsfähigkeit von Mongoose und wie Sie damit Daten für eine einfache Web-App verwalten können.

Next.js ist ein vielseitiges Full-Stack-JavaScript-Framework, das auf React aufbaut und dessen Hauptfunktionen wie JSX, Komponenten und Hooks unterstützt. Zu den Kernfunktionen von Next.js gehören dateibasiertes Routing, CSS in JS und serverseitiges Rendering.

Eine wichtige Funktion von Next.js ist seine Fähigkeit, sich nahtlos in verschiedene Backend-Technologien wie Mongoose zu integrieren, sodass Sie Daten einfach und effizient verwalten können.

Mit Mongoose können Sie ganz einfach eine leistungsstarke REST-API aus einer Next.js-Anwendung definieren, um Daten aus einer MongoDB-Datenbank zu speichern und abzurufen.

Next.js: Ein Full-Stack-JavaScript-Framework

Im Gegensatz zu React wird Next.js als Full-Stack-Webframework betrachtet, da es eine vollständige Lösung zum Erstellen serverseitig gerenderter Webanwendungen bietet.

Dies liegt daran, dass es Funktionen bietet, die es ermöglichen, sowohl am Front-End als auch am Back-End einer Anwendung von einem einzigen Projektverzeichnis aus zu arbeiten. Sie müssen nicht unbedingt einen separaten Back-End-Projektordner einrichten, um serverseitige Funktionen zu implementieren, insbesondere für kleine Anwendungen.

instagram viewer

So sehr Next.js jedoch einige Back-End-Funktionen übernimmt, möchten Sie es vielleicht mit einem dedizierten Back-End-Framework wie Express kombinieren, um umfangreiche Full-Stack-Anwendungen zu erstellen.

Einige der Kernfunktionen, die Next.js seine Full-Stack-Fähigkeiten verleihen, sind:

  • Serverseitiges Rendering: Next.js bietet integrierte Unterstützung für serverseitige Renderingfunktionen. Im Wesentlichen bedeutet dies, sobald ein Client HTTP-Anforderungen an einen Server sendet, verarbeitet der Server die Anforderungen und antwortet mit dem erforderlichen HTML-Inhalt für jede Seite, die im Browser gerendert werden soll.
  • Routing: Next.js verwendet ein seitenbasiertes Routingsystem, um verschiedene Routen zu definieren und zu verwalten, Benutzereingaben zu verarbeiten und dynamische Seiten zu erstellen, ohne sich auf Bibliotheken von Drittanbietern verlassen zu müssen. Darüber hinaus ist es einfach zu skalieren, da das Hinzufügen neuer Routen so einfach ist wie das Hinzufügen einer neuen Seite wie about.js zum Verzeichnis der Seiten.
  • API-Endpunkte: Next.js bietet integrierte Unterstützung für serverseitige Funktionen, mit denen API-Endpunkte erstellt werden, die HTTP-Anforderungen verwalten und Daten zurückgeben. Dies macht es einfach, Back-End-Funktionalität zu erstellen, ohne einen separaten Server mit einem dedizierten Back-End-Framework wie Express einrichten zu müssen. Es ist jedoch wichtig zu beachten, dass Next.js in erster Linie ein Front-End-Webframework ist.

Richten Sie eine MongoDB-Datenbank ein

Um loszulegen, Richten Sie eine MongoDB-Datenbank ein. Alternativ können Sie schnell eine MongoDB-Datenbank einrichten kostenlose Konfiguration eines MongoDB-Clusters in der Cloud. Sobald Sie Ihre Datenbank eingerichtet und ausgeführt haben, kopieren Sie die URI-Zeichenfolge der Datenbankverbindung.

Sie finden den Code dieses Projekts darin GitHub-Repository.

Richten Sie ein Next.js-Projekt ein

Erstellen Sie ein Verzeichnis für ein neues Projekt und CD hinein:

mkdir nextjs-Projekt
cd nextjs-Projekt

Installieren Sie dann Next.js:

npx create-next-app nextjs-mongodb

Sobald der Installationsvorgang abgeschlossen ist, installieren Sie Mongoose als Abhängigkeit.

npm installiert Mungo

Erstellen Sie schließlich im Stammverzeichnis Ihres Projekts eine neue .env-Datei, die Ihre Datenbank-Verbindungszeichenfolge enthält.

NEXT_PUBLIC_MONGO_URI = "Datenbank-URI-Verbindungszeichenfolge"

Konfigurieren Sie die Datenbankverbindung

Im Quelle Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn Dienstprogramme. Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen dbConfig.js und fügen Sie den folgenden Code hinzu:

importieren Mungo aus'Mungo';
konst connectMongo = asynchron () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
ExportStandard connectMongo;

Definieren Sie die Datenmodelle

Datenmodelle definieren die Struktur der zu speichernden Daten, einschließlich der Datentypen und der Beziehungen zwischen den Daten.

MongoDB speichert Daten in JSON-ähnlichen Dokumenten, da es sich um eine NoSQL-Datenbank. Mongoose bietet eine Möglichkeit, zu definieren, wie die Daten von Next.js-Clients gespeichert und von der Datenbank aus abgerufen werden sollen.

Erstellen Sie im src-Verzeichnis einen neuen Ordner und benennen Sie ihn in models. Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen userModel.js, und fügen Sie den folgenden Code hinzu:

importieren { Schema, Modell, Modelle } aus'Mungo';
konst userSchema = neu Schema({
 Name: Schnur,
 Email: {
 Typ: Schnur,
 erforderlich: WAHR,
 einzigartig: WAHR,
 },
});


konst Benutzer = Modelle. Benutzer || Modell('Benutzer', Benutzerschema);
ExportStandard Benutzer;

Erstellen Sie die API-Endpunkte

Im Gegensatz zu anderen Front-End-Frameworks bietet Next.js integrierte Unterstützung für das API-Management. Dies vereinfacht das Erstellen von APIs, da Sie sie direkt im Next.js-Projekt definieren können, anstatt einen separaten Server einzurichten.

Nachdem Sie die API-Routen im Verzeichnis „pages/api“ definiert haben, generiert Next.js API-Endpunkte für jede der Dateien in diesem Verzeichnis. Wenn Sie beispielsweise userV1/user.js erstellen, erstellt Next.js einen Endpunkt, auf den zugegriffen werden kann http://localhost: 3000/api/userV1/user.

Im Inneren des Seiten/API, erstellen Sie einen neuen Ordner und nennen Sie ihn userV1. Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen user.js, und fügen Sie den folgenden Code hinzu:

importieren connectMongo aus'../../../utils/dbConfig';
importieren Benutzer aus'../../../models/userModel';
/**
 * @param {importieren('nächste').NextApiRequest} erforderlich
 * @param {importieren('nächste').NextApiResponse} res
 */
ExportStandardasynchronFunktionuserAPI(erforderlich, res) {
versuchen {
Konsole.Protokoll(„VERBINDUNG MIT MONGO“);
erwarten connectMongo();
Konsole.Protokoll(„VERBUNDEN MIT MONGO“);
Wenn (erforderliche Methode 'POST') {
Konsole.Protokoll('DOKUMENT ERSTELLEN');
konst erstellterBenutzer = erwarten User.create (req.body);
Konsole.Protokoll('ERSTELLTES DOKUMENT');
 res.json({erstellterBenutzer});
 } andersWenn (erforderliche Methode 'ERHALTEN') {
Konsole.Protokoll('DOKUMENTE ABHOLEN');
konst fetchedUsers = erwarten User.find({});
Konsole.Protokoll(„ABGEHOLENE DOKUMENTE“);
 res.json({abgerufeneBenutzer});
 } anders {
WurfneuFehler(`Nicht unterstützte HTTP-Methode: ${req.method}`);
 }
 } fangen (Fehler) {
Konsole.log (Fehler);
 res.json({Fehler});
 }
}

Dieser Code implementiert einen API-Endpunkt zum Speichern und Abrufen von Benutzerdaten aus einer MongoDB-Datenbank. Es definiert a userAPI Funktion, die zwei Parameter benötigt: erforderlich Und res. Diese repräsentieren die eingehende HTTP-Anfrage bzw. die ausgehende HTTP-Antwort.

Innerhalb der Funktion stellt der Code eine Verbindung zur MongoDB-Datenbank her und prüft die HTTP-Methode der eingehenden Anfrage.

Wenn die Methode eine POST-Anforderung ist, erstellt der Code ein neues Benutzerdokument in der Datenbank unter Verwendung von erstellen Methode. Umgekehrt, wenn es sich um a ERHALTEN Anfrage holt der Code alle Benutzerdokumente aus der Datenbank.

Konsumieren der API-Endpunkte

Fügen Sie den folgenden Code hinzu Seiten/index.js Datei:

  • Stellen Sie eine POST-Anforderung an den API-Endpunkt, um Daten in der Datenbank zu speichern.
    importieren Stile aus'@/styles/Home.module.css';
    importieren { useState } aus'reagieren';
    ExportStandardFunktionHeim() {
    konst [name, setName] = useState('');
    konst [E-Mail, setE-Mail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst createUser = asynchron () => {
    versuchen {
    konst erstellterBenutzer = erwarten bringen('/api/userV1/user', {
     Methode: 'POST',
     Überschriften: {
    'Inhaltstyp': 'Anwendung/json',
     },
     Körper: JSON.stringify({
     Name,
     Email,
     }),
     }).Dann((res) => res.json());
    Konsole.Protokoll('ERSTELLTES DOKUMENT');
    

     Name einsetzen('');
     setEmail('');
    Konsole.log (erstellterBenutzer);
     } fangen (Fehler) {
    Konsole.log (Fehler);
     }
     };
  • Definieren Sie eine Funktion zum Abrufen der Benutzerdaten, indem Sie HTTP-Anforderungen an den GET-Endpunkt stellen.
    konst displayUsers = asynchron () => {
    versuchen {
    Konsole.Protokoll('DOKUMENTE ABHOLEN');
    konst fetchedUsers = erwarten bringen('/api/userV1/user').Dann((res) =>
     res.json()
     );
    Konsole.Protokoll(„ABGEHOLENE DOKUMENTE“);

     setUsersResults (abgerufeneBenutzer);
    Konsole.log (usersResults)

     } fangen (Fehler) {
    Konsole.log (Fehler);
     }
     };
  • Rendern Sie zuletzt ein Formularelement mit Texteingabefeldern und Schaltflächen zum Senden und Anzeigen von Benutzerdaten.
    zurückkehren (
     <>

Fahren Sie schließlich fort und drehen Sie den Entwicklungsserver hoch, um die Änderungen zu aktualisieren und zu navigieren http://localhost: 3000 in Ihrem Browser.

npm laufen dev

Verwenden von Next.js in Anwendungen

Next.js ist eine fantastische Option zum Erstellen cooler Webanwendungen, egal ob Sie an einem Nebenprojekt oder einer umfangreichen Weblösung arbeiten. Es bietet eine Reihe von Funktionen und Funktionen, die den Prozess der Erstellung leistungsfähiger und skalierbarer Produkte rationalisieren.

Obwohl es sich in erster Linie um ein robustes clientseitiges Framework handelt, können Sie auch seine serverseitigen Funktionen nutzen, um schnell einen Back-End-Dienst einzurichten.