要望、修正があったら気軽にコメントください！！

Next.js × oRPC × Drizzle でDBスキーマからフロントまで型共有する最小ブログテンプレート

Next.js(フロント)・oRPC(API)・Drizzle(DB)で、DBスキーマを起点にZodスキーマとAPI I/Oの型を生成し、フロントまで型安全に共有するテンプレートです。簡易なブログ(Post一覧/作成)を題材に、型の流れと構成を最小限で示しています。

• 型の単一ソース: src/server/db/schema.ts を起点に drizzle-zod で Zod スキーマを生成
• ルーター: @orpc/server で型安全なRPCルートを定義し /rpc にマウント
• クライアント: @orpc/client でルーター型から安全な呼び出しを生成
• UI: Next.js App Router 上でCSR/SSRどちらでも呼べるように fetch リンクを実装

使っている技術

• Next.js 15 / React 19
• oRPC (@orpc/server, @orpc/client) fetchリンク
• Drizzle ORM + postgres-js ドライバ
• drizzle-zod + Zod によるスキーマ/バリデーション共有
• Tailwind CSS v4 (最小スタイル)

リポジトリ構成の要点

• src/server/db/schema.ts:1 Postテーブル定義とZodスキーマ生成
• src/server/router.ts:1 oRPCルーター。blog.create と blog.list
• src/app/rpc/[[...rest]]/route.ts:1 Next.js Route Handlerで/rpcを公開
• src/orpc/orpc.ts:1 ブラウザ/SSR両対応の RPCLink(fetch) 実装
• src/orpc/client.ts:1 DBクライアント(drizzle)とスキーマのバインド
• src/app/page.tsx:1 シンプルな投稿フォームと一覧UI

前提

• Node.js 18+ 推奨（Next.js 15に準拠）
• PostgreSQL 接続先（ローカル・Docker・クラウドいずれでも可）

例: ローカルにPostgresを立てる

docker run --name blogpg -e POSTGRES_PASSWORD=postgres -e POSTGRES_USER=postgres -e POSTGRES_DB=blog -p 5432:5432 -d postgres:16

セットアップ

1. 依存関係をインストール

npm install

2. .env を作成し、DB接続URLを設定

cp .env.example .env  # 例が無い場合は新規作成

.env の例:

DATABASE_URL=postgres://postgres:postgres@localhost:5432/blog

3. Drizzle のマイグレーション（任意・推奨）

このテンプレートは src/server/db/schema.ts をスキーマの単一ソースとしています。Drizzle Kit でマイグレーションを生成・適用するとDBにテーブルが作成されます。

drizzle.config.ts の例:

// drizzle.config.ts
import { defineConfig } from 'drizzle-kit'

export default defineConfig({
  dialect: 'postgresql',
  schema: './src/server/db/schema.ts',
  out: './drizzle',
  dbCredentials: { url: process.env.DATABASE_URL! },
})

コマンド:

# 変更点からSQLを生成
npx drizzle-kit generate

# DBに適用
npx drizzle-kit push

実行

開発サーバー:

npm run dev
# http://localhost:3000

ビルド/本番起動:

npm run build
npm start

仕組みの概要（型の流れ）

1. src/server/db/schema.ts で Drizzle のテーブルと drizzle-zod による Zod スキーマを定義
2. src/server/router.ts で oRPC の os.input()/os.output() に Zod を差し込み、型安全なAPIを作成
3. src/app/rpc/[[...rest]]/route.ts で RPCHandler を /rpc にバインド
4. src/orpc/orpc.ts の RPCLink(fetch) でブラウザ/SSR両対応の呼び出し先を用意
5. src/app/page.tsx から createORPCClient で型付きクライアントを生成して .blog.create/.blog.list を呼び出し

使用ライブラリとインストールコマンド

既存プロジェクトに段階的に導入する際の参考用です（本テンプレートはすでに導入済み）。

• Next.js/React（新規作成）
  • npm create next-app@latest
• oRPC（APIルーター/クライアント）
  • npm i @orpc/server @orpc/client
• Drizzle ORM + ドライバ（PostgreSQLの場合）
  • npm i drizzle-orm postgres
• Drizzle Kit（マイグレーション）
  • npm i -D drizzle-kit
• Zod + drizzle-zod（スキーマ共有）
  • npm i zod drizzle-zod
• Tailwind CSS v4（必要に応じて）
  • npm i -D tailwindcss @tailwindcss/postcss
  • postcss.config.mjs の plugins に "@tailwindcss/postcss" を追加
• TypeScript型（Next.jsで自動導入されることが多い）
  • npm i -D typescript @types/node @types/react @types/react-dom
• ESLint（任意）
  • npm i -D eslint eslint-config-next

よくあるハマりどころ

• Relation "posts" does not exist などのエラー
  • マイグレーション未適用の可能性があります。npx drizzle-kit generate → npx drizzle-kit push を実行してください。
• DATABASE_URL 未設定
  • .env に接続文字列を設定してください。Dockerのポート/ユーザ/DB名に注意。
• SSR/ブラウザの切り替えでヘッダーが必要
  • 本テンプレートの RPCLink は next/headers を用いてSSRヘッダーを引き継ぐ簡易実装です。

カスタマイズのヒント

• 認証/認可: src/app/rpc/[[...rest]]/route.ts の context にユーザー情報を載せ、ハンドラ側で参照
• DBドライバ変更: DrizzleはMySQL/SQLite/LibSQL等も対応。postgres の代わりに各ドライバを導入
• バリデーション拡張: drizzle-zod 生成後に .refine() 等でドメインルールを追加
• UI強化: TailwindやUIライブラリを追加してフォーム/一覧を整える

参考リンク

• Next.js Documentation
• Tailwind CSS
• oRPC
• drizzle
• drizzle-zod