jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ React Nextjs Development

react-nextjs-development

ReactとNext.js 14以降の

⚡ ⏱ 障害ポストモーテム 1日 → 1時間

📺 まず動画で見る(YouTube)

▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ReactとNext.js 14以降の

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o react-nextjs-development.zip https://jpskill.com/download/3364.zip && unzip -o react-nextjs-development.zip && rm react-nextjs-development.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/3364.zip -OutFile "$d\react-nextjs-development.zip"; Expand-Archive "$d\react-nextjs-development.zip" -DestinationPath $d -Force; ri "$d\react-nextjs-development.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して react-nextjs-development.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → react-nextjs-development フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › React Nextjs Development を使って、最小構成のサンプルコードを示して
  • › React Nextjs Development の主な使い方と注意点を教えて
  • › React Nextjs Development を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

React/Next.js 開発ワークフロー

概要

App Router、Server Components、TypeScript、Tailwind CSS などのモダンなパターンを使用して、React および Next.js 14+ アプリケーションを構築するための専門的なワークフローです。

このワークフローを使用するタイミング

このワークフローは、次のような場合に使用します。

  • 新しい React アプリケーションを構築する場合
  • App Router を使用して Next.js 14+ プロジェクトを作成する場合
  • Server Components を実装する場合
  • React で TypeScript をセットアップする場合
  • Tailwind CSS でスタイリングする場合
  • フルスタックの Next.js アプリケーションを構築する場合

ワークフローのフェーズ

フェーズ 1: プロジェクトのセットアップ

呼び出すスキル

  • app-builder - アプリケーションの足場固め
  • senior-fullstack - フルスタックのガイダンス
  • nextjs-app-router-patterns - Next.js 14+ のパターン
  • typescript-pro - TypeScript のセットアップ

アクション

  1. プロジェクトの種類を選択します (React SPA、Next.js アプリ)。
  2. ビルドツールを選択します (Vite、Next.js、Create React App)。
  3. プロジェクト構造の足場固めを行います。
  4. TypeScript を設定します。
  5. ESLint と Prettier をセットアップします。

コピー＆ペーストプロンプト

@app-builder を使用して、App Router を備えた新しい Next.js 14 プロジェクトの足場固めを行います
@nextjs-app-router-patterns を使用して Server Components をセットアップします

フェーズ 2: コンポーネントアーキテクチャ

呼び出すスキル

  • frontend-developer - コンポーネント開発
  • react-patterns - React のパターン
  • react-state-management - 状態管理
  • react-ui-patterns - UI パターン

アクション

  1. コンポーネント階層を設計します。
  2. ベースコンポーネントを作成します。
  3. レイアウトコンポーネントを実装します。
  4. 状態管理をセットアップします。
  5. カスタムフックを作成します。

コピー＆ペーストプロンプト

@frontend-developer を使用して再利用可能な React コンポーネントを作成します
@react-patterns を使用して適切なコンポーネントコンポジションを実装します
@react-state-management を使用して Zustand ストアをセットアップします

フェーズ 3: スタイリングとデザイン

呼び出すスキル

  • frontend-design - UI デザイン
  • tailwind-patterns - Tailwind CSS
  • tailwind-design-system - デザインシステム
  • core-components - コンポーネントライブラリ

アクション

  1. Tailwind CSS をセットアップします。
  2. デザイン・トークンを設定します。
  3. ユーティリティクラスを作成します。
  4. コンポーネントスタイルを構築します。
  5. レスポンシブデザインを実装します。

コピー＆ペーストプロンプト

@tailwind-patterns を使用して Tailwind CSS v4 でコンポーネントをスタイリングします
@frontend-design を使用してモダンなダッシュボード UI を作成します

フェーズ 4: データフェッチ

呼び出すスキル

  • nextjs-app-router-patterns - Server Components
  • react-state-management - React Query
  • api-patterns - API 統合

アクション

  1. Server Components を実装します。
  2. React Query/SWR をセットアップします。
  3. API クライアントを作成します。
  4. ローディング状態を処理します。
  5. エラー境界を実装します。

