Ανακαλύψτε τη δύναμη του Mongoose και πώς μπορείτε να το χρησιμοποιήσετε για να διαχειριστείτε δεδομένα για μια απλή εφαρμογή Ιστού.

Το Next.js είναι ένα ευέλικτο πλαίσιο JavaScript πλήρους στοίβας που είναι χτισμένο πάνω από το React, υποστηρίζοντας τα κύρια χαρακτηριστικά του, όπως JSX, στοιχεία και άγκιστρα. Ορισμένες από τις βασικές δυνατότητες του Next.js περιλαμβάνουν δρομολόγηση βάσει αρχείων, CSS σε JS και απόδοση από την πλευρά του διακομιστή.

Μια σημαντική ικανότητα του Next.js είναι η ικανότητά του να ενσωματώνεται απρόσκοπτα με διάφορες τεχνολογίες υποστήριξης όπως το Mongoose, επιτρέποντάς σας να διαχειρίζεστε εύκολα τα δεδομένα αποτελεσματικά.

Με το Mongoose, μπορείτε εύκολα να ορίσετε ένα αποδοτικό REST API από μια εφαρμογή Next.js για αποθήκευση και ανάκτηση δεδομένων από μια βάση δεδομένων MongoDB.

Next.js: Ένα πλαίσιο JavaScript Full-Stack

Σε αντίθεση με το React, το Next.js θεωρείται ένα πλαίσιο web πλήρους στοίβας επειδή παρέχει μια ολοκληρωμένη λύση για τη δημιουργία εφαρμογών ιστού που έχουν αποδοθεί από την πλευρά του διακομιστή.

instagram viewer

Αυτό συμβαίνει επειδή προσφέρει δυνατότητες που καθιστούν δυνατή την εργασία τόσο στο front-end όσο και στο back-end μιας εφαρμογής από έναν μόνο κατάλογο έργου. Δεν χρειάζεται απαραίτητα να ρυθμίσετε έναν ξεχωριστό φάκελο έργου back-end για την υλοποίηση λειτουργιών από την πλευρά του διακομιστή, ειδικά για εφαρμογές μικρής κλίμακας.

Ωστόσο, όσο και αν το Next.js χειρίζεται κάποιες λειτουργίες back-end, για τη δημιουργία μεγάλης κλίμακας εφαρμογών πλήρους στοίβας, ίσως θελήσετε να το συνδυάσετε με ένα αποκλειστικό πλαίσιο υποστήριξης όπως το Express.

Μερικές από τις βασικές δυνατότητες που δίνουν στο Next.js τις δυνατότητες πλήρους στοίβας περιλαμβάνουν:

  • Απόδοση από την πλευρά του διακομιστή: Το Next.js παρέχει ενσωματωμένη υποστήριξη για δυνατότητες απόδοσης από την πλευρά του διακομιστή. Ουσιαστικά σημαίνει ότι μόλις ένας πελάτης στείλει αιτήματα HTTP σε έναν διακομιστή, ο διακομιστής επεξεργάζεται τα αιτήματα και απαντά με το απαιτούμενο περιεχόμενο HTML για κάθε σελίδα που θα αποδοθεί στο πρόγραμμα περιήγησης.
  • Δρομολόγηση: Το Next.js χρησιμοποιεί ένα σύστημα δρομολόγησης που βασίζεται σε σελίδες για να ορίζει και να διαχειρίζεται διαφορετικές διαδρομές, να χειρίζεται εισόδους χρηστών και να δημιουργεί δυναμικές σελίδες χωρίς να χρειάζεται να βασίζεται σε βιβλιοθήκες τρίτων. Επιπλέον, είναι εύκολο να αυξηθεί η κλίμακα, καθώς η προσθήκη νέων διαδρομών είναι τόσο απλή όσο η προσθήκη μιας νέας σελίδας όπως το about.js, στον κατάλογο των σελίδων.
  • Τελικά σημεία API: Το Next.js παρέχει ενσωματωμένη υποστήριξη για δυνατότητες από την πλευρά του διακομιστή που χρησιμοποιούνται για τη δημιουργία τερματικών σημείων API που διαχειρίζονται αιτήματα HTTP και επιστρέφουν δεδομένα. Αυτό καθιστά εύκολη τη δημιουργία λειτουργιών back-end χωρίς να χρειάζεται να ρυθμίσετε έναν ξεχωριστό διακομιστή χρησιμοποιώντας ένα αποκλειστικό πλαίσιο υποστήριξης όπως το Express. Ωστόσο, είναι σημαντικό να σημειωθεί ότι το Next.js είναι κυρίως ένα πλαίσιο web front-end.

