גלה את העוצמה של Mongoose וכיצד אתה יכול להשתמש בה כדי לנהל נתונים עבור אפליקציית אינטרנט פשוטה.

Next.js היא מסגרת ג'אווה סקריפט רב-תכליתית ורסטילית הבנויה על גבי React, התומכת בתכונות העיקריות שלה כמו JSX, רכיבים והוק. חלק מתכונות הליבה של Next.js כוללות ניתוב מבוסס קבצים, CSS ב-JS ועיבוד בצד השרת.

אחת היכולות המשמעותיות של Next.js היא היכולת שלו להשתלב בצורה חלקה עם טכנולוגיות עורפיות שונות כגון Mongoose, מה שמאפשר לך לנהל בקלות נתונים ביעילות.

עם Mongoose, אתה יכול להגדיר בקלות REST API בעל ביצועים מאפליקציית Next.js כדי לאחסן ולאחזר נתונים ממסד נתונים של MongoDB.

Next.js: מסגרת מלאה של JavaScript

בניגוד ל-React, Next.js נחשבת למסגרת רשת מלאה כיוון שהיא מספקת פתרון מלא לבניית יישומי אינטרנט מעובדים בצד השרת.

הסיבה לכך היא שהוא מציע תכונות המאפשרות לעבוד הן על הקצה הקדמי והן על הקצה האחורי של יישום מתוך ספריית פרויקט בודדת. אתה לא בהכרח צריך להגדיר תיקיית פרויקט אחורי נפרדת כדי ליישם פונקציונליות בצד השרת, במיוחד עבור יישומים בקנה מידה קטן.

עם זאת, ככל ש-Next.js מטפל בפונקציונליות עורפית מסוימת, כדי לבנות יישומים בקנה מידה גדול, מלא, אולי כדאי לשלב את זה עם מסגרת עורפית ייעודית כמו Express.

instagram viewer

חלק מתכונות הליבה המעניקות ל-Next.js את יכולות הערימה המלאה שלה כוללות:

  • עיבוד בצד השרת: Next.js מספק תמיכה מובנית ליכולות עיבוד בצד השרת. בעיקרו של דבר זה אומר שברגע שלקוח שולח בקשות HTTP לשרת, השרת מעבד את הבקשות ומגיב עם תוכן ה-HTML הנדרש עבור כל דף שיוצג בדפדפן.
  • ניתוב: Next.js משתמש במערכת ניתוב מבוססת דפים כדי להגדיר ולנהל מסלולים שונים, לטפל בקלט של משתמשים וליצור דפים דינמיים מבלי להסתמך על ספריות של צד שלישי. בנוסף, קל להגדיל את קנה המידה שכן, הוספת מסלולים חדשים היא פשוטה כמו הוספת דף חדש כגון about.js, לספריית הדפים.
  • נקודות קצה API: Next.js מספקת תמיכה מובנית ליכולות בצד השרת המשמשות ליצירת נקודות קצה API המנהלות בקשות HTTP והחזרת נתונים. זה מקל על בניית פונקציונליות עורפית מבלי להגדיר שרת נפרד באמצעות מסגרת עורפית ייעודית כמו Express. עם זאת, חשוב לציין ש-Next.js היא בעיקר מסגרת אינטרנט חזיתית.

הגדר מסד נתונים של MongoDB

להתחיל, הגדר מסד נתונים MongoDB. לחלופין, אתה יכול ליצור במהירות מסד נתונים MongoDB על ידי הגדרת אשכול MongoDB בענן בחינם. לאחר שתפעיל את מסד הנתונים שלך, העתק את מחרוזת ה-URI של חיבור מסד הנתונים.

אתה יכול למצוא את הקוד של הפרויקט הזה בזה מאגר GitHub.

הגדר פרויקט Next.js

צור ספרייה עבור פרויקט חדש ו CD לתוך זה:

mkdir nextjs-project
cd nextjs-project

לאחר מכן התקן את Next.js:

