Lưu trữ và tìm nạp dữ liệu MongoDB bằng Mongoose

Thiết lập Dự án Next.js

Tạo một thư mục cho một dự án mới và đĩa CD vào đó:

 mkdir nextjs-project
cd nextjs-project 

Sau đó cài đặt Next.js:

 npx create-next-app nextjs-mongodb 

Khi quá trình cài đặt hoàn tất, hãy cài đặt Mongoose làm phụ thuộc.

 npm install mongoose 

Cuối cùng, trong thư mục gốc của dự án, hãy tạo một tệp .env mới để chứa chuỗi kết nối cơ sở dữ liệu của bạn.

 NEXT_PUBLIC_MONGO_URI = "database URI connection string" 

Định cấu hình kết nối cơ sở dữ liệu

bên trong src thư mục, tạo một thư mục mới và đặt tên cho nó đồ dùng. Trong thư mục này, tạo một tệp mới có tên dbConfig.js và thêm đoạn mã sau vào nó:

 import mongoose from 'mongoose';
const connectMongo = async () => mongoose.connect(process.env.NEXT_PUBLIC_MONGO_URI);
export default connectMongo; 

Xác định các mô hình dữ liệu

Các mô hình dữ liệu xác định cấu trúc của dữ liệu sẽ được lưu trữ, bao gồm các loại dữ liệu và mối quan hệ giữa các dữ liệu.

MongoDB lưu trữ dữ liệu trong các tài liệu giống như JSON vì đây là cơ sở dữ liệu NoQuery. Mongoose cung cấp một cách để xác định cách lưu trữ và truy cập dữ liệu từ máy khách Next.js từ cơ sở dữ liệu.

Trong thư mục src, tạo một thư mục mới và đặt tên trong models. Trong thư mục này, tạo một tệp mới có tên người dùngModel.js, và thêm đoạn mã dưới đây:

 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; 

Tạo điểm cuối API

Không giống như các khung giao diện người dùng khác, Next.js cung cấp hỗ trợ tích hợp cho việc quản lý API. Điều này đơn giản hóa quá trình tạo API vì bạn có thể xác định chúng trực tiếp trong dự án Next.js thay vì thiết lập một máy chủ riêng.

Khi bạn đã xác định các tuyến API bên trong thư mục pages/api, Next.js sẽ tạo các điểm cuối API cho từng tệp trong thư mục này. Chẳng hạn, nếu bạn tạo userV1/user.js, Next.js sẽ tạo một điểm cuối có thể truy cập tại http://localhost:3000/api/userV1/user.

Bên trong trang/api, tạo một thư mục mới và đặt tên là userV1. Trong thư mục này, tạo một tệp mới có tên người dùng.jsvà thêm đoạn mã dưới đây:

 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 });
  }
} 

Mã này triển khai điểm cuối API để lưu trữ và tìm nạp dữ liệu người dùng từ cơ sở dữ liệu MongoDB. Nó định nghĩa một API người dùng hàm nhận hai tham số: yêu cầu Và độ phân giải. Chúng đại diện cho yêu cầu HTTP đến và phản hồi HTTP đi tương ứng.

Bên trong hàm, mã kết nối với cơ sở dữ liệu MongoDB và kiểm tra phương thức HTTP của yêu cầu đến.

Nếu phương thức là một yêu cầu POST, mã sẽ tạo một tài liệu người dùng mới trong cơ sở dữ liệu bằng cách sử dụng tạo nên phương pháp. Ngược lại, nếu là một LẤY yêu cầu, mã tìm nạp tất cả tài liệu người dùng từ cơ sở dữ liệu.

Sử dụng các điểm cuối API

Thêm mã dưới đây vào trang/index.js tài liệu:

• Thực hiện yêu cầu POST tới điểm cuối API để lưu trữ dữ liệu trong cơ sở dữ liệu.

   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);
      }
    }; 

• Xác định chức năng tìm nạp dữ liệu người dùng bằng cách thực hiện các yêu cầu HTTP tới điểm cuối GET.

   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);
      }
    }; 

• Cuối cùng, kết xuất phần tử biểu mẫu với các trường nhập văn bản, đồng thời gửi và hiển thị các nút dữ liệu người dùng.

     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>
      </>
    );
  } 

Cuối cùng, hãy tiếp tục và khởi động máy chủ phát triển để cập nhật các thay đổi và điều hướng đến http://localhost:3000 trong trình duyệt của bạn.

 npm run dev 

Sử dụng Next.js trong Ứng dụng

Next.js là một tùy chọn tuyệt vời để xây dựng các ứng dụng web thú vị, cho dù bạn đang làm việc trên một dự án phụ hay một giải pháp web quy mô lớn. Nó cung cấp một loạt các tính năng và khả năng hợp lý hóa quá trình tạo ra các sản phẩm có hiệu suất và khả năng mở rộng.

Mặc dù nó chủ yếu là một khung phía máy khách mạnh mẽ, nhưng bạn cũng có thể sử dụng các khả năng phía máy chủ của nó để nhanh chóng tạo ra một dịch vụ phụ trợ.