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ファイルを作成します。

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ファイルを編集

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ファイルを編集してサーバーアクションを有効化

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というルートが生成されるのです。

これにより、アプリの構造が直感的でわかりやすい！