Webフレームワークスキルグループ

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

概要

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

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

このスキルグループを使用するタイミング

モダンな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統合

// Webフォント（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アーキテクチャ - ルーティング、レイアウト、ページ、パラレルルート
サーバーコンポーネント - RSCパターン、クライアントとサーバーの比較、ストリーミング
データフェッチ - 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 />}>ホーム</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：

デフォルトでサーバーコンポーネントを使用し、必要な場合にのみクライアントコンポーネントを使用する
適切なローディングとエラー状態を実装する
自動最適化のためにImageコンポーネントを使用する
SEOのために適切なメタデータを設定する
キャッシュ戦略（force-cache、revalidate、no-store）を活用する
Next.jsの安定したセキュリティリリースをcanaryフレームワークのドリフトとは別に追跡する。プロダクションアプリはパッチ適用済みの安定版リリースラインに留め、特定のアップストリーム問題をテストする場合を除き、canary専用ピンを避ける。

Turborepo：

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

RemixIcon：

ミニマルなインターフェースにはラインスタイル、強調には塗りつぶしを使用する
鮮明なレンダリングのために24x24グリッドに合わせる
アクセシビリティのためにaria-labelを提供する
柔軟なテーマ設定のためにcurrentColorを使用する
複数のアイコンにはWebフォント、単一アイコンにはSVGを推奨

リソース

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

実装チェックリスト

このスタックでの構築：

kit:web-frameworks（Webフレームワークスキルグループ）