Compétences react-nextjs-development
📦

react-nextjs-development

Sûr

ReactとNext.jsアプリケーションを構築

このスキルは、App Router、Server Components、TypeScriptを使用したモダンなReactとNext.jsアプリケーション開発のための構造化されたワークフローを提供します。プロジェクトセットアップ、コンポーネントアーキテクチャ、スタイリング、データフェッチ、ルーティング、フォーム、テスト、デプロイメントをガイドします。

Prend en charge: Claude Codex Code(CC)
📊 69 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "react-nextjs-development". App RouterとTypeScriptでNext.js 14プロジェクトを作成

Résultat attendu:

  • App Router用のapp/ディレクトリでプロジェクト構造を作成
  • 厳格モードと適切なtsconfigパスでTypeScriptを設定
  • ベース設定でTailwind CSS v4をインストール
  • React固有のルールでESLintとPrettierをセットアップ
  • 基本的なレイアウトとページテンプレートを生成

Utilisation de "react-nextjs-development". 編集機能を備えたユーザープロファイルコンポーネントを構築

Résultat attendu:

  • APIからユーザーデータをフェッチするためのServer Component
  • フォームインタラクションと状態管理のためのClient Component
  • カスタムエラーメッセージを持つプロファイルバリデーション用のZodスキーマ
  • 適切な型推論を持つReact Hook Formの統合
  • 編集モーダル付きのTailwindスタイルレスポンシブプロファイルカード

Audit de sécurité

Sûr
v1 • 2/24/2026

This skill is a documentation and workflow bundle containing only markdown content with usage prompts. Static analysis flagged 55 external_commands patterns and 11 cryptographic patterns, but all are FALSE POSITIVES - the backticks are markdown code formatting, not shell execution, and no cryptographic code exists. No security risks identified. Safe for publication.

1
Fichiers analysés
230
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
23
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

ダッシュボードを構築するフロントエンド開発者

Next.js App Router、Server Componentsによるデータフェッチ、Tailwind CSSによるレスポンシブデザインを使用して、モダンなアドmindashboardを作成します。適切なコンポーネントアーキテクチャを含みます。

SaaSプロジェクトを開始するフルスタック開発者

TypeScriptで新しいSaaSアプリケーションを迅速にスキャフォールドし、認証フローを実装し、Zodでフォームバリデーションをセットアップし、プレビュー環境でVercelにデプロイします。

開発標準を確立するチームリード

一貫したReactパターン、コンポーネントアーキテクチャガイドライン、テスト戦略、Next.js 14+を採用する開発チームのためのコード品質ゲートを定義します。

Essayez ces prompts

初心者：新しいNext.jsプロジェクトを作成 
App Router、TypeScript、Tailwind CSSを使用して新しいNext.js 14プロジェクトをスキャフォールドするのを助けてください。コンポーネント、lib、appディレクトリの適切なコンベンションで基本的なフォルダ構造をセットアップしてください。
中級者：データフェッチコンポーネントを構築 
APIエンドポイントからデータをフェッチしリストで表示するServer Componentを作成してください。適切なエラーハンドリング、ロード状態、データ構造のTypeScript型を含めてください。
上級者：バリデーション付きフォームをセットアップ 
Zodスキーマバリデーションを使用したマルチステップフォームをReact Hook Formで構築してください。フィールドレベルのエラーメッセージ、フォーム状態の永続化、タイプセーフなフォームデータのための適切なTypeScript統合を含めてください。
エキスパート：パラレルルートとインタ셉ティングルートを実装 
モーダルダイアログのインタ셉ティングルートを持つダッシュボードレイアウトのNext.js App Routerパラレルルートをセットアップしてください。適切なスロット設定とナビゲーションコンテキストに基づく条件付きレンダリングを含めてください。

Bonnes pratiques

  • デフォルトでServer Componentsを使用し、インタラクティブ性が必要な場合にのみClient Componentsに切り替えてください
  • コンパイル時にエラーを検出するために、すべてのコンポーネント、props、APIレスポンスに適切なTypeScript型を実装してください
  • コンポーネント、スタイル、テストをフィーチャーベースのディレクトリに共存させる原則に従ってください

Éviter

  • Server Componentでより効率的に処理できるデータフェッチにuseEffectを使用しないでください
  • 大きなJSONオブジェクトをクライアントコンポーネントのpropsとして渡さないでください - コンポーネント内で直接データをフェッチしてください
  • 非同期操作 всегдаエラーハンドリングを実装し、エラーバウンドリーをスキップしないでください

Foire aux questions

Next.jsのApp RouterとPages Routerの違いは何ですか？
App Router（Next.js 13で導入）は、app/ディレクトリを使用し、デフォルトでServer Componentsをサポートし、ネストされたレイアウトを提供し、より良いパフォーマンスを提供します。Pages Routerはpages/ディレクトリを使用し、より古いルーティングシステムです。このスキルはモダンなNext.js開発のためにApp Routerに焦点を当てています。
Server ComponentsとClient Componentsはいつ使用すべきですか？
静的コンテンツ、データフェッチ、バンドルサイズを小さく保つにはデフォルトでServer Componentsを使用してください。onClickハンドラー、useState、useEffect、ブラウザAPIのようなインタラクティブ性が必要な場合にのみClient Componentsを使用してください。'use client'ディレクティブでClient Componentsをマークしてください。
Tailwind CSS v4はNext.js App Routerと互換性がありますか？
はい、Tailwind CSS v4はNext.js App Routerと完全に互換性があります。v4バージョンは新しいエンジンと簡略化された設定で改善されたパフォーマンスを提供します。このスキルには、App RouterプロジェクトでのTailwind v4のセットアップ手順が含まれています。
Server Componentで認証を処理するにはどのようにすればですか？
認証はServer Componentでシームレスに動作します。サーバーでセッションCookieを読み取り、ミドルウェアでルートを保護し、コンポーネントにユーザーデータを渡すことができます。クライアントサイドの認証チェックには、認証プロバイダーのフックを持つClient Componentsを使用してください。
既存のNext.js 13プロジェクトでこのスキルを使用できますか？
はい，但しいくつかのパターンは異なる場合があります。Next.js 13.4+はApp Routerをサポートしているためほとんどの概念が適用されます。Pages Routerのみを持つ古いバージョンの場合は、このスキルのワークフローを完全に活用するためにApp Routerへの移行を検討してください。
このスキルはどのテストフレームワークをお勧めしますか？
このスキルは、速度とViteとの互換性からユニットテストとコンポーネントテストにVitestをお勧めします エンドツーエンドテストには、信頼性とクロスブラウザサポートのためPlaywrightをお勧めします。両方ともNext.jsプロジェクトと很好地統合されます。

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development

Réf

main

Structure de fichiers

📄 SKILL.md