Поиск по сайту:

Управление данными Next.js: храните и извлекайте данные MongoDB с помощью Mongoose


Откройте для себя возможности Mongoose и то, как вы можете использовать его для управления данными простого веб-приложения.

Next.js — это универсальная полнофункциональная среда JavaScript, построенная на основе React и поддерживающая его основные функции, такие как JSX, компоненты и перехватчики. Некоторые из основных функций Next.js включают маршрутизацию на основе файлов, CSS в JS и рендеринг на стороне сервера.

Одной из важных возможностей Next.js является его способность легко интегрироваться с различными серверными технологиями, такими как Mongoose, что позволяет вам легко и эффективно управлять данными.

С помощью Mongoose вы можете легко определить производительный REST API из приложения Next.js для хранения и извлечения данных из базы данных MongoDB.

Next.js: полнофункциональный JavaScript-фреймворк

В отличие от React, Next.js считается полнофункциональной веб-инфраструктурой, поскольку он предоставляет комплексное решение для создания веб-приложений, отображаемых на стороне сервера.

Это связано с тем, что он предлагает функции, которые позволяют работать как над интерфейсной, так и над внутренней частью приложения из одного каталога проекта. Вам не обязательно создавать отдельную папку внутреннего проекта для реализации серверных функций, особенно для небольших приложений.

Однако, поскольку Next.js выполняет некоторые внутренние функции, для создания крупномасштабных полнофункциональных приложений вам может потребоваться объединить его со специальной серверной платформой, такой как Express.

Некоторые из основных функций, которые дают 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 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 создайте новую папку и назовите ее в models. Внутри этой папки создайте новый файл с именем 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 вместо настройки отдельного сервера.

После того как вы определили маршруты API внутри каталога страниц/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, код создает новый пользовательский документ в базе данных с помощью метода create. И наоборот, если это запрос GET, код извлекает все пользовательские документы из базы данных.

Использование конечных точек API

Добавьте приведенный ниже код в файл pages/index.js:

  • Отправьте POST-запрос к конечной точке API, чтобы сохранить данные в базе данных.

    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);
        }
      };
  • Определите функцию для получения пользовательских данных путем выполнения HTTP-запросов к конечной точке 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);
        }
      };
  • Наконец, визуализируйте элемент формы с полями ввода текста, а также кнопками отправки и отображения пользовательских данных.

      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 — фантастический вариант для создания классных веб-приложений, независимо от того, работаете ли вы над побочным проектом или над крупномасштабным веб-решением. Он предлагает ряд функций и возможностей, которые упрощают процесс создания производительных и масштабируемых продуктов.

Хотя это прежде всего надежная клиентская среда, вы также можете использовать ее возможности на стороне сервера для быстрого развертывания серверной службы.

Статьи по данной тематике: