Drizzle ORM + база данных PlanetScale в Next.js 13
Готовы ли вы поднять свои навыки веб-разработки на Next.js на новый уровень?
В этом сообщении блога мы погружаемся в захватывающий мир интеграции Drizzle и PlanetScale с Next.js 13.
Узнайте, как эта мощная комбинация может улучшить ваши стратегии управления данными, обеспечивая бесперебойное обновление в режиме реального времени и масштабируемость.
Являетесь ли вы начинающим разработчиком или опытным профессионалом, присоединяйтесь к нам, и мы исследуем синергию Drizzle, PlanetScale и Next.js 13 для создания динамичных и эффективных веб-приложений.
Приготовьтесь открыть новое царство возможностей! Давайте начнем!
Оглавление
- Настройка среды проекта Next.js 13
- Установка зависимостей
- Настройка PlanetScale с помощью Next.js 13
- Связывание Drizzle ORM с PlanetScale
- Создание нашей первой схемы дождя
- Миграции
- Пример CRUD с использованием Drizzle ORM
- Студия «Дождь» (БЕТА)
Настройка Next.js 13 Среда проекта
Чтобы настроить проект Next.js, ознакомьтесь с инструкциями здесь. Процесс установки обычно состоит из запуска следующей команды в терминале.
npx create-next-app@latest
Установка зависимостей
Откройте терминал в каталоге вашего проекта и выполните одну из следующих команд, чтобы начать:
npm install @planetscale/database drizzle-orm dotenv drizzle-kit mysql2 pnpm add @planetscale/database drizzle-orm dotenv drizzle-kit mysql2 yarn add @planetscale/database drizzle-orm dotenv drizzle-kit mysql2
Настройка PlanetScale с помощью Next.js 13
- Зайдите на planetscale.com и создайте аккаунт.
- Введите свои данные (например, имя базы данных, регион) и нажмите
Create Database
. - Нажмите на новую базу данных и на вкладке
Overview
нажмите кнопкуConnect
. - Запишите свои
Username
иPassword
, затем выберитеConnect with Node.js
в раскрывающемся меню. - Скопируйте
DATABASE_URL
в файл.env
в корень вашего проекта Next.js 13. - Измените
DATABASE_URL
на своиUsername
иPassword
следующим образом:
# This can be inside a .env or .env.local file DATABASE_URL='mysql://<YOUR-USERNAME>:<YOUR-PASSWORD>@aws.connect.psdb.cloud/<YOUR-DB-NAME>?ssl={"rejectUnauthorized":true}'
Связывание Drizzle ORM с PlanetScale
- Сначала нам понадобится файл
drizzle.config.ts
, чтобы настроить дождь для работы с PlanetScale.
import type { Config } from "drizzle-kit" import dotenv from "dotenv" // change the path to .env if you prefer. dotenv.config({ path: ".env.local" }) export default { // this is where our drizzle schema is referenced. schema: "./src/db/schema.ts", // this is where the database migrations will be stored. out: "./src/db/migrations", // Authorizes our connection to PlanetScale via Drizzle ORM. dbCredentials: { connectionString: process.env.DATABASE_URL, }, // This is necessary if you want to use drizzle to // manage the database tables using a UI later on. driver: "mysql2", // This is necessary when working with mySQL databases // because they don't support DDL alternation statements // in one transaction. breakpoints: true, } satisfies Config
2. В корне вашего проекта Next.js или в каталоге src/
, если вы выбрали этот вариант установки Next.js, создайте папку с именем db
и файлом с именем index.ts
и скопируйте следующий код:
import { connect } from "@planetscale/database" import { drizzle } from "drizzle-orm/planetscale-serverless" import dotenv from "dotenv" // change the path to .env if you prefer. dotenv.config({ path: ".env.local" }) // create database connection const connection = connect({ url: process.env.PLANET_SCALE_DATABASE_URL, }) // The db instance can now be used for CRUD operations // anywhere in your server-side code. export const db = drizzle(connection)
Создание нашей первой схемы дождя
Теперь, когда мы заложили основу, давайте напишем нашу первую схему!
- Создайте в папке
db
файл с именемschema.ts
со следующим примером кода:
import { relations } from "drizzle-orm" import { int, mysqlTable, serial, text } from "drizzle-orm/mysql-core" export const users = mysqlTable("users", { id: serial("id").primaryKey(), name: text("name"), })
Это простой пример схемы users
, не стесняйтесь изменить его после урока.
Миграции
Теперь, когда наша схема готова, мы должны сгенерировать migrations
— команды SQL, транслируемые из схемы.
После этого мы передаем migrations
в PlanetScale, чтобы PlanetScale была в курсе последней схемы дождя.
- Для этого найдите файл
package.json
и скопируйте следующие команды внутри объектаscripts
:
"scripts": { // ... "migrations:generate": "drizzle-kit generate:mysql", "migrations:push": "drizzle-kit push:mysql", "migrations:drop": "drizzle-kit drop" },
ПРИМЕЧАНИЕ. При желании вы можете изменить названия команд.
2. Теперь выполните следующую команду в своем терминале:
npm migrations:generate && migrations:push pnpm migrations:generate && migrations:push yarn migrations:generate && migrations:push
Пример CRUD с использованием Drizzle ORM
- Создайте файл
page.tsx
в своем проекте Next.js 13 и скопируйте следующий код:
import { db } from "@/db" import { users } from "@/db/schema" export default async function page() { const dbUsers = await db.select().from(users) const createUser = async () => { "use server" await db.insert(users).values({ name: "John Doe" }) } return ( <> <p>my users:</p> {dbUsers.map((users) => ( <div key={users.id}>{users.name}</div> ))} <form action={createUser}> <button>create user</button> </form> </> ) }
Это очень простая страница, отображаемая на стороне сервера, на которой отображаются все пользователи из вашей базы данных, а также форма кнопки, которая вставляет нового пользователя в PlanetScale.
2. Чтобы это работало, вам необходимо включить server actions
внутри вашего файла next.config.js
следующим образом:
// NOTE: I am using a next.config.mjs file rather than a .js, // which uses the new ES6 syntax. /** @type {import('next').NextConfig} */ const nextConfig = { // ... experimental: { serverActions: true, }, } export default nextConfig
3. Запустите сервер разработки через pnpm run dev
, затем перейдите на свою страницу. Нажмите create user
несколько раз и обновите, чтобы проверить свою страницу.
Студия «Дождь» (БЕТА)
Вы можете спросить: «А как насчет пакета drizzle-kit
, зачем он нам нужен?»
Что ж, PlanetScale не предоставляет пользовательский интерфейс (UI) для визуализации ваших данных в режиме реального времени, но drizzle-kit
делает именно это.
Чтобы получить доступ к Drizzle Studio, запустите npx drizzle-kit studio
в окне терминала, затем посетите localhost:4983 (по крайней мере, для меня это порт по умолчанию).
Вот пример, демонстрирующий записи из таблицы order
.
Это очень удобный инструмент для просмотра ваших данных во время разработки по сравнению с загадочной консолью PlanetScale.
Поздравляем! Теперь в вашем арсенале есть еще две выдающиеся и современные технологии.
Ваш рабочий процесс с базами данных теперь значительно улучшится благодаря присущей Drill ORM безопасности типов и Drill Studio для визуализации данных PlanetScale.
Если вам понравилась эта статья, загляните в мой профиль, чтобы увидеть еще много подобных историй, и следите за обновлениями в следующих статьях! 👍
Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.