コピー＆ペーストプロンプト

@nextjs-app-router-patterns を使用して Server Components のデータフェッチを実装します

フェーズ 5: ルーティングとナビゲーション

呼び出すスキル

  • nextjs-app-router-patterns - App Router
  • nextjs-best-practices - Next.js のパターン

アクション

  1. ファイルベースのルーティングをセットアップします。
  2. 動的ルートを作成します。
  3. ネストされたルートを実装します。
  4. ルートガードを追加します。
  5. リダイレクトを設定します。

コピー＆ペーストプロンプト

@nextjs-app-router-patterns を使用して並列ルートとインターセプトするルートをセットアップします

フェーズ 6: フォームとバリデーション

呼び出すスキル

  • frontend-developer - フォーム開発
  • typescript-advanced-types - 型バリデーション
  • react-ui-patterns - フォームパターン

アクション

  1. フォームライブラリを選択します (React Hook Form、Formik)。
  2. バリデーションをセットアップします (Zod、Yup)。
  3. フォームコンポーネントを作成します。
  4. 送信を処理します。
  5. エラー処理を実装します。

コピー＆ペーストプロンプト

@frontend-developer を使用して React Hook Form と Zod でフォームを作成します

フェーズ 7: テスト

呼び出すスキル

  • javascript-testing-patterns - Jest/Vitest
  • playwright-skill - E2E テスト
  • e2e-testing-patterns - E2E パターン

アクション

  1. テストフレームワークをセットアップします。
  2. 単体テストを作成します。
  3. コンポーネントテストを作成します。
  4. E2E テストを実装します。
  5. CI 統合を設定します。

コピー＆ペーストプロンプト

@javascript-testing-patterns を使用して Vitest テストを作成します
@playwright-skill を使用して重要なフローの E2E テストを作成します

フェーズ 8: ビルドとデプロイ

呼び出すスキル

  • vercel-deployment - Vercel デプロイ
  • vercel-deploy-claimable - Vercel デプロイ
  • web-performance-optimization - パフォーマンス

アクション

  1. ビルド設定を構成します。
  2. バンドルサイズを最適化します。
  3. 環境変数をセットアップします。
  4. Vercel にデプロイします。
  5. プレビューデプロイメントを設定します。

コピー＆ペーストプロンプト

@vercel-deployment を使用して Next.js アプリを本番環境にデプロイします

テクノロジースタック

カテゴリ テクノロジー
フレームワーク Next.js 14+, React 18+
言語 TypeScript 5+
スタイリング Tailwind CSS v4
状態 Zustand, React Query
フォーム React Hook Form, Zod
テスト Vitest, Playwright
デプロイ Vercel

品質ゲート

  • [ ] TypeScript がエラーなしでコンパイルされること
  • [ ] すべてのテストがパスすること
  • [ ] Linting がクリーンであること
  • [ ] パフォーマンス指標が満たされていること (LCP, CLS, FID)
  • [ ] アクセシビリティがチェックされていること (WCAG 2.1)
  • [ ] レスポンシブデザインが検証されていること

関連ワークフローバンドル

  • development - 一般的な開発
  • testing-qa - テストワークフロー
  • documentation - ドキュメンテーション
  • typescript-development - TypeScript パターン

制限事項

  • このスキルは、タスクが上記の範囲と明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して説明を求めてください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

React/Next.js Development Workflow

Overview

Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.

When to Use This Workflow

Use this workflow when:

  • Building new React applications
  • Creating Next.js 14+ projects with App Router
  • Implementing Server Components
  • Setting up TypeScript with React
  • Styling with Tailwind CSS
  • Building full-stack Next.js applications

Workflow Phases

Phase 1: Project Setup

Skills to Invoke

  • app-builder - Application scaffolding
  • senior-fullstack - Full-stack guidance
  • nextjs-app-router-patterns - Next.js 14+ patterns
  • typescript-pro - TypeScript setup

Actions

  1. Choose project type (React SPA, Next.js app)
  2. Select build tool (Vite, Next.js, Create React App)
  3. Scaffold project structure
  4. Configure TypeScript
  5. Set up ESLint and Prettier

