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

  1. Зайдите на planetscale.com и создайте аккаунт.
  2. Введите свои данные (например, имя базы данных, регион) и нажмите Create Database.
  3. Нажмите на новую базу данных и на вкладке Overview нажмите кнопку Connect.
  4. Запишите свои Username и Password, затем выберите Connect with Node.js в раскрывающемся меню.
  5. Скопируйте DATABASE_URL в файл .env в корень вашего проекта Next.js 13.
  6. Измените 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

  1. Сначала нам понадобится файл 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)

Создание нашей первой схемы дождя

Теперь, когда мы заложили основу, давайте напишем нашу первую схему!

  1. Создайте в папке 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 была в курсе последней схемы дождя.

  1. Для этого найдите файл 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

  1. Создайте файл 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, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.