ITTO PORTFOLIO

技術スタック選定とアーキテクチャ設計 - Next.js 15 + Supabase + Cloudflare Workers

Design H/Jack技術選定アーキテクチャ開発

技術スタック選定とアーキテクチャ設計 - Next.js 15 + Supabase + Cloudflare Workers -

はじめに

Design H/Jack の技術選定では、スケーラビリティ、開発効率、コストパフォーマンスを重視しました。MVP段階では最小構成でスタートし、成長に応じて段階的に拡張できる柔軟なアーキテクチャを採用しています。

この記事では、各技術の選定理由と、システム全体のアーキテクチャ設計について解説します。

システム構成

インフラストラクチャ

Frontend (User Interface)
├── Cloudflare Workers (Hosting - OpenNext)
├── Next.js 15 (React Framework)
└── Edge Delivery Network

Backend Services (予定)
├── Supabase PostgreSQL (Database)
├── Supabase Auth (Authentication)
└── Supabase RLS (Row Level Security)

Storage & CDN (予定)
├── Cloudflare R2 (Object Storage)
└── Global Edge Distribution

フロントエンド技術

Next.js 15（App Router）

選定理由

1. App Routerによる直感的なルーティング

Next.js 15のApp Routerは、ファイルシステムベースのルーティングで直感的なページ構成が可能です。

app/
├── (marketing-site)/
│   ├── page.tsx              # トップページ
│   ├── blog/
│   │   ├── page.tsx          # ブログ一覧
│   │   └── [username]/
│   │       ├── page.tsx      # ユーザー別記事一覧
│   │       └── [slug]/
│   │           └── page.tsx  # 記事詳細
├── (app-pages)/
│   ├── page.tsx              # アプリトップ
│   ├── mypage/
│   │   └── blog/
│   │       ├── page.tsx      # 記事管理
│   │       └── create/
│   │           └── page.tsx  # 記事作成
└── sign-in/
    └── page.tsx              # ログイン

2. Server Componentsでパフォーマンス最適化

デフォルトでServer Componentsとして動作し、必要な部分だけClient Componentsに。初期ロード時間の短縮とSEO最適化を実現。

3. Cloudflare Workers対応

OpenNextアダプターを使用することで、Cloudflare Workersへのデプロイが可能。グローバルなエッジネットワークで高速なレスポンスを提供。

4. 成熟したエコシステム

豊富なライブラリとコミュニティサポート。開発効率が高く、問題解決が容易。

TypeScript

選定理由

型安全性:
コンパイル時にエラーを検出し、バグを未然に防ぐ。

開発体験の向上:
IDEの補完機能により、開発速度が向上。

保守性:
コードの意図が明確になり、リファクタリングが容易。

CSS Modules

選定理由

スコープ付きスタイリング:
クラス名の衝突を防ぎ、保守性が向上。

ブランド独自性の維持:
Tailwind CSSに依存せず、Design H/Jack独自のダークポップスタイルを自由に表現。

/* Example: Hero.module.css */
.hero {
  background: var(--colored-black);
  padding: 4rem 2rem;
}

.heroTitle {
  font-family: var(--font-heading);
  color: var(--theme-color-red-primary);
  text-shadow: var(--theme-color-red-shadow);
}

CSS変数による管理:
カラーパレットやタイポグラフィをCSS変数で一元管理。

React Aria

選定理由

アクセシビリティ:
WAI-ARIAに準拠したコンポーネントを簡単に実装。

キーボードナビゲーション:
キーボード操作に対応したインタラクティブなUIを構築。

フォーカス管理:
適切なフォーカス順序を自動で管理。

バックエンド技術（予定）

Supabase

PostgreSQL（Database）

選定理由:

1. 柔軟なデータモデリング

リレーショナルデータベースとして、複雑なデータ関係を表現可能。

-- Example: blog_posts テーブル
CREATE TABLE blog_posts (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID NOT NULL REFERENCES auth.users(id),
  title TEXT NOT NULL,
  slug TEXT NOT NULL,
  content JSONB NOT NULL,
  status TEXT NOT NULL DEFAULT 'draft',
  published_at TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(user_id, slug)
);

2. JSONBサポート

Tiptapのリッチテキストエディタの出力（JSON形式）を直接保存可能。

3. インデックスによる高速検索

適切なインデックス設計により、大量のデータでも高速な検索を実現。

-- インデックス例
CREATE INDEX idx_blog_posts_user_id ON blog_posts(user_id);
CREATE INDEX idx_blog_posts_status ON blog_posts(status);
CREATE INDEX idx_blog_posts_published_at ON blog_posts(published_at DESC);

Supabase Auth（Authentication）

選定理由:

1. 認証機能が標準装備

メール/パスワード認証、OAuth（Google、GitHub等）をすぐに実装可能。

2. セキュリティ

JWT（JSON Web Token）ベースの認証で、セキュアなセッション管理。

3. 統合性

PostgreSQLと完全に統合されており、auth.usersテーブルとの連携が容易。

Supabase RLS（Row Level Security）

選定理由:

1. データベースレベルでのセキュリティ

アプリケーションコードではなく、データベース層でアクセス制御を実装。

