Zenn
👻

Next.js+TSでフロント・バックを完結させる個人開発 ①要件定義~環境構築

2024/11/13に公開
Next.js
drizzle
shadcn/ui
Orval
tech

目的

インターンやアルバイトで使用した技術の復習も兼ねて、自分のメモを管理する web アプリを作ろうと思います。ただのメモ管理アプリだとつまらないので、アートサイトのようなイメージで UI の良さを意識して作ります。

  • 開発過程を記録として残す
  • ペースメーカーにする

の目的で、記事を書いていきます。

構想

デザインの参考ページとして、Entire Studios というファッションブランドの販促サイトをモデルにしました。

画面要件
  1. ホーム画面（ボタン 3 つ）
    • 背景で動画が 3 パターン動いている。数秒経つごとに勝手に動画切り替わる
    • 動画はボタン 3 つに対応していて、ボタンをホバーすると背景の動画が切り替わる
    • ボタンを押すと詳細ページに飛ぶ
  2. 詳細ページ（3 つ）
    • 各ページでは書かれたメモ書きが配置されていて、メモ書きをクリックすると、編集画面に飛ぶ
    • スクロールすると次々読み込まれる（読み込まれるときに、左から右へと流れるようにフェードイン的に読み込まれていく）
    • 操作を止めると、画面が常に微上下している
    • 検索ボタンがあり、検索をかけると、search?q=画面に飛ぶ
      • ヒット数が 0 だと、0 results と表示される
      • ヒット数が 1 以上だと、ヒットしたものが縦状に並ぶ
  3. 編集画面
    • 文字を入力すると自動で保存される
    • 戻るボタンが左上にあって、戻るボタンを押すと詳細ページ画面に戻る

技術選定

  • フロント、バックエンド
    Next.js(App Router, Route Handlers)+TypeScript
  • ライブラリ
    Shadcn, Tailwind, Orval, Auth.js
  • データベース
    Drizzle+PostgresSQL
  • デプロイ
    Vercel

一部の役割となぜ選んだかについて解説していきます。

1. Next.js
  • React を用いたウェブアプリケーションをより簡単に開発できるように、さまざまな機能を提供するフレームワーク
  • 開発サーバーやビルドツールを内包し、ランタイム環境（Node.js）上で動作する
  • サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、ルーティング、API のサポートなどを統合したもの
  • App Router と Route Handlers はルーティング, API のサポートをするための機能
  • Next.js を使うので、Vite などのビルドツールは必要ないと判断。そもそも Vite は SPA や特定のフレームワーク向けだが
  • 今回はシンプルな CRUD 操作のみのアプリのため、API サーバーに関しては Supabase などは使わずに Next.js にやらせる
  • Vercel でのデプロイと極めて相性が良い
2. Drizzle
  • TypeScript に対応している ORM
  • SQL ライクに DB の操作ができるので、学習コストが低い
3. Auth.js
  • OAuth などの認証認可フローが簡単に実装できるライブラリ
  • React Oauth などのライブラリも使ったことがあるが、バックエンドで完結する認証認可は Auth.js の方がめちゃくちゃ簡単にできる印象
4. Orval
  • Tanstack Query(旧: React Query)を用いて、openapi.yaml から API リクエストのカスタムフックと型定義を自動生成してくれるライブラリ
  • openapi.yaml を書く必要が出て来るが、書いてみたかったのでちょうど良いと思い採用
  • （追記）CC で使うものなので、普通 Next.js の時は採用しない

開発ツール

github はもちろんだが、今回は v0 を利用してみることにする。v0 は Vercel のサービスで、生成 AI を用いて UI を効率的に実装できるもの。
v0 を使うので、figma はなしで。

ディレクトリ構成

開発当初の想定（参考：Next.js のディレクトリ構成を悩んだ結果…）

sample
/project-root
├── /app
│   ├── /api                // APIルートハンドラを配置するフォルダ
│   ├── /(pages)            // アプリページを配置するフォルダ
│   ├── /components
│   │	     ├── /layout    // アプリ全体のレイアウトコンポーネントを配置
│   │	     └── /elements  // アプリ全体で使うコンポーネントを配置するフォルダ
│   ├── /lib                // ライブラリの初期化や共通設定を行うフォルダ
│   ├── /hooks              // アプリ全体で使うカスタムReactフックを配置するフォルダ
│   ├── /types              // アプリ全体で使うTypeScriptの型定義を管理するフォルダ
│   └── /utils              // アプリ全体で使うユーティリティ関数を配置するフォルダ
├── /features               // ページごとに関連するコンポーネント, フック, 型定義を整理するフォルダ
├── /public                 // 画像や静的ファイルを配置するフォルダ
├── /orval                  // Orvalで生成されたAPIフックを配置するフォルダ
├── /drizzle                // Drizzle ORM用のマイグレーションやスキーマ定義を配置するフォルダ
...

環境構築

1. Next.js：npx create-next-app@latest . --use-npm
  • ES lint, tailwind, TypeScript, alias など諸々 yes と回答
  • アプリフォルダに格納されるのがダルイので、. --use-npmをつけることで解決している
  • ブラウザ要件は特に気にしていないので、postcss は不要と判断
2. Shadcn：npx shadcn@latest init
  • style は Default で良さそう
  • base color は Neutral
  • CSS variables は yes
  • Use --legacy-peer-deps で依存関係を意識して install
3. Orval：npm i orval -D
  • hooks の生成は別途行う。ここではライブラリの導入まで
4. Drizzle：npm i drizzle-orm pg --legacy-peer-deps
  • --legacy-peer-deps で依存関係を意識して install

 
 
 
 

以上です。

Discussion