【Drizzle ORM】NextJs14 と Drizzle ORM【#3 connect DB】

【#3 connect DB】

YouTube: https://youtu.be/PvyEinop0qI
https://youtu.be/PvyEinop0qI

今回は、以下のサイトを参考に
DrizzleとNeonの接続部分について実装を進めていきます。

https://orm.drizzle.team/learn

npm i dotenv

appディレクトリと同じ階層に「db」フォルダを作成して、
以下のファイルを作成します。

db/drizzle.ts

import { drizzle } from "drizzle-orm/neon-http";
import { neon } from "@neondatabase/serverless";
import { config } from "dotenv";
import * as schema from "./schema";

config({ path: ".env.local" });

const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql, { schema });

db/schema.ts

import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
import { createInsertSchema } from "drizzle-zod";

export const users = pgTable("users_table", {
  id: text("id").primaryKey(),
  name: text("name").notNull(),
  email: text("email").notNull().unique(),
  imageUrl: text("image_url"),
  createdAt: timestamp("created_at").notNull().defaultNow(),
  updatedAt: timestamp("updated_at")
    .notNull()
    .$onUpdate(() => new Date()),
});

export const insertUsersSchema = createInsertSchema(users);

次に、コンフィグ用のファイルをappディレクトリと同じ階層に作成します。

drizzle.config.ts

import { config } from "dotenv";
import { defineConfig } from "drizzle-kit";

config({ path: ".env.local" });

export default defineConfig({
  schema: "./db/schema.ts",
  out: "./migrations",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
  verbose: true,
  strict: true,
});

最後に、Drizzle用のコマンドをpackage.jsonに追記します。

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio"
  },

//migrateファイルの作成
npm run db:generate

//migrateの実行、データベースへの反映
npm run db:migrate

//Drizzle studioをブラウザで表示
npm run db:studio