Ρυθμίστε μια βάση δεδομένων MongoDB

Για να ξεκινήσετε, δημιουργήστε μια βάση δεδομένων MongoDB. Εναλλακτικά, μπορείτε να περιστρέψετε γρήγορα μια βάση δεδομένων MongoDB από δωρεάν διαμόρφωση ενός συμπλέγματος MongoDB στο cloud. Μόλις θέσετε σε λειτουργία τη βάση δεδομένων σας, αντιγράψτε τη συμβολοσειρά URI σύνδεσης βάσης δεδομένων.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Ρύθμιση ενός έργου Next.js

Δημιουργήστε έναν κατάλογο για ένα νέο έργο και CD μέσα σε αυτό:

mkdir nextjs-project
cd nextjs-project

Στη συνέχεια εγκαταστήστε το Next.js:

npx create-next-app nextjs-mongodb

Μόλις ολοκληρωθεί η διαδικασία εγκατάστασης, εγκαταστήστε το Mongoose ως εξάρτηση.

npm εγκατάσταση mongoose

Τέλος, στον ριζικό κατάλογο του έργου σας, δημιουργήστε ένα νέο αρχείο .env για να κρατήσετε τη συμβολοσειρά σύνδεσης της βάσης δεδομένων σας.

NEXT_PUBLIC_MONGO_URI = "συμβολοσειρά σύνδεσης URI βάσης δεδομένων"

Διαμορφώστε τη σύνδεση βάσης δεδομένων

Στο src κατάλογο, δημιουργήστε έναν νέο φάκελο και ονομάστε τον χρήσεις. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο που ονομάζεται dbConfig.js και προσθέστε τον ακόλουθο κώδικα σε αυτό:

εισαγωγή μαγκούστα από'μαγκούστα';
συνθ connectMongo = ασυγχρονισμός () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
εξαγωγήΠροκαθορισμένο ConnectMongo;

Ορίστε τα μοντέλα δεδομένων

Τα μοντέλα δεδομένων ορίζουν τη δομή των δεδομένων που θα αποθηκευτούν, συμπεριλαμβανομένων των τύπων δεδομένων και των σχέσεων μεταξύ των δεδομένων.

Το MongoDB αποθηκεύει δεδομένα σε έγγραφα που μοιάζουν με JSON αφού είναι α Βάση δεδομένων NoSQL. Το Mongoose παρέχει έναν τρόπο ορισμού του τρόπου αποθήκευσης και πρόσβασης των δεδομένων από τους πελάτες Next.js από τη βάση δεδομένων.

Στον κατάλογο src, δημιουργήστε έναν νέο φάκελο και όνομα στα μοντέλα. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο που ονομάζεται userModel.js, και προσθέστε τον παρακάτω κώδικα:

εισαγωγή { Σχήμα, μοντέλο, μοντέλα } από'μαγκούστα';
συνθ userSchema = νέος Σχήμα({
 όνομα: Σειρά,
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: {
 τύπος: Σειρά,
 απαιτείται: αληθής,
 μοναδικός: αληθής,
 },
});


συνθ Χρήστης = μοντέλα. Χρήστης || μοντέλο('Χρήστης', userSchema);
εξαγωγήΠροκαθορισμένο Χρήστης;

Δημιουργήστε τα τελικά σημεία του API

Σε αντίθεση με άλλα πλαίσια διεπαφής, το Next.js παρέχει ενσωματωμένη υποστήριξη για τη διαχείριση API. Αυτό απλοποιεί τη διαδικασία δημιουργίας API, καθώς μπορείτε να τα ορίσετε απευθείας στο έργο Next.js αντί να ρυθμίσετε έναν ξεχωριστό διακομιστή.

Αφού ορίσετε τις διαδρομές API μέσα στον κατάλογο pages/api, το Next.js δημιουργεί τελικά σημεία API για καθένα από τα αρχεία σε αυτόν τον κατάλογο. Για παράδειγμα, εάν δημιουργήσετε userV1/user.js, το Next.js θα δημιουργήσει ένα τελικό σημείο προσβάσιμο στο http://localhost: 3000/api/userV1/χρήστης.

μεσα στην σελίδες/api, δημιουργήστε έναν νέο φάκελο και ονομάστε τον userV1. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο που ονομάζεται user.jsκαι προσθέστε τον παρακάτω κώδικα:

εισαγωγή connectMongo από"../../../utils/dbConfig";
εισαγωγή Χρήστης από"../../../models/userModel";
/**
 * @param {εισαγωγή('Επόμενο').NextApiRequest} απα
 * @param {εισαγωγή('Επόμενο').NextApiResponse} αποκ
 */
εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαuserAPI(απαίτηση, ανάλογ) {
δοκιμάστε {
κονσόλα.κούτσουρο('ΣΥΝΔΕΣΗ ΜΕ ΤΟ ΜΟΝΓΚΟ');
αναμένω connectMongo();
κονσόλα.κούτσουρο("ΣΥΝΔΕΘΗΚΕ ΜΕ ΤΟ ΜΟΝΓΚΟ");
αν (απαιτ.μέθοδος 'ΘΕΣΗ') {
κονσόλα.κούτσουρο('ΔΗΜΙΟΥΡΓΙΑ ΕΓΓΡΑΦΟΥ');
συνθ δημιουργήθηκεΧρήστης = αναμένω User.create (req.body);
κονσόλα.κούτσουρο('ΔΗΜΙΟΥΡΓΗΘΗΚΕ ΕΓΓΡΑΦΟ');
 res.json({ createUser });
 } αλλούαν (απαιτ.μέθοδος 'ΠΑΙΡΝΩ') {
κονσόλα.κούτσουρο('ΑΝΑΚΛΗΣΗ ΕΓΓΡΑΦΩΝ');
συνθ fetchedUsers = αναμένω User.find({});
κονσόλα.κούτσουρο('ΑΝΑΚΛΗΨΗ ΕΓΓΡΑΦΩΝ');
 res.json({ fetchedUsers });
 } αλλού {
βολήνέοςΛάθος(`Μη υποστηριζόμενη μέθοδος HTTP: ${req.method}`);
 }
 } σύλληψη (λάθος) {
κονσόλα.log (σφάλμα);
 res.json({ σφάλμα });
 }
}

Αυτός ο κώδικας υλοποιεί ένα τελικό σημείο API για την αποθήκευση και τη λήψη δεδομένων χρήστη από μια βάση δεδομένων MongoDB. Ορίζει α userAPI συνάρτηση που παίρνει δύο παραμέτρους: απαίτηση και res. Αυτά αντιπροσωπεύουν την εισερχόμενη αίτηση HTTP και την εξερχόμενη απόκριση HTTP, αντίστοιχα.

Μέσα στη συνάρτηση, ο κώδικας συνδέεται με τη βάση δεδομένων MongoDB και ελέγχει τη μέθοδο HTTP της εισερχόμενης αίτησης.

