コンテンツにスキップ

UI for Admin — テックスタック

採用技術

レイヤー 採用技術 備考
フレームワーク Next.js 15 App Router サービス化・アーキテクチャ案 - AWSシステム構成 の「Amplify/NextJS」と整合。サーバーコンポーネントで認証トークンをクライアント JS に露出させない
ランタイム / ツーリング Bun, Biome, Lefthook, TypeScript 5.9 api-admin と統一し、モノレポ設定を流用可能
UI キット shadcn/ui + Tailwind v4 + Radix ソースを自プロジェクトで所有。バックオフィス CRUD の定番
データフェッチ TanStack Query v5 キャッシュ、無効化、楽観的更新、ページネーション
API クライアント Orval が /api/v1/doc から TanStack Query フック + TS 型 + Zod を生成 単一のコードジェンステップ。詳細: セットアップ
テーブル TanStack Table v8 ヘッドレス。shadcn の DataTable パターンと相性良
フォーム React Hook Form + Zod(Orval 生成) zodResolver に Orval 生成スキーマを渡す
URL 状態 nuqs フィルタ・ページ・ソートを URL に保持
i18n next-intl ja / en(ドキュメントと揃える)
テスト Vitest + Testing Library + Playwright Vitest は api-admin と同じ
デプロイ AWS Amplify Hosting サービス化・アーキテクチャ案 - AWSシステム構成 と整合

採用しない技術(理由付き)

  • Refine — 手作業で shadcn + TanStack を組み上げる方がスクリーンごとの自由度が高く、スキャフォールドによる制約を避けたい
  • NextAuth / Auth.js — バックエンドがセッションライフサイクル(PostgreSQL session テーブル、RBAC、クリーンアップジョブ)を所有しているため、二重管理を避ける
  • aws-amplify/auth SDK — Cognito に直接話すことになり、管理者 API のセッションテーブルと DB 由来の RBAC をバイパスしてしまう
  • openapi-zod-client — Orval の Zod 出力と機能が重複する