web-frameworks

Web Frameworks Skill Group

Next.js、Turborepo、RemixIcon を使用した、最新のフルスタック Web アプリケーション構築に関する包括的なガイドです。

概要

このスキルグループでは、Web 開発向けの強力なツールを 3 つ組み合わせています。

Next.js - SSR、SSG、RSC、最適化機能を備えた React フレームワーク Turborepo - JavaScript／TypeScript 向けの高性能モノレポビルドシステム RemixIcon - 3,100 種類以上のアウトラインおよび塗りつぶしスタイルのアイコンを備えたアイコンライブラリ

このスキルグループを使用する場面

• 最新の React を使用して新しいフルスタック Web アプリケーションを構築する
• 複数のアプリと共有パッケージを含むモノレポをセットアップする
• サーバーサイドレンダリングと静的生成を実装する
• インテリジェントなキャッシュでビルドパフォーマンスを最適化する
• プロフェッショナルなアイコンを使用して一貫性のある UI を作成する
• 複数のプロジェクト間でワークスペースの依存関係を管理する
• 適切な最適化を行い、本番環境に対応したアプリケーションをデプロイする

スタック選択ガイド

単一アプリケーション：Next.js + RemixIcon

スタンドアロンアプリケーションを構築する場合に使用します。

• E コマースサイト
• マーケティング Web サイト
• SaaS アプリケーション
• ドキュメントサイト
• ブログとコンテンツプラットフォーム

セットアップ：

npx create-next-app@latest my-app
cd my-app
npm install remixicon

モノレポ：Next.js + Turborepo + RemixIcon

共有コードを使用する複数のアプリケーションを構築する場合に使用します。

• マイクロフロントエンド
• マルチテナントプラットフォーム
• 共有コンポーネントライブラリを備えた社内ツール
• ロジックを共有する複数のアプリ（Web、管理画面、モバイル Web）
• ドキュメントサイトを備えたデザインシステム

セットアップ：

npx create-turbo@latest my-monorepo
# Then configure Next.js apps in apps/ directory
# Install remixicon in shared UI packages

フレームワーク機能の比較

機能	Next.js	Turborepo	RemixIcon
主な用途	Web フレームワーク	ビルドシステム	UI アイコン
最適な用途	SSR／SSG アプリ	モノレポ	一貫性のあるアイコン
パフォーマンス	組み込みの最適化	キャッシュと並列タスク	軽量なフォント／SVG
TypeScript	完全サポート	完全サポート	型定義を利用可能

クイックスタート

Next.js アプリケーション

# Create new project
npx create-next-app@latest my-app
cd my-app

# Install RemixIcon
npm install remixicon

# Import in layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Start development
npm run dev

Turborepo モノレポ

# Create monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/web/          - Next.js application
# apps/docs/         - Documentation site
# packages/ui/       - Shared components with RemixIcon
# packages/config/   - Shared configs
# turbo.json         - Pipeline configuration

# Run all apps
npm run dev

# Build all packages
npm run build

RemixIcon の統合

// Webfont (HTML/CSS)
<i className="ri-home-line"></i>
<i className="ri-search-fill ri-2x"></i>

// React component
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />

リファレンスの案内

Next.js リファレンス：

• App Router のアーキテクチャ - ルーティング、レイアウト、ページ、並列ルート
• サーバーコンポーネント - RSC パターン、クライアントとサーバーの違い、ストリーミング
• データ取得 - fetch API、キャッシュ、再検証、読み込み状態
• 最適化 - 画像、フォント、スクリプト、バンドル分析、PPR

Turborepo リファレンス：

• セットアップと設定 - インストール、ワークスペース設定、パッケージ構成
• タスクパイプライン - 依存関係、並列実行、タスクの順序付け
• キャッシュ戦略 - ローカルキャッシュ、リモートキャッシュ、キャッシュの無効化

RemixIcon リファレンス：

• 統合ガイド - インストール、使用方法、カスタマイズ、アクセシビリティ

一般的なパターンとワークフロー

パターン 1：フルスタックモノレポ

my-monorepo/
├── apps/
│   ├── web/              # Customer-facing Next.js app
│   ├── admin/            # Admin dashboard Next.js app
│   └── docs/             # Documentation site
├── packages/
│   ├── ui/               # Shared UI with RemixIcon
│   ├── api-client/       # API client library
│   ├── config/           # ESLint, TypeScript configs
│   └── types/            # Shared TypeScript types
└── turbo.json            # Build pipeline

turbo.json：

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

パターン 2：共有コンポーネントライブラリ

// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react"

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  )
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button"
import { RiHomeLine } from "@remixicon/react"

export default function Page() {
  return <Button icon={<RiHomeLine />}>Home</Button>
}

パターン 3：最適化されたデータ取得

// app/posts/[slug]/page.tsx
import { notFound } from 'next/navigation'

// Static generation at build time
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

// Revalidate every hour
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 }
  })
  if (!res.ok) return null
  return res.json()
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  if (!post) notFound()

  return <article>{post.content}</article>
}

パターン 4：モノレポ CI/CD パイプライン

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

ユーティリティスクリプト

scripts/ ディレクトリ内の Python ユーティリティ：

nextjs-init.py - ベストプラクティスに沿った Next.js プロジェクトの初期化 turborepo-migrate.py - 既存のモノレポを Turborepo に変換

使用例：

# Initialize new Next.js app with TypeScript and recommended setup
python scripts/nextjs-init.py --name my-app --typescript --app-router

# Migrate existing monorepo to Turborepo with dry-run
python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run

# Run tests
cd scripts/tests
pytest

ベストプラクティス

Next.js：

• デフォルトではサーバーコンポーネントを使用し、必要な場合にのみクライアントコンポーネントを使用します
• 適切なローディング状態とエラー状態を実装します
• 自動最適化のために Image コンポーネントを使用します
• SEO に適したメタデータを設定します
• キャッシュ戦略（force-cache、revalidate、no-store）を活用します

Turborepo：

• 明確に分離した構成（apps/、packages/）でモノレポを構成します
• タスクの依存関係を正しく定義します（トポロジカルな順序には ^build を使用）
• 適切なキャッシュのために出力を設定します
• チームでの共同作業のためにリモートキャッシュを有効にします
• 変更されたパッケージのタスクのみを実行するためにフィルターを使用します

RemixIcon：

• ミニマルなインターフェースにはラインスタイルを、強調には塗りつぶしスタイルを使用します
• 鮮明に表示するため、24x24 のグリッド配置を維持します
• アクセシビリティのために aria-label を指定します
• 柔軟なテーマ設定のために currentColor を使用します
• 複数のアイコンにはウェブフォントを、単一のアイコンには SVG を使用します

リソース

• Next.js： https://nextjs.org/docs/llms.txt
• Turborepo： https://turbo.build/repo/docs
• RemixIcon： https://remixicon.com

実装チェックリスト

このスタックでの開発：

• プロジェクト構成を作成します（単一アプリまたはモノレポ）
• TypeScript と ESLint を設定します
• App Router を使用して Next.js をセットアップします
• Turborepo のパイプラインを設定します（モノレポの場合）
• RemixIcon をインストールして設定します
• ルーティングとレイアウトを実装します
• ローディング状態とエラー状態を追加します
• 画像とフォントの最適化を設定します
• データ取得のパターンをセットアップします
• キャッシュ戦略を設定します
• 必要に応じて API ルートを追加します
• 共有コンポーネントライブラリを実装します（モノレポの場合）
• リモートキャッシュを設定します（モノレポの場合）
• CI/CD パイプラインをセットアップします
• デプロイプラットフォームを設定します