npx create-next-app nextjs-mongodb

לאחר השלמת תהליך ההתקנה, התקן את Mongoose כתלות.

npm להתקין נמייה

לבסוף, בספריית הבסיס של הפרויקט שלך, צור קובץ .env חדש שיכיל את מחרוזת החיבור של מסד הנתונים שלך.

NEXT_PUBLIC_MONGO_URI = "מחרוזת חיבור URI של מסד נתונים"

הגדר את חיבור מסד הנתונים

בתוך ה src ספרייה, צור תיקיה חדשה ושמה לה שימושים. בתוך תיקיה זו, צור קובץ חדש בשם dbConfig.js והוסיפו לו את הקוד הבא:

יְבוּא נְמִיָה מ'נְמִיָה';
const connectMongo = אסינכרון () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
יְצוּאבְּרִירַת מֶחדָל connectMongo;

הגדר את מודל הנתונים

מודלים של נתונים מגדירים את מבנה הנתונים שיישמרו, כולל סוגי הנתונים והקשרים בין הנתונים.

MongoDB מאחסן נתונים במסמכים דמויי JSON מכיוון שהוא א מסד נתונים NoSQL. Mongoose מספקת דרך להגדיר כיצד יש לאחסן ולגשת לנתונים מלקוחות Next.js ממסד הנתונים.

בספריית src, צור תיקיה ושם חדשים במודלים. בתוך תיקיה זו, צור קובץ חדש בשם userModel.js, והוסיפו את הקוד למטה:

יְבוּא { סכימה, מודל, מודלים } מ'נְמִיָה';
const userSchema = חָדָשׁ סכֵימָה({
 שֵׁם: חוּט,
 אימייל: {
 סוּג: חוּט,
 נדרש: נָכוֹן,
 ייחודי: נָכוֹן,
 },
});


const משתמש = דגמים. משתמש || דֶגֶם('מִשׁתַמֵשׁ', userSchema);
יְצוּאבְּרִירַת מֶחדָל מִשׁתַמֵשׁ;

צור את נקודות הקצה של ה-API

בניגוד למסגרות חזיתיות אחרות, Next.js מספקת תמיכה מובנית לניהול API. זה מפשט את תהליך יצירת ממשקי API מכיוון שאתה יכול להגדיר אותם ישירות בפרויקט Next.js במקום להגדיר שרת נפרד.

לאחר שהגדרת את מסלולי ה-API בתוך ספריית pages/api, Next.js מייצר נקודות קצה של API עבור כל אחד מהקבצים בספריה זו. לדוגמה, אם תיצור את userV1/user.js, Next.js תיצור נקודת קצה נגישה בכתובת http://localhost: 3000/api/userV1/user.

בתוך ה דפים/ממשק API, צור תיקיה חדשה וקרא לה userV1. בתוך תיקיה זו, צור קובץ חדש בשם user.js, והוסיפו את הקוד למטה:

יְבוּא connectMongo מ'../../../utils/dbConfig';
יְבוּא מִשׁתַמֵשׁ מ'../../../models/userModel';
/**
 * @param {יְבוּא('הַבָּא').NextApiRequest} בקשה
 * @param {יְבוּא('הַבָּא').NextApiResponse} res
 */
יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהuser API(דרישה, מילואים) {
לְנַסוֹת {
לְנַחֵם.עֵץ('מתחבר למונגו');
לְהַמתִין connectMongo();
לְנַחֵם.עֵץ('מחובר למונגו');
אם (שיטה 'הודעה') {
לְנַחֵם.עֵץ('יוצר מסמך');
const CreatedUser = לְהַמתִין User.create (req.body);
לְנַחֵם.עֵץ('מסמך נוצר');
 res.json({ createdUser });
 } אַחֵראם (שיטה 'לקבל') {
לְנַחֵם.עֵץ('משיפי מסמכים');
const fetchedUsers = לְהַמתִין User.find({});
לְנַחֵם.עֵץ('מסמכים שהובאו');
 res.json({ fetchedUsers });
 } אַחֵר {
לזרוקחָדָשׁשְׁגִיאָה(`שיטת HTTP לא נתמכת: ${req.method}`);
 }
 } לתפוס (שגיאה) {
לְנַחֵם.log (שגיאה);
 res.json({ error });
 }
}

