Next.js入門 #18 実践編ミニブログを完成させる

#9から#17まで、9本の記事を通してミニブログを作り上げてきました。

最終回となる今回は、これまでの内容を振り返りながら、実装全体の見取り図を整理し、つまずきやすいポイントのFAQ、そしてこの先の学習ロードマップをまとめます。

これまでの振り返り

まずは、実践編で何を作ってきたのかを一覧で確認しましょう。

#	タイトル	身につけたこと
9	データベース入門	Prisma + Supabaseでのデータ永続化
10	認証を実装する	Auth.jsでのGoogleログイン、セッション管理
11	UIコンポーネントライブラリ	shadcn/uiでの本格的なUI構築
12	状態管理入門	Zustand（UI状態）とTanStack Query（サーバー状態）の使い分け
13	認証×DBを繋げる	所有者チェックによるアクセス制御
14	Markdown・画像アップロード	react-markdown、Vercel Blob
15	テスト入門	Vitest（ユニット）とPlaywright（E2E）
16	パフォーマンス最適化	next/image・next/font・動的インポート
17	デプロイ戦略	プレビュー環境・CI/CD・ブランチ保護

こう並べてみると、単なる「Next.jsの機能紹介」ではなく、1つのアプリを実際に運用できる状態まで持っていくために必要な要素を、一通り経験してきたことが分かります。

全体のアーキテクチャを俯瞰する

最終的なアプリの構成要素を、レイヤーごとに整理するとこのようになります。

Bash

┌─────────────────────────────────────────┐
│  クライアント（ブラウザ）                    │
│  - Zustand（モーダル等のUI状態）#12         │
│  - TanStack Query（記事一覧のキャッシュ）#12 │
│  - shadcn/ui（UIコンポーネント）#11         │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│  Next.js（App Router）                   │
│  - Server Components（データ取得）#9       │
│  - Server Actions（CRUD処理）#9,#13       │
│  - Route Handlers（検索API等）#12         │
│  - Middleware（認証ガード）#10             │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼────────────────────────┐
│  外部サービス                               │
│  - Auth.js + Google OAuth #10            │
│  - Prisma → Supabase(PostgreSQL) #9      │
│  - Vercel Blob（画像保存）#14               │
└──────────────────────────────────────────┘

  支える仕組み：
  - Vitest / Playwright（テスト）#15
  - GitHub Actions（CI/CD）#17
  - Vercel（ホスティング・プレビュー環境）#17

┌─────────────────────────────────────────┐
│  クライアント（ブラウザ）                    │
│  - Zustand（モーダル等のUI状態）#12         │
│  - TanStack Query（記事一覧のキャッシュ）#12 │
│  - shadcn/ui（UIコンポーネント）#11         │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│  Next.js（App Router）                   │
│  - Server Components（データ取得）#9       │
│  - Server Actions（CRUD処理）#9,#13       │
│  - Route Handlers（検索API等）#12         │
│  - Middleware（認証ガード）#10             │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼────────────────────────┐
│  外部サービス                               │
│  - Auth.js + Google OAuth #10            │
│  - Prisma → Supabase(PostgreSQL) #9      │
│  - Vercel Blob（画像保存）#14               │
└──────────────────────────────────────────┘

  支える仕組み：
  - Vitest / Playwright（テスト）#15
  - GitHub Actions（CI/CD）#17
  - Vercel（ホスティング・プレビュー環境）#17

それぞれの記事が「点」ではなく、こうして繋がって1つのアプリを形作っている、という感覚を持てると、今後別のアプリを作る際にも「今回はどのレイヤーを実装しているのか」を意識しやすくなります。

この先の学習ロードマップ

ミニブログは完成しましたが、実務レベルのアプリにはまだ発展の余地があります。

次のステップとして、以下のようなテーマがおすすめです。

コンテンツ・機能面

コメント機能：#13の所有者チェックの考え方をそのまま応用できます
タグ・カテゴリ機能：Prismaでの多対多リレーション（@@relationの応用）を学ぶ良い題材です
いいね・ブックマーク機能：TanStack QueryのuseMutationを使った、楽観的更新（Optimistic Update）の実践に向いています

インフラ・運用面

監視・エラートラッキング：SentryなどでNext.jsアプリの本番エラーを検知する仕組み
レート制限：Server ActionsやRoute Handlerへの過剰なリクエストを制限する仕組み（Upstash Redis等）
多言語対応（i18n）：next-intlなどを使い、日本語以外のユーザーにも対応する

設計・アーキテクチャ面

フォームバリデーションの強化：
Zod + React Hook Formで、クライアント/サーバー双方のバリデーションを一元化する
より大規模な状態管理の設計：
機能が増えてきた際の、Zustandストアの分割方針
モノレポ化：
管理画面とユーザー向けサイトを分離するなど、アプリが大きくなった際の構成
外部サービスのインターフェース層を切り出す：
この実践編では、Better Auth・Prisma・Vercel Blobといった外部依存のバージョンアップや仕様変更のたびに、複数の記事にまたがって修正が発生しました。
これは、auth.api.getSession(...)のようなライブラリ固有の呼び出しが、コードのあちこちに直接書かれていたためです。
実務では、こうした外部サービスとのやり取りをgetCurrentUser()やuploadFile()のような自前の関数でラップしておくと、ライブラリを乗り換えたり仕様変更に対応したりする際の修正範囲を、そのラップ層の中だけに閉じ込められます。
ただし、使う場所が1〜2箇所しかないうちから先回りで抽象化するとかえって複雑さが増すこともあるため、「同じ外部APIの呼び出しが3箇所以上に散らばり始めたら検討する」くらいの目安で十分です