Next.js(App Router) + Zod + PrismaでTODOリストを作りました
背景
「React、Next.js」「React Hook Formを使った時と使わなかった時」の開発の違いを体感すべく、それぞれでTODOリストを作ることにしました。
当記事は、Next.js、かつReact Hook Formは使わずに開発します。
GitHubはこちら
1. プロジェクトのセットアップ
npx create-next-app@latest todo-list-next
cd todo-list-next
プロンプトでは以下のように選択してください:
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- src/ directory: Yes
- App Router: Yes
- Import alias: No
2. 必要なパッケージをインストール
npm install @prisma/client zod
npm install -D prisma
3. Docker Compose ファイルの作成
プロジェクトのルートにdocker-compose.ymlファイルを作成します。
version: '3.8'
services:
db:
image: postgres:13
environment:
POSTGRES_USER: todouser
POSTGRES_PASSWORD: todopassword
POSTGRES_DB: todo_db
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:
4. PostgreSQL の起動
docker-compose up -d
5. Prismaの初期化
npx prisma init
6. .envファイルを編集
DATABASE_URL="postgresql://todouser:todopassword@localhost:5432/todo_db?schema=public"
7. prisma/schema.prismaファイルを編集
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Todo {
id Int @id @default(autoincrement())
title String
completed Boolean @default(false)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
8. データベースのマイグレーションを実行
npx prisma migrate dev --name init
9. next.config.jsファイルを編集してサーバーアクションを有効化
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverActions: true,
},
}
module.exports = nextConfig
10. コードを書く
GitHub参照
11. アプリケーションの起動
npm run dev
補足
開発が終わったら、Dockerコンテナを停止します。
1. Dockerコンテナの停止
Dockerコンテナを停止したい場合は、以下のコマンドを使用します。
docker-compose down
2. Dockerコンテナの停止して、データを完全に削除したい場合
-vオプションを追加します
docker-compose down -v
ReactとNext.jsのそれぞれの違い
ReactとNext.jsそれぞれでTodoリストを開発し、両者の違いに深い発見がありました。
1. バックエンドの統合が不要
Reactでアプリを作る際、バックエンドは別途用意する必要がありました。
Express.jsなどでサーバーを立て、APIを実装し、それをReactアプリから呼び出す...という具合です。
Next.jsでは、API RoutesやServer Componentsを使うことで、同じプロジェクト内にフロントエンドとバックエンドのコードを共存させることができます。
バックエンドのお膳立てが不要だから便利だー!!
2. ファイルベースのルーティング
Reactでは、通常 react-router などのライブラリを使ってルーティングを設定します。
Next.jsでは、ファイルシステムに基づいたルーティングが自動的に行われます。
pages/about.js というファイルを作れば、自動的に/aboutというルートが生成されるのです。
これにより、アプリの構造が直感的でわかりやすい!
関連記事
Next.jsを使った開発における勘所を鍛える
React + zod + Bun + PrismaでTODOリストを作りました
Next.js(App Router) + zod + PrismaでTODOリストを作りました
Next.js(App Router) + zod + Prisma+React Hook FormでTODOリストを作りました
GitHub
Discussion