خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

Next.js Data Management: ذخیره و واکشی داده های MongoDB با استفاده از Mongoose

ارشیا یوسفی ادیب ۱۶ تیر, ۱۴۰۲ 5 دقیقه زمان مطالعه

کشف قدرت Mongoose و نحوه استفاده از آن برای مدیریت داده ها برای یک برنامه وب ساده.

Next.js یک چارچوب جاوا اسکریپت همه کاره تمام پشته است که بر روی React ساخته شده است و از ویژگی های اصلی آن مانند JSX، کامپوننت ها و هوک ها پشتیبانی می کند. برخی از ویژگی های اصلی Next.js شامل مسیریابی مبتنی بر فایل، CSS در JS و رندر سمت سرور است.

یکی از قابلیت های قابل توجه Next.js توانایی آن در ادغام یکپارچه با فناوری های مختلف پشتیبان مانند Mongoose است که به شما امکان می دهد به راحتی داده ها را به طور کارآمد مدیریت کنید.

با Mongoose، می توانید به راحتی یک REST API عملکردی را از یک برنامه Next.js برای ذخیره و بازیابی داده ها از پایگاه داده MongoDB تعریف کنید.

Next.js: یک چارچوب جاوا اسکریپت تمام پشته

بر خلاف React، Next.js یک چارچوب وب تمام پشته در نظر گرفته می شود زیرا راه حل کاملی برای ساخت برنامه های وب رندر شده در سمت سرور ارائه می دهد.

صفحه اصلی Nextjs Docs

این به این دلیل است که ویژگی هایی را ارائه می دهد که کار روی هر دو قسمت جلویی و پشتی یک برنامه از یک فهرست پروژه واحد را ممکن می کند. برای اجرای عملکرد سمت سرور، به ویژه برای برنامه های کاربردی در مقیاس کوچک، لزوماً نیازی به راه اندازی یک پوشه پروژه پشتیبان جداگانه ندارید.

با این حال، به همان اندازه که Next.js برخی از عملکردهای back-end را مدیریت می کند، برای ساخت برنامه های کاربردی در مقیاس بزرگ و تمام پشته، ممکن است بخواهید آن را با یک چارچوب اختصاصی باطن مانند Express ترکیب کنید.

برخی از ویژگی های اصلی که به Next.js قابلیت های فول استک می دهد عبارتند از:

  • رندر سمت سرور: Next.js پشتیبانی داخلی از قابلیت های رندر سمت سرور ارائه می دهد. اساساً به این معنی است که هنگامی که یک مشتری درخواست های HTTP را به سرور ارسال می کند، سرور درخواست ها را پردازش می کند و با محتوای HTML مورد نیاز برای هر صفحه که باید در مرورگر ارائه شود پاسخ می دهد.
  • مسیریابی: Next.js از یک سیستم مسیریابی مبتنی بر صفحه برای تعریف و مدیریت مسیرهای مختلف، مدیریت ورودی های کاربر و ایجاد صفحات پویا بدون نیاز به اتکا به کتابخانه های شخص ثالث استفاده می کند. علاوه بر این، افزایش مقیاس آسان است، زیرا افزودن مسیرهای جدید به سادگی افزودن یک صفحه جدید مانند about.js به فهرست صفحات است.
  • نقاط پایانی API: Next.js پشتیبانی داخلی برای قابلیت‌های سمت سرور ارائه می‌کند که برای ایجاد نقاط پایانی API که درخواست‌های HTTP را مدیریت می‌کنند و داده‌ها را برمی‌گرداند، استفاده می‌شود. این باعث می‌شود بدون نیاز به راه‌اندازی سرور جداگانه با استفاده از یک چارچوب اختصاصی باطن مانند Express، عملکردهای بک‌اند را ایجاد کنید. با این حال، توجه به این نکته مهم است که Next.js در درجه اول یک فریمورک وب جلویی است.
مطلب مرتبط:   چگونه یک پروژه Xamarin بسازیم و آن را در شبیه ساز اجرا کنیم

یک پایگاه داده MongoDB راه اندازی کنید

برای شروع، یک پایگاه داده MongoDB راه اندازی کنید. از طرف دیگر، می‌توانید با پیکربندی یک خوشه MongoDB در فضای ابری، به سرعت یک پایگاه داده MongoDB را بچرخانید. هنگامی که پایگاه داده خود را راه اندازی کردید، رشته URI اتصال پایگاه داده را کپی کنید.

می توانید کد این پروژه را در این مخزن GitHub پیدا کنید.

یک پروژه Next.js راه اندازی کنید

یک دایرکتوری برای یک پروژه جدید ایجاد کنید و سی دی در آن ایجاد کنید:

