🗂

【Drizzle ORM】NextJs14 と Drizzle ORM【#１ Set Up】

2024/06/29に公開

Next.js

【#１ Set Up】

YouTube: https://youtu.be/Zdzow7cvQV8
https://youtu.be/Zdzow7cvQV8

今回からNextJSを使用して「Drizzle ORM」について
解説していきます。

まずは必要最低限のライブラリのインストールとセットアップを行います。
バージョンアップで実装方法が変わる必要がありますので、
動画と各ライブラリのバージョンを合わせてインストールしてください。

package.json

{
  "name": "next-drizzle",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hono/clerk-auth": "^2.0.0",
    "@hono/zod-validator": "^0.2.2",
    "@neondatabase/serverless": "^0.9.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "drizzle-orm": "^0.31.2",
    "drizzle-zod": "^0.5.1",
    "hono": "^4.4.7",
    "lucide-react": "^0.395.0",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "drizzle-kit": "^0.22.7",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

動画内で使用したセットアップ用のコマンドです。

npx create-next-app@latest
npm i drizzle-orm @neondatabase/serverless --force
npm i -D drizzle-kit
npm i drizzle-zod
npm i hono
npm i @hono/clerk-auth 
npm i @hono/zod-validator
npx shadcn-ui@latest init

//ライブラリ名の後に「@0.31.2」のような形でバージョンを指定できます

https://hono.dev/

【#１ Set Up】

Discussion