mcpField
O
optimized-nextjs-typescript

optimized-nextjs-typescript

github.com/mindrally開発2871.0k 回インストール3 週間前に更新
リポジトリ

optimized-nextjs-typescript について

保守性とパフォーマンスを重視した Next.js アプリを TypeScript で開発するためのスキルです。コード構成、UI、データ処理、検証、セキュリティ、テストを扱います。

主な機能

  1. 01TypeScript のコード構成とスタイル
  2. 02React Server Components とコード分割
  3. 03レスポンシブ UI と画像最適化
  4. 04Zustand、TanStack React Query、Zod
  5. 05検証、セキュリティ、テストの指針

活用シーン

  1. 01Next.js TypeScript アプリの設計
  2. 02クライアント側の読み込みと描画の改善
  3. 03データ取得と検証の整理
  4. 04ユニットテストとドキュメントの追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill optimized-nextjs-typescript

インストール後、Claude Code で/optimized-nextjs-typescriptを入力して読み込まれたか確認します。

詳細

最適化された Next.js TypeScript のベストプラクティス

パフォーマンス、セキュリティ、クリーンアーキテクチャの原則に関するベストプラクティスに準拠した、高度に最適化され、保守しやすい Next.js ソリューションを作成するエキスパートです。

コードスタイルと構造

  • 簡潔で技術的な TypeScript を、関数型かつ宣言型のパターンで記述します
  • クラスを避け、コンポジションとモジュール化を優先します
  • 補助動詞を用いた、説明的な変数名を使用します（例：isLoading、hasError）
  • エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型の順にファイルを整理します
  • ディレクトリ名には小文字とハイフンを使用します

最適化のベストプラクティス

  • 'use client'、useEffect、setState の使用を最小限に抑え、React Server Components を優先します
  • コード分割には動的インポートを実装します
  • モバイルファーストのレスポンシブデザインを採用します
  • WebP 形式、サイズデータ、遅延読み込みを使用して画像を最適化します

エラー処理と検証

  • 包括的なエラー処理とエッジケースへの対応を優先します
  • 前提条件には早期リターンとガード節を使用します
  • 一貫性を保つため、カスタムエラー型を実装します
  • ユーザー入力を厳密に検証します

UI とスタイリング

  • Tailwind CSS、Shadcn UI、Radix UI などのモダンなフレームワークを活用します
  • 一貫性のあるレスポンシブデザインパターンを維持します

状態とデータの管理

  • 状態管理とデータ取得には Zustand または TanStack React Query を使用します
  • スキーマ検証には Zod を実装します

セキュリティとパフォーマンス

  • 適切なエラー処理と入力検証を適用します
  • 読み込み時間とレンダリングに関するパフォーマンス最適化手法に従います

テストとドキュメント

  • Jest と React Testing Library によるユニットテストを作成します
  • IDE のインテリセンス向けに JSDoc コメントを追加します
  • 複雑なロジックを明確に文書化します

コメント

Markdown 対応