mkdir nextjs-project
cd nextjs-project

سپس Next.js را نصب کنید:

npx create-next-app nextjs-mongodb

پس از اتمام مراحل نصب، Mongoose را به عنوان یک وابستگی نصب کنید.

npm install mongoose

در نهایت، در دایرکتوری اصلی پروژه خود، یک فایل env جدید ایجاد کنید تا رشته اتصال پایگاه داده شما را نگه دارد.

NEXT_PUBLIC_MONGO_URI = "database URI connection string"

اتصال پایگاه داده را پیکربندی کنید

در پوشه src یک پوشه جدید ایجاد کنید و نام آن را utils بگذارید. در داخل این پوشه یک فایل جدید به نام dbConfig.js ایجاد کنید و کد زیر را به آن اضافه کنید:

import mongoose from 'mongoose';

const connectMongo = async () => mongoose.connect(process.env.NEXT_PUBLIC_MONGO_URI);

export default connectMongo;

مدل های داده را تعریف کنید

مدل‌های داده ساختار داده‌هایی را که ذخیره می‌شوند، از جمله انواع داده‌ها و روابط بین داده‌ها را تعریف می‌کنند.

MongoDB داده ها را در اسناد JSON مانند ذخیره می کند زیرا یک پایگاه داده NoSQL است. Mongoose راهی برای تعریف نحوه ذخیره و دسترسی به داده‌های مشتریان Next.js از پایگاه داده ارائه می‌کند.

در پوشه src، یک پوشه و نام جدید در مدل ها ایجاد کنید. در داخل این پوشه، یک فایل جدید به نام userModel.js ایجاد کنید و کد زیر را اضافه کنید:

import { Schema, model, models } from 'mongoose';

const userSchema = new Schema({
  name: String,
  email: {
    type: String,
    required: true,
    unique: true,
  },
});

const User = models.User || model('User', userSchema);

export default User;

نقاط پایانی API را ایجاد کنید

بر خلاف سایر فریم ورک های فرانت اند، Next.js پشتیبانی داخلی برای مدیریت API ارائه می دهد. این فرآیند ایجاد API ها را ساده می کند زیرا می توانید به جای راه اندازی یک سرور جداگانه، آنها را مستقیماً در پروژه Next.js تعریف کنید.

مطلب مرتبط:   مقدمه ای بر Web Scraping با Cheerio

هنگامی که مسیرهای API را در دایرکتوری pages/api تعریف کردید، Next.js برای هر یک از فایل‌های این فهرست، نقاط پایانی API ایجاد می‌کند. به عنوان مثال، اگر userV1/user.js را ایجاد کنید، Next.js یک نقطه پایانی قابل دسترسی در http://localhost:3000/api/userV1/user ایجاد می کند.

در داخل pages/api یک پوشه جدید ایجاد کنید و نام آن را userV1 بگذارید. در داخل این پوشه یک فایل جدید به نام user.js ایجاد کنید و کد زیر را اضافه کنید:

import connectMongo from '../../../utils/dbConfig';
import User from '../../../models/userModel';


/**
 * @param {import('next').NextApiRequest} req
 * @param {import('next').NextApiResponse} res
 */
export default async function userAPI(req, res) {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    if (req.method === 'POST') {
      console.log('CREATING DOCUMENT');
      const createdUser = await User.create(req.body);
      console.log('CREATED DOCUMENT');
      res.json({ createdUser });
    } else if (req.method === 'GET') {
      console.log('FETCHING DOCUMENTS');
      const fetchedUsers = await User.find({});
      console.log('FETCHED DOCUMENTS');
      res.json({ fetchedUsers });
    } else {
      throw new Error(`Unsupported HTTP method: ${req.method}`);
    }
  } catch (error) {
    console.log(error);
    res.json({ error });
  }
}

این کد یک نقطه پایانی API را برای ذخیره و واکشی داده های کاربر از پایگاه داده MongoDB پیاده سازی می کند. یک تابع userAPI را تعریف می کند که دو پارامتر req و res را می گیرد. اینها به ترتیب درخواست HTTP ورودی و پاسخ HTTP خروجی را نشان می دهند.

در داخل تابع، کد به پایگاه داده MongoDB متصل می شود و روش HTTP درخواست ورودی را بررسی می کند.

اگر متد یک درخواست POST باشد، کد با استفاده از متد ایجاد، یک سند کاربر جدید در پایگاه داده ایجاد می کند. برعکس، اگر یک درخواست GET باشد، کد تمام اسناد کاربر را از پایگاه داده واکشی می کند.

مصرف نقاط پایانی API

