Compétences react-nextjs-development
📦

react-nextjs-development

Sûr

Construire des applications React et Next.js

Cette compétence fournit des workflows structurés pour développer des applications React et Next.js modernes avec App Router, Server Components et TypeScript. Elle vous guide à travers la configuration de projet, l'architecture de composants, le style, la récupération de données, le routage, les formulaires, les tests et le déploiement.

Prend en charge: Claude Codex Code(CC)
📊 70 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". Créer un projet Next.js 14 avec App Router et TypeScript

Résultat attendu:

  • Structure de projet créée avec le répertoire app/ pour App Router
  • TypeScript configuré avec le mode strict et les chemins tsconfig appropriés
  • Tailwind CSS v4 installé avec configuration de base
  • ESLint et Prettier configurés avec des règles spécifiques à React
  • Modèles de layout et de page de base générés

Utilisation de "react-nextjs-development". Construire un composant de profil utilisateur avec fonctionnalité de modification

Résultat attendu:

  • Server Component pour récupérer les données utilisateur depuis l'API
  • Client Component pour l'interaction avec le formulaire et la gestion d'état
  • Schéma Zod pour la validation de profil avec des messages d'erreur personnalisés
  • Intégration React Hook Form avec inférence de type appropriée
  • Carte de profil responsive stylisée avec Tailwind et modal de modification

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
32
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Développeur Frontend Construisant un Tableau de Bord

Créez un tableau de bord d'administration moderne avec Next.js App Router, des Server Components pour la récupération de données, et Tailwind CSS pour un design responsive avec une architecture de composants appropriée.

Développeur Full-Stack Démarrant un Projet SaaS

Échafaudez rapidement une nouvelle application SaaS avec TypeScript, implémentez des flux d'authentification, configurez la validation de formulaires avec Zod, et déployez sur Vercel avec des environnements de prévisualisation.

Tech Lead Établissant des Standards de Développement

Définissez des modèles React cohérents, des directives d'architecture de composants, des stratégies de test et des portes de qualité de code pour une équipe de développement adoptant Next.js 14+.

Essayez ces prompts

Débutant : Créer un Nouveau Projet Next.js 
Help me scaffold a new Next.js 14 project with App Router, TypeScript, and Tailwind CSS. Set up the basic folder structure with proper conventions for components, lib, and app directories.
Intermédiaire : Construire un Composant de Récupération de Données 
Create a Server Component that fetches data from an API endpoint and displays it in a list. Include proper error handling, loading states, and TypeScript types for the data structure.
Avancé : Configurer un Formulaire avec Validation 
Build a multi-step form using React Hook Form with Zod schema validation. Include field-level error messages, form state persistence, and proper TypeScript integration for type-safe form data.
Expert : Implémenter des Routes Parallèles et des Routes Interceptées 
Set up Next.js App Router parallel routes for a dashboard layout with intercepting routes for modal dialogs. Include proper slot configurations and conditional rendering based on navigation context.

Bonnes pratiques

  • Utilisez les Server Components par défaut et ne passez aux Client Components que lorsque l'interactivité est requise
  • Implémentez des types TypeScript appropriés pour tous les composants, props et réponses API pour détecter les erreurs au moment de la compilation
  • Suivez le principe de colocation en gardant les composants, styles et tests ensemble dans des répertoires basés sur les fonctionnalités

Éviter

  • Évitez d'utiliser useEffect pour la récupération de données lorsque les Server Components peuvent le gérer plus efficacement
  • Ne passez pas de gros objets JSON comme props de client component - récupérez les données directement dans le composant
  • Ne jamais ignorer les error boundaries - implémentez toujours une gestion d'erreur appropriée pour les opérations asynchrones

Foire aux questions

Quelle est la différence entre App Router et Pages Router dans Next.js ?
App Router (introduit dans Next.js 13) utilise le répertoire app/ avec Server Components par défaut, prend en charge les layouts imbriqués et offre de meilleures performances. Pages Router utilise le répertoire pages/ et est l'ancien système de routage. Cette compétence se concentre sur App Router pour le développement Next.js moderne.
Quand dois-je utiliser les Server Components vs les Client Components ?
Utilisez les Server Components par défaut pour le contenu statique, la récupération de données et pour garder la taille du bundle petite. Utilisez les Client Components uniquement lorsque vous avez besoin d'interactivité comme les gestionnaires onClick, useState, useEffect ou les APIs du navigateur. Marquez les Client Components avec la directive 'use client'.
Tailwind CSS v4 est-il compatible avec Next.js App Router ?
Oui, Tailwind CSS v4 est entièrement compatible avec Next.js App Router. La version v4 offre des performances améliorées avec un nouveau moteur et une configuration simplifiée. Cette compétence inclut des instructions de configuration pour Tailwind v4 avec des projets App Router.
Comment gérer l'authentification avec les Server Components ?
L'authentification fonctionne parfaitement avec les Server Components. Vous pouvez lire les cookies de session sur le serveur, protéger les routes avec des middleware et passer les données utilisateur aux composants. Pour les vérifications d'auth côté client, utilisez des Client Components avec des hooks de votre fournisseur d'authentification.
Puis-je utiliser cette compétence avec un projet Next.js 13 existant ?
Oui, mais certains modèles peuvent différer. Next.js 13.4+ prend en charge App Router, donc la plupart des concepts s'appliquent. Si vous êtes sur une version plus ancienne avec uniquement Pages Router, envisagez de migrer vers App Router pour bénéficier pleinement des workflows de cette compétence.
Quels frameworks de test cette compétence recommande-t-elle ?
Cette compétence recommande Vitest pour les tests unitaires et de composants en raison de sa rapidité et de sa compatibilité avec Vite. Pour les tests end-to-end, Playwright est recommandé pour sa fiabilité et son support multi-navigateurs. Les deux s'intègrent bien avec les projets 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