Εάν η μέθοδος είναι αίτημα POST, ο κώδικας δημιουργεί ένα νέο έγγραφο χρήστη στη βάση δεδομένων χρησιμοποιώντας το δημιουργώ μέθοδος. Αντίθετα, αν είναι α ΠΑΙΡΝΩ αίτημα, ο κώδικας ανακτά όλα τα έγγραφα χρήστη από τη βάση δεδομένων.

Κατανάλωση των τελικών σημείων API

Προσθέστε τον παρακάτω κώδικα στο pages/index.js αρχείο:

  • Κάντε ένα αίτημα POST στο τελικό σημείο API για αποθήκευση δεδομένων στη βάση δεδομένων.
    εισαγωγή στυλ από'@/styles/Home.module.css';
    εισαγωγή { useState } από'αντιδρώ';
    εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
    συνθ [name, setName] = useState('');
    συνθ [email, setEmail] = useState('');
    συνθ [usersResults, setUsersResults] = useState([]);
    

    συνθ createUser = ασυγχρονισμός () => {
    δοκιμάστε {
    συνθ δημιουργήθηκεΧρήστης = αναμένω φέρω('/api/userV1/user', {
     μέθοδος: 'ΘΕΣΗ',
     κεφαλίδες: {
    'Τύπος περιεχομένου': 'application/json',
     },
     σώμα: JSON.stringify({
     όνομα,
     ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ,
     }),
     }).έπειτα((res) => res.json());
    κονσόλα.κούτσουρο('ΔΗΜΙΟΥΡΓΗΘΗΚΕ ΕΓΓΡΑΦΟ');
    

     setName('');
     setEmail('');
    κονσόλα.log (createdUser);
     } σύλληψη (λάθος) {
    κονσόλα.log (σφάλμα);
     }
     };
  • Καθορίστε μια συνάρτηση για τη λήψη των δεδομένων χρήστη κάνοντας αιτήματα HTTP στο τελικό σημείο GET.
    συνθ displayUsers = ασυγχρονισμός () => {
    δοκιμάστε {
    κονσόλα.κούτσουρο('ΑΝΑΚΛΗΣΗ ΕΓΓΡΑΦΩΝ');
    συνθ fetchedUsers = αναμένω φέρω('/api/userV1/user').έπειτα((res) =>
     res.json()
     );
    κονσόλα.κούτσουρο('ΑΝΑΚΛΗΨΗ ΕΓΓΡΑΦΩΝ');

     setUsersResults (fetchedUsers);
    κονσόλα.log (αποτελέσματα χρηστών)

     } σύλληψη (λάθος) {
    κονσόλα.log (σφάλμα);
     }
     };
  • Τέλος, αποδώστε ένα στοιχείο φόρμας με πεδία εισαγωγής κειμένου και υποβάλετε και εμφανίστε τα κουμπιά δεδομένων χρήστη.
    ΕΠΙΣΤΡΟΦΗ (
     <>

Τέλος, προχωρήστε και γυρίστε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές και να πλοηγηθείτε http://localhost: 3000 στο πρόγραμμα περιήγησής σας.

npm εκτέλεση dev

Χρήση του Next.js στις Εφαρμογές

Το Next.js είναι μια φανταστική επιλογή για τη δημιουργία συναρπαστικών εφαρμογών ιστού, είτε εργάζεστε σε ένα δευτερεύον έργο είτε σε μια μεγάλης κλίμακας λύση ιστού. Προσφέρει μια σειρά χαρακτηριστικών και δυνατοτήτων που εξορθολογίζουν τη διαδικασία δημιουργίας αποδοτικών και κλιμακούμενων προϊόντων.

Αν και είναι κατά κύριο λόγο ένα ισχυρό πλαίσιο από την πλευρά του πελάτη, μπορείτε επίσης να χρησιμοποιήσετε τις δυνατότητές του από την πλευρά του διακομιστή για να δημιουργήσετε γρήγορα μια υπηρεσία υποστήριξης.