-- 公開記事は全員が閲覧可能
CREATE POLICY "Public blog posts are viewable by everyone"
  ON blog_posts FOR SELECT
  USING (status = 'published');

-- 自分の記事は全て閲覧可能
CREATE POLICY "Users can view their own blog posts"
  ON blog_posts FOR SELECT
  USING (auth.uid() = user_id);

2. 細かいアクセス制御

ユーザーごと、テーブルごとに柔軟なポリシーを設定可能。

3. セキュリティの担保

万が一アプリケーションコードに脆弱性があっても、データベースレベルで保護。

デプロイメント

Cloudflare Workers（OpenNext）

選定理由

1. グローバルエッジネットワーク

世界中のエッジロケーションで実行され、どこからアクセスしても高速。

2. 低コスト

無料枠が広く、スケールしても比較的安価。

3. Next.js対応

OpenNextアダプターにより、Next.js 15のApp Routerを完全サポート。

4. Static export対応

静的生成されたページはCDN経由で配信され、さらに高速化。

Cloudflare R2（Object Storage）予定

選定理由

1. S3互換

AWS S3と互換性があり、既存のツールやライブラリが使える。

2. エグレス料金無料

データ転送料金がかからず、画像配信に最適。

3. グローバル配信

Cloudflareのグローバルネットワークで高速配信。

アーキテクチャ方針

段階的な実装

MVP段階:
最小構成でスタートし、機能を検証。

成長段階:
ユーザーフィードバックを基に、段階的に拡張。

スケール段階:
必要に応じて、キャッシュ層やCDNを強化。

詳細な設計は実装時に決定

過剰な初期設計を避け、実装と並行して設計を進める柔軟なアプローチ。

メリット:

  • 無駄な設計を避けられる
  • 実際の問題に基づいた設計ができる
  • 変更に強いアーキテクチャ

現在の実装状況

マーケティングサイト（完成）

  • ランディングページ
  • セクション構成（Hero、Problem、Solution、CTA、Features、FAQ、Footer）
  • レスポンシブ対応
  • Cloudflare Workersへのデプロイ

アプリケーション（未実装）

今後、以下の機能を実装予定：

  • ユーザー認証（Supabase Auth）
  • デザイン投稿機能
  • 検索機能（カラー・フォント検索）
  • プロフィール機能
  • コミュニティ機能（いいね、コメント、フォロー）

ブログ（未実装）

開発者用ブログをMarkdownファイルベースで実装予定。

技術選定の理由まとめ

| 技術 | 選定理由 | |------|---------| | Next.js 15 | App Router、Server Components、Cloudflare Workers対応 | | TypeScript | 型安全性、開発体験の向上、保守性 | | CSS Modules | スコープ付きスタイリング、ブランド独自性 | | React Aria | アクセシビリティ、キーボードナビゲーション | | Supabase | PostgreSQL、認証機能、RLS、統合性 | | Cloudflare Workers | グローバルエッジネットワーク、低コスト | | Cloudflare R2 | S3互換、エグレス料金無料、グローバル配信 |

スケーリング戦略

MVP段階（現在）

Frontend: Next.js 15 + Cloudflare Workers
Backend: なし（静的サイト）
Storage: なし

特徴:

  • 最小構成
  • 低コスト
  • 高速デプロイ

成長段階（実装予定）

Frontend: Next.js 15 + Cloudflare Workers
Backend: Supabase (PostgreSQL + Auth + RLS)
Storage: Cloudflare R2

特徴:

  • データベース導入
  • ユーザー認証
  • 画像アップロード

スケール段階（将来）

Frontend: Next.js 15 + Cloudflare Workers
Backend: Supabase (PostgreSQL + Auth + RLS)
Storage: Cloudflare R2
Cache: Redis (必要に応じて)
CDN: Cloudflare CDN強化

特徴:

  • キャッシュ層追加
  • パフォーマンス最適化
  • 大規模ユーザー対応

パフォーマンス考慮事項

フロントエンド

  • Server Componentsの活用
  • 画像の遅延読み込み
  • コードスプリッティング
  • 静的生成の活用

バックエンド

  • インデックスの適切な設定
  • クエリの最適化
  • ページネーション実装
  • RLSによるセキュアなアクセス制御

ストレージ

  • 画像のリサイズ・圧縮
  • Cloudflare R2 + CDN配信
  • 不要な画像の定期削除

まとめ

Design H/Jack の技術スタックは、スケーラビリティ、開発効率、コストパフォーマンスを重視して選定しました。

フロントエンド:
Next.js 15（App Router）+ TypeScript + CSS Modules + React Aria

バックエンド（予定）:
Supabase（PostgreSQL + Auth + RLS）

デプロイメント:
Cloudflare Workers（OpenNext）+ Cloudflare R2

アーキテクチャ方針:
MVP段階では最小構成でスタートし、成長に応じて段階的に拡張。詳細な設計は実装時に決定していく柔軟なアプローチ。

この技術スタックにより、高速でセキュアなアプリケーションを、低コストで構築・運用できる基盤を整えました。

関連記事:

GitHub: [リンク]
Live Demo: [リンク]