קוד זה מיישם נקודת קצה API לאחסון ושליפה של נתוני משתמש ממסד נתונים של MongoDB. הוא מגדיר את א user API פונקציה שלוקחת שני פרמטרים: req ו מילואים. אלה מייצגים את בקשת ה-HTTP הנכנסת ואת תגובת ה-HTTP היוצאת, בהתאמה.

בתוך הפונקציה, הקוד מתחבר למסד הנתונים של MongoDB ובודק את שיטת ה-HTTP של הבקשה הנכנסת.

אם השיטה היא בקשת POST, הקוד יוצר מסמך משתמש חדש במסד הנתונים באמצעות ה- לִיצוֹר שיטה. לעומת זאת, אם זה א לקבל request, הקוד מביא את כל מסמכי המשתמש ממסד הנתונים.

צריכת נקודות הקצה של ה-API

הוסף את הקוד למטה ל- pages/index.js קוֹבֶץ:

  • בצע בקשת POST לנקודת הקצה של ה-API כדי לאחסן נתונים במסד הנתונים.
    יְבוּא סגנונות מ'@/styles/Home.module.css';
    יְבוּא { useState } מ'לְהָגִיב';
    יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [usersResults, setUsersResults] = useState([]);
    

    const createUser = אסינכרון () => {
    לְנַסוֹת {
    const CreatedUser = לְהַמתִין לְהָבִיא('/api/userV1/user', {
     שיטה: 'הודעה',
     כותרות: {
    'סוג תוכן': 'application/json',
     },
     גוּף: JSON.stringify({
     שֵׁם,
     אימייל,
     }),
     }).לאחר מכן((מילואים) => res.json());
    לְנַחֵם.עֵץ('מסמך נוצר');
    

     setName('');
     setEmail('');
    לְנַחֵם.log (createdUser);
     } לתפוס (שגיאה) {
    לְנַחֵם.log (שגיאה);
     }
     };
  • הגדר פונקציה כדי להביא את נתוני המשתמש על ידי ביצוע בקשות HTTP לנקודת הקצה GET.
    const displayUsers = אסינכרון () => {
    לְנַסוֹת {
    לְנַחֵם.עֵץ('משיפי מסמכים');
    const fetchedUsers = לְהַמתִין לְהָבִיא('/api/userV1/user').לאחר מכן((מילואים) =>
     res.json()
     );
    לְנַחֵם.עֵץ('מסמכים שהובאו');

     setUsersResults (fetchedUsers);
    לְנַחֵם‎.log (usersResults)

     } לתפוס (שגיאה) {
    לְנַחֵם.log (שגיאה);
     }
     };
  • לבסוף, עבד רכיב טופס עם שדות קלט טקסט ושלח והצג כפתורי נתוני משתמש.
    לַחֲזוֹר (
     <>

לבסוף, קדימה, הפוך את שרת הפיתוח כדי לעדכן את השינויים ולנווט אליו http://localhost: 3000 בדפדפן שלך.

npm run dev

שימוש ב-Next.js באפליקציות

Next.js היא אפשרות פנטסטית לבניית יישומי אינטרנט מגניבים, בין אם אתה עובד על פרויקט צדדי או פתרון אינטרנט בקנה מידה גדול. הוא מציע מגוון תכונות ויכולות המייעלים את תהליך יצירת מוצרים ביצועיים וניתנים להרחבה.

למרות שזה בעיקר מסגרת חזקה בצד הלקוח, אתה יכול גם לנצל את היכולות שלה בצד השרת כדי ליצור במהירות שירות אחורי.