OpenClaw 向け Next.js Expert スキル

OpenClaw Next.js Expert スキル概要

Next.js Expert スキルは、OpenClaw エージェントに Next.js フレームワークの深い知識を与えます。App Router、React Server Components、Server Actions、ミドルウェア、キャッシュ戦略、本番デプロイパターンをカバーしています。ドキュメントや Stack Overflow を検索する代わりに、OpenClaw に直接質問して、プロジェクトに合わせた正確で最新のガイダンスを得ましょう。

このスキルは、Next.js 13+ でモダンなフルスタック React アプリケーションを構築する開発者に最適です。Pages Router からの移行、複雑なデータフェッチングパターンの実装、アプリケーションのパフォーマンス最適化など、OpenClaw Next.js Expert スキルが現在のベストプラクティスに基づいたコンテキスト対応の回答を提供します。

一般的なワークフロー：

1. OpenClaw に Next.js のアーキテクチャに関する質問をするか、直面している問題を説明します。
2. エージェントが Next.js の規約とパターンの知識を使って質問を分析します。
3. コード例、ファイル構造の推奨事項、関連する Next.js ドキュメント へのリンクを含む詳細な説明を受け取れます。タブの切り替えは不要です。

Next.js Expert スキルの前提条件

Next.js Expert スキルをインストールする前に、以下を準備してください：

• OpenClaw がインストールされ、実行中であること（v1.0+）
• Node.js 18.17+ がインストールされていること — Node.js をダウンロード
• Next.js プロジェクト（App Router 機能には 13+ を推奨）
• スキル管理用の clawhub CLI がインストールされていること

セットアップを確認します：

# OpenClaw のバージョンを確認
openclaw --version

# Node.js のバージョンを確認
node --version

# Next.js プロジェクトがあるか確認
npx next --version

Next.js Expert スキルのインストール方法

1 つのコマンドで Next.js Expert スキルをインストールします：

npx clawhub@latest install nextjs-expert

インストールを確認するには：

clawhub list

インストール済みスキルの一覧に nextjs-expert が表示されるはずです。インストール前に clawhub inspect nextjs-expert でスキルの詳細を確認することもできます。

Next.js Expert スキルの設定

Next.js Expert スキルはナレッジベースのスキルであり、API キーや外部サービスの認証は不要です。インストール後すぐに使えます。

オプションのプロジェクトコンテキスト

最良の結果を得るには、OpenClaw エージェントがプロジェクトディレクトリにアクセスできるようにしてください。スキルが既存のコードを分析して、より的確なアドバイスを提供できます：

# Next.js プロジェクトのルートに移動
cd /path/to/your-nextjs-app

# プロジェクトディレクトリで OpenClaw を起動
openclaw

OpenClaw が next.config.js、tsconfig.json、app/ ディレクトリ構造にアクセスできると、Next.js Expert スキルはルーティング構造、ミドルウェア設定、インストール済みパッケージなど、特定のセットアップに合った推奨事項を提供できます。

最新状態の維持

このスキルは Next.js 13 から最新リリースまでをカバーしています。最新のガイダンスを確保するには：

# スキルを最新バージョンに更新
npx clawhub@latest install nextjs-expert

Next.js Expert スキルの使用例

1. App Router のアーキテクチャに関する意思決定

あなた： 「ダッシュボードセクションに layout と template のどちらを使うべきですか？サイドバーを維持しつつ、メインコンテンツはナビゲーション時に再レンダリングさせたいです。」

エージェントは layout.tsx（ナビゲーション間で維持され、状態を保持）と template.tsx（ナビゲーションごとに再作成）の違いを説明し、サイドバーには layout を使用することを推奨します。各ページは個別のルートセグメントであるため、メインコンテンツ領域は自動的に再レンダリングされることを確認します。

2. データフェッチング戦略

あなた： 「5 分ごとに更新される商品データを取得する必要があります。App Router での最適なアプローチは何ですか？」

エージェントは Server Component で時間ベースの再検証を使用した fetch を推奨し、完全な例を提供します：

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 300 } // 5分ごとに再検証
  });
  return res.json();
}

また、Server Actions を使ったオンデマンド再検証のために revalidatePath や revalidateTag を使用するタイミングについても説明します。

3. Server Components と Client Components

あなた： 「静的な説明文とインタラクティブな『カートに追加』ボタンがある商品ページがあります。コンポーネントをどのように分割すべきですか？」

エージェントは、SEO とパフォーマンスのために商品ページを Server Component として維持し、AddToCartButton のみを 'use client' で Client Component として抽出することをアドバイスします。商品説明の HTML はクライアントサイド JavaScript なしでサーバー上でレンダリングされ、インタラクティブなボタンは独立してハイドレーションされるという利点を説明します。

4. ミドルウェアと認証

あなた： 「/dashboard 配下のすべてのルートを認証ミドルウェアで保護するにはどうすればよいですか？」

エージェントは matcher 設定を使用したミドルウェアの実装を提供し、セッショントークンの確認方法とリダイレクトパターンを示します。また、ミドルウェアは Edge で実行されるため fs などの Node.js API を使用できないことを注記し、本番環境の認証には NextAuth.js や Clerk の統合パターンを推奨します。

セキュリティとベストプラクティス

AI アシスタントを使用して Next.js アプリケーションを構築する際は、以下のガイドラインに従ってください：

• 生成されたコードを注意深くレビューしてください。 プロジェクトに追加する前に、必ずコードの提案を読んで理解してください。このスキルはガイダンスを提供しますが、本番環境対応のコードを保証するものではありません。
• Server Actions の入力を検証してください。 スキルがフォーム処理に Server Actions を提案する場合、適切な入力検証と認可チェックを必ず追加してください。エージェントが注意を促しますが、常に自分で確認してください。
• 機密データはサーバー側に保持してください。 API キー、データベースの認証情報、シークレットを Client Components に公開しないでください。NEXT_PUBLIC_ プレフィックス付きの環境変数は、本当に公開して良い値にのみ使用してください。
• 型安全性のために TypeScript を使用してください。 このスキルはデフォルトで TypeScript の例を提供します。特に複雑なデータフェッチングパターンでは、型チェックを活用して早期にエラーを検出しましょう。
• 最小権限の原則に従ってください。 スキルが API ルートハンドラーやミドルウェアパターンを提案する場合、最小限必要なデータとアクセスのみを公開するようにしてください。

よくあるエラーのトラブルシューティング

"You're importing a component that needs useState. It only works in a Client Component."

Server Component で React フック（useState、useEffect、useContext など）を使用しています。ファイルの先頭に 'use client' ディレクティブを追加するか、インタラクティブな部分を別の Client Component に抽出してください。

// ファイルの一番上にこれを追加
'use client';

import { useState } from 'react';

"Error: Dynamic server usage: Route /api/... couldn't be rendered statically"

ルートが動的な機能（cookies、headers、searchParams）を使用していますが、Next.js が静的に生成しようとしています。ルートに export const dynamic = 'force-dynamic' を追加するか、静的にレンダリング可能なページで動的 API を使用しないように再構成してください。

// このルートに動的レンダリングを強制
export const dynamic = 'force-dynamic';

"Module not found: Can't resolve 'fs' in middleware"

ミドルウェアまたは Edge ルートで Node.js 専用モジュールを使用しようとしています。ミドルウェアは Edge Runtime で実行されるため、fs、path、その他の Node.js 組み込みモジュールをサポートしていません。ファイルシステムのロジックを export const runtime = 'nodejs' を持つ API ルートに移動してください。