Откройте для себя возможности 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-проект
cd nextjs-проектЗатем установите Next.js:
npx создать следующее приложение nextjs-mongodbПосле завершения процесса установки установите Mongoose в качестве зависимости.
npm установить мангустаНаконец, в корневом каталоге вашего проекта создайте новый файл .env для хранения строки подключения к базе данных.
NEXT_PUBLIC_MONGO_URI = "строка подключения URI базы данных"Настройка подключения к базе данных
в источник каталог, создайте новую папку и назовите ее утилиты. Внутри этой папки создайте новый файл с именем dbConfig.js и добавьте в него следующий код:
Импортировать мангуста от'мангуста';константа подключитьмонго = асинхронный () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
экспортпо умолчанию подключитьмонго;
Определите модели данных
Модели данных определяют структуру данных, которые будут храниться, включая типы данных и отношения между данными.
MongoDB хранит данные в документах, подобных JSON, поскольку это База данных NoSQL. Mongoose предоставляет способ определить, как данные от клиентов Next.js должны храниться и получать к ним доступ из базы данных.
В каталоге src создайте новую папку и назовите ее в models. Внутри этой папки создайте новый файл с именем userModel.js, и добавьте код ниже:
Импортировать {Схема, модель, модели} от'мангуста';константа пользовательская схема = новый Схема({
имя: Нить,
электронная почта: {
тип: Нить,
необходимый: истинный,
уникальный: истинный,
},
});константа Пользователь = модели. Пользователь || модель('Пользователь', пользовательская схема);
экспортпо умолчанию Пользователь;
Создайте конечные точки API
В отличие от других интерфейсных фреймворков, Next.js предоставляет встроенную поддержку управления API. Это упрощает процесс создания API, поскольку вы можете определить их непосредственно в проекте Next.js, а не настраивать отдельный сервер.
После того как вы определили маршруты API внутри каталога pages/api, Next.js создает конечные точки API для каждого из файлов в этом каталоге. Например, если вы создаете userV1/user.js, Next.js создаст конечную точку, доступную по адресу http://localhost: 3000/API/пользовательV1/пользователь.
Внутри страницы/API, создайте новую папку и назовите ее userV1. Внутри этой папки создайте новый файл с именем user.js, и добавьте код ниже:
Импортировать подключитьМонго от'../../../utils/dbConfig';
Импортировать Пользователь от'../../../модели/userModel';/**
* @параметр {Импортировать('следующий').NextApiRequest} запрос
* @параметр {Импортировать('следующий').NextApiResponse} разрешение
*/
экспортпо умолчаниюасинхронныйфункцияпользовательский API(запрос, разрешение) {
пытаться {
консоль.бревно(«ПОДКЛЮЧЕНИЕ К МОНГО»);
Ждите подключитьмонго();
консоль.бревно(«СВЯЗАН С МОНГО»);
если (треб.метод 'ПОЧТА') {
консоль.бревно(«СОЗДАНИЕ ДОКУМЕНТА»);
константа созданный пользователь = Ждите User.create(req.body);
консоль.бревно("СОЗДАН ДОКУМЕНТ");
res.json({созданный пользователь});
} ещеесли (треб.метод 'ПОЛУЧАТЬ') {
консоль.бревно(ПОЛУЧЕНИЕ ДОКУМЕНТОВ);
константа fetchedUsers = Ждите Пользователь. найти ({});
консоль.бревно(«ПОЛУЧЕННЫЕ ДОКУМЕНТЫ»);
res.json({fetchedUsers});
} еще {
бросатьновыйОшибка(`Неподдерживаемый метод HTTP: ${треб.метод}`);
}
} ловить (ошибка) {
консоль.лог (ошибка);
res.json ({ошибка});
}
}
Этот код реализует конечную точку API для хранения и извлечения пользовательских данных из базы данных MongoDB. Он определяет пользовательский API функция, которая принимает два параметра: запрос и разрешение. Они представляют собой входящий HTTP-запрос и исходящий HTTP-ответ соответственно.
Внутри функции код подключается к базе данных MongoDB и проверяет HTTP-метод входящего запроса.
Если метод представляет собой запрос POST, код создает новый пользовательский документ в базе данных, используя создавать метод. И наоборот, если это ПОЛУЧАТЬ request, код извлекает все пользовательские документы из базы данных.
Использование конечных точек API
Добавьте приведенный ниже код в страницы/index.js файл:
- Отправьте запрос POST к конечной точке API для сохранения данных в базе данных.
Импортировать стили от'@/styles/Home.module.css';
Импортировать { состояние использования } от«реагировать»;экспортпо умолчаниюфункцияДом() {
константа [имя, setName] = useState('');
константа [электронная почта, setEmail] = useState('');
константа [usersResults, setUsersResults] = useState([]);константа создать пользователя = асинхронный () => {
пытаться {
константа созданный пользователь = Ждите принести('/API/userV1/пользователь', {
метод: 'ПОЧТА',
заголовки: {
'Тип содержимого': 'приложение/json',
},
тело: JSON.stringify({
имя,
электронная почта,
}),
}).затем((разрешение) => res.json());
консоль.бревно("СОЗДАН ДОКУМЕНТ");Имя набора('');
установить электронную почту ('');консоль.log(созданныйПользователь);
} ловить (ошибка) {
консоль.лог (ошибка);
}
}; - Определите функцию для получения пользовательских данных путем выполнения HTTP-запросов к конечной точке GET.
константа DisplayUsers = асинхронный () => {
пытаться {
консоль.бревно(ПОЛУЧЕНИЕ ДОКУМЕНТОВ);
константа fetchedUsers = Ждите принести('/API/userV1/пользователь').затем((разрешение) =>
res.json()
);
консоль.бревно(«ПОЛУЧЕННЫЕ ДОКУМЕНТЫ»);
setUsersResults (выбранные пользователи);
консоль.log (результаты пользователей)
} ловить (ошибка) {
консоль.лог (ошибка);
}
}; - Наконец, визуализируйте элемент формы с полями ввода текста и кнопками отправки и отображения пользовательских данных.
возвращаться (
<>
Наконец, продолжайте и запустите сервер разработки, чтобы обновить изменения и перейти к http://localhost: 3000 в вашем браузере.
нпм запустить разработчикИспользование Next.js в приложениях
Next.js — отличный вариант для создания крутых веб-приложений, независимо от того, работаете ли вы над побочным проектом или крупномасштабным веб-решением. Он предлагает ряд функций и возможностей, упрощающих процесс создания производительных и масштабируемых продуктов.
Хотя это в первую очередь надежная клиентская среда, вы также можете использовать ее возможности на стороне сервера для быстрого развертывания серверной службы.