کد زیر را به فایل pages/index.js اضافه کنید:

  • یک درخواست POST به نقطه پایانی API برای ذخیره داده ها در پایگاه داده ارسال کنید. وارد کردن سبک‌ها از ‘@/styles/Home.module.css’;وارد کردن { useState } از ‘react’; صادرات تابع پیش‌فرض Home() {  const [name, setName] = useState(”); const [email, setEmail] = useState(”); const [usersResults, setUsersResults] = useState([]); const createUser = async () => {    try {      const createdUser = await fetch(‘/api/userV1/user’, {        روش: ‘POST’,          سرصفحه: {           سرصفحه: {        – ‘Pe ,   – ‘Content’ body: JSON.stringify({           name,           email,        }),      }).then((res) => res.json()); console.log(‘سند ایجاد شده’); setName(”); setEmail(”); console.log(createdUser); } catch (خطا) {      console.log(error); }  }؛
  • یک تابع برای واکشی داده های کاربر با درخواست HTTP به نقطه پایانی GET تعریف کنید. const displayUsers = async () => {    try {      console.log(‘FETCHING DOCUMENTS’); const fetchedUsers = await fetch(‘/api/userV1/user’).then((res) =>        res.json()     ); console.log(‘اسناد واکشی شده’); setUsersResults(fetchedUsers); console.log(usersResults)      } catch (خطا) {      console.log(error); }  }؛
  • در نهایت، یک عنصر فرم را با فیلدهای ورودی متن رندر کنید و دکمه های داده کاربر را ارسال و نمایش دهید. بازگشت (    <>      
            
             

                                                 { setName(e.target.value)}} />                                              

               

               

            displayUsers}> نمایش داده های کاربر             

                {usersResults.fetchedUsers && usersResults.fetchedUsers.length > 0 && (                     {usersResults.fetchedUsers.map((کاربر) => (                    

  •                       

    {user.name}

                         

    ({user.email})

                                                           

                  )}            

    •           

            

                ؛} 

    import styles from '@/styles/Home.module.css';
    import { useState } from 'react';

    export default function Home() {
      const [name, setName] = useState('');
      const [email, setEmail] = useState('');
      const [usersResults, setUsersResults] = useState([]);

      const createUser = async () => {
        try {
          const createdUser = await fetch('/api/userV1/user', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              name,
              email,
            }),
          }).then((res) => res.json());
          console.log('CREATED DOCUMENT');

          setName('');
          setEmail('');

          console.log(createdUser);
        } catch (error) {
          console.log(error);
        }
      };
    const displayUsers = async () => {
        try {
          console.log('FETCHING DOCUMENTS');
          const fetchedUsers = await fetch('/api/userV1/user').then((res) =>
            res.json()
          );
          console.log('FETCHED DOCUMENTS');
          
          setUsersResults(fetchedUsers);
          console.log(usersResults)
      
        } catch (error) {
          console.log(error);
        }
      };
      return (
        <>
          <main className={styles.main}>
            <div className={styles.description}>
              <div className={styles.form}>
                <label>
                  Name:
                  <input type="text" value={name} onChange={(e) => { setName(e.target.value)}} />
                </label>
                <label>
                  Email:
                  <input type="email" value={email} onChange={(e) => { setEmail(e.target.value) }} />
                </label>
                <button onClick={createUser}>Submit data</button>
              </div>

              <div>
                <button onClick={displayUsers}> Display user Data</button>
                <div className={styles.description}>
                    {usersResults.fetchedUsers && usersResults.fetchedUsers.length > 0 && (
                      <ul>
                        {usersResults.fetchedUsers.map((user) => (
                        <li key={user._id}>
                          <p>{user.name}</p>
                          <p>({user.email})</p>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </div>
            </div>
          </main>
        </>
      );
    }

    در نهایت، پیش بروید و سرور توسعه را برای به روز رسانی تغییرات بچرخانید و در مرورگر خود به http://localhost:3000 بروید.

    npm run dev

    استفاده از Next.js در برنامه ها

    Next.js یک گزینه فوق‌العاده برای ساخت برنامه‌های کاربردی وب جالب است، چه در حال کار بر روی یک پروژه جانبی یا یک راه‌حل وب در مقیاس بزرگ باشید. طیف وسیعی از ویژگی‌ها و قابلیت‌ها را ارائه می‌دهد که فرآیند ایجاد محصولات کارآمد و مقیاس‌پذیر را ساده می‌کند.

    اگرچه این در درجه اول یک چارچوب قوی سمت کلاینت است، اما می‌توانید از قابلیت‌های سمت سرور آن برای چرخش سریع یک سرویس پشتیبان نیز استفاده کنید.

    Tags: