Добавьте базу данных MongoDB в приложение SaaS MVP, которое мы создали в первой части этой серии блогов.

Исходная кодовая база, которую мы создали для SaaS MVP с использованием NextJS, TypeScript, MaterialUI, Storybook, Jest и SWR, описана в:



NextJS + StorybookJS + Material-UI + Jest + SWR
Сейчас это моя любимая установка для новых приложений, и я думаю, вам она тоже понравится. itnext. io



В этом посте мы подключим наше приложение к базе данных MongoDB.

Мы использовали маршруты API NextJS (https://nextjs.org/docs/api-routes/introduction), чтобы серверная часть HTTP API работала на той же кодовой базе, конечно, используя TypeScript.

Сначала создайте базу данных MongoDB.

Существует несколько облачных решений MongoDB, одно из них (если не самое лучшее) - это MongoDB Atlas (https://www.mongodb.com/cloud/atlas). MongoDB Atlas предлагает щедрый уровень бесплатного пользования БД на 500 МБ.

Создайте базу данных MongoDB в Атласе. Первый шаг - создать проект:

На втором этапе создайте кластер базы данных, выбрав план (бесплатно) и хост (облако):

На третьем этапе создайте пользователя кластера базы данных:

Примечание. Напишите где-нибудь пароль пользователя, он понадобится нам на более поздних этапах.

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

MongoDB Compass (https://www.mongodb.com/products/compass) - это клиент MongoDB для настольных ПК. Загрузите его и установите на свой локальный компьютер. Мы будем использовать его для создания нашей базы данных в кластере, а также для создания коллекций и запроса данных на них.

Имя нашей базы данных будет: saas-db и первая коллекция registrations

Используйте MongoDB из маршрутов API NextJS

Начиная с репо, которое мы создали в Части 1, давайте изменим его, чтобы мы могли хранить и запрашивать зарегистрированных пользователей в / из базы данных.

В этом репо мы использовали переменную в памяти для хранения регистраций электронной почты, пришедших со страницы. Мы изменим эту конечную точку, чтобы вместо нее использовать MongoDB Collection registrations.

Установить зависимости

mongodb - единственная нужная нам зависимость

$ yarn add mongodb
yarn add v1.22.11
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @types/webidl-conversions@6.1.1
├─ @types/whatwg-url@8.2.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 7.90s.

Подключение к MongoDB

Для подключения к MongoDB мы повторно используем функцию подключения из папки примеров репозитория NextJS (https://github.com/vercel/next.js/tree/canary/examples/with-mongodb) и оборачиваем ее общим функция, которая обеспечивает прямой доступ к базе данных, поэтому нам не нужно беспокоиться о подключении к базе данных каждый раз, когда нам нужно ее запросить.

Функция withMongo async является универсальной <T>, позволяющей возвращать типизированное значение T. Бывший:

const registrations = await withMongo(async (db: Db) => {
  const collection = db.collection<User>('registrations')
  return await collection.find().toArray()
})

В этом примере переменная registrations будет иметь тип User[].

Еще одна важная деталь - установка переменных среды выполнения:

  • MONGO_DB_URL: URL-адрес подключения MongoDB (это то же самое, что мы использовали для подключения к нашему кластеру базы данных MongoDB с помощью Compass)
  • MONGO_DB_NAME: Имя MongoDB (мы установили saas-db)

Создайте файл .env (или .env.local) в корне вашего проекта.

MONGO_DB_URL=mongodb+srv://<user>:<pass>@<server-url>
MONGO_DB_NAME=saas-db

Измените файл src/pages/api/subscriptions.ts:

Запустите ваше приложение. Теперь у него есть бэкэнд MongoDB.

Выводы

  • Настройка базы данных для SaaS MVP не должна стоить много времени и денег. Существуют бесплатные уровни, поэтому вы можете загрузить свое приложение. Если ваше приложение растет, вы можете покупать больше места по запросу, используя бессерверный тариф (https://www.mongodb.com/pricing).
  • Уровень бесплатного пользования MongoDB Atlas дает вам 500 МБ пространства для базы данных. Просто убедитесь, что вы защитили свой доступ надежным паролем и, если возможно, разрешите списки IP-адресов, пиринг (https://docs.atlas.mongodb.com/security-vpc-peering/) или частные конечные точки (https: // docs.atlas.mongodb.com/security-private-endpoint/ )
  • Типы TypeScript делают все намного проще. mongodb пакет полностью типизирован. Используй это.
  • Полный код можно найти по адресу: https://github.com/outsrc/next-mui/tree/efg/with-mongodb
  • Запуск демонстрации по адресу: https://next-mui-r3ranh7al-outsrc.vercel.app/ (Поскольку на странице нет кнопки удаления, а электронные письма отображаются видимыми, мы удаляем все данные каждые несколько часов. )

Удачного кодирования…