Web Frameworks スキルグループ

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 コマースサイト
• マーケティングサイト
• 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
# 次に apps/ ディレクトリで Next.js アプリを設定します
# 共有 UI パッケージに remixicon をインストールします

フレームワーク機能比較

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

クイックスタート

Next.js アプリケーション

# 新しいプロジェクトを作成
npx create-next-app@latest my-app
cd my-app

# RemixIcon をインストール
npm install remixicon

# レイアウトにインポート
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# 開発サーバーを起動
npm run dev

Turborepo モノレポ

# モノレポを作成
npx create-turbo@latest my-monorepo
cd my-monorepo

# 構造:
# apps/web/          - Next.js アプリケーション
# apps/docs/         - ドキュメンテーションサイト
# packages/ui/       - RemixIcon を使用した共有コンポーネント
# packages/config/   - 共有設定
# turbo.json         - パイプライン設定

# すべてのアプリを実行
npm run dev

# すべてのパッケージをビルド
npm run build

RemixIcon インテグレーション

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

// React コンポーネント
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />

リファレンスナビゲーション

Next.js リファレンス:

• App Router アーキテクチャ - ルーティング、レイアウト、ページ、並列ルート
• Server Components - RSC パターン、クライアント vs サーバー、ストリーミング
• データ取得 - fetch API、キャッシング、再検証、ローディング状態
• 最適化 - 画像、フォント、スクリプト、バンドル分析、PPR

Turborepo リファレンス:

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

RemixIcon リファレンス:

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

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

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

my-monorepo/
├── apps/
│   ├── web/              # 顧客向け Next.js アプリ
│   ├── admin/            # 管理ダッシュボード Next.js アプリ
│   └── docs/             # ドキュメンテーションサイト
├── packages/
│   ├── ui/               # RemixIcon を使用した共有 UI
│   ├── api-client/       # API クライアントライブラリ
│   ├── config/           # ESLint、TypeScript 設定
│   └── types/            # 共有 TypeScript 型
└── turbo.json            # ビルドパイプライン

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'

// ビルド時に静的生成
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

// 1 時間ごとに再検証
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 に変換

使用例:

# TypeScript と推奨セットアップで新しい Next.js アプリを初期化
python scripts/nextjs-init.py --name my-app --typescript --app-router

# ドライランで既存のモノレポを Turborepo に移行
python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run

# テストを実行
cd scripts/tests
pytest

ベストプラクティス

Next.js:

• デフォルトは Server Components を使用し、Client Components は必要な場合のみ使用
• 適切なローディングおよびエラー状態を実装
• 自動最適化のために Image コンポーネントを使用
• SEO に適切なメタデータを設定
• キャッシング戦略を活用（force-cache、revalidate、no-store）

Turborepo:

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

RemixIcon:

• ミニマルなインターフェースではラインスタイル、強調ではフィルを使用
• 24x24 グリッドアライメントを維持して鮮明なレンダリングを実現
• アクセシビリティのために aria-labels を提供
• 柔軟なテーマ設定のために currentColor を使用
• 複数のアイコンには Webfont、単一アイコンには 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 パイプラインを設定
• デプロイメントプラットフォームを設定