Copy-Paste Prompts

Use @app-builder to scaffold a new Next.js 14 project with App Router
Use @nextjs-app-router-patterns to set up Server Components

Phase 2: Component Architecture

Skills to Invoke

  • frontend-developer - Component development
  • react-patterns - React patterns
  • react-state-management - State management
  • react-ui-patterns - UI patterns

Actions

  1. Design component hierarchy
  2. Create base components
  3. Implement layout components
  4. Set up state management
  5. Create custom hooks

Copy-Paste Prompts

Use @frontend-developer to create reusable React components
Use @react-patterns to implement proper component composition
Use @react-state-management to set up Zustand store

Phase 3: Styling and Design

Skills to Invoke

  • frontend-design - UI design
  • tailwind-patterns - Tailwind CSS
  • tailwind-design-system - Design system
  • core-components - Component library

Actions

  1. Set up Tailwind CSS
  2. Configure design tokens
  3. Create utility classes
  4. Build component styles
  5. Implement responsive design

Copy-Paste Prompts

Use @tailwind-patterns to style components with Tailwind CSS v4
Use @frontend-design to create a modern dashboard UI

Phase 4: Data Fetching

Skills to Invoke

  • nextjs-app-router-patterns - Server Components
  • react-state-management - React Query
  • api-patterns - API integration

Actions

  1. Implement Server Components
  2. Set up React Query/SWR
  3. Create API client
  4. Handle loading states
  5. Implement error boundaries

Copy-Paste Prompts

Use @nextjs-app-router-patterns to implement Server Components data fetching

Phase 5: Routing and Navigation

Skills to Invoke

  • nextjs-app-router-patterns - App Router
  • nextjs-best-practices - Next.js patterns

Actions

  1. Set up file-based routing
  2. Create dynamic routes
  3. Implement nested routes
  4. Add route guards
  5. Configure redirects

Copy-Paste Prompts

Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes

Phase 6: Forms and Validation

Skills to Invoke

  • frontend-developer - Form development
  • typescript-advanced-types - Type validation
  • react-ui-patterns - Form patterns

Actions

  1. Choose form library (React Hook Form, Formik)
  2. Set up validation (Zod, Yup)
  3. Create form components
  4. Handle submissions
  5. Implement error handling

Copy-Paste Prompts

Use @frontend-developer to create forms with React Hook Form and Zod

Phase 7: Testing

Skills to Invoke

  • javascript-testing-patterns - Jest/Vitest
  • playwright-skill - E2E testing
  • e2e-testing-patterns - E2E patterns

Actions

  1. Set up testing framework
  2. Write unit tests
  3. Create component tests
  4. Implement E2E tests
  5. Configure CI integration

Copy-Paste Prompts

Use @javascript-testing-patterns to write Vitest tests
Use @playwright-skill to create E2E tests for critical flows

Phase 8: Build and Deployment

Skills to Invoke

  • vercel-deployment - Vercel deployment
  • vercel-deploy-claimable - Vercel deployment
  • web-performance-optimization - Performance

Actions

  1. Configure build settings
  2. Optimize bundle size
  3. Set up environment variables
  4. Deploy to Vercel
  5. Configure preview deployments

Copy-Paste Prompts

Use @vercel-deployment to deploy Next.js app to production

Technology Stack

Category Technology
Framework Next.js 14+, React 18+
Language TypeScript 5+
Styling Tailwind CSS v4
State Zustand, React Query
Forms React Hook Form, Zod
Testing Vitest, Playwright
Deployment Vercel

Quality Gates

  • [ ] TypeScript compiles without errors
  • [ ] All tests passing
  • [ ] Linting clean
  • [ ] Performance metrics met (LCP, CLS, FID)
  • [ ] Accessibility checked (WCAG 2.1)
  • [ ] Responsive design verified

Related Workflow Bundles

  • development - General development
  • testing-qa - Testing workflow
  • documentation - Documentation
  • typescript-development - TypeScript patterns

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.