nextjs-best-practices
Appliquer les meilleures pratiques Next.js avec Claude
Les développeurs ont du mal à suivre les patterns du App Router Next.js et utilisent souvent des approches obsolètes. Cette compétence fournit des meilleures pratiques complètes pour les Server Components, la récupération de données, le routage et l'optimisation des performances.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "nextjs-best-practices". Dois-je faire de ce composant un Server ou Client Component ? Il affiche des données de profil utilisateur et a un bouton pour basculer un thème.
Résultat attendu:
Divisez le composant : Créez un Server Component pour récupérer et afficher les données du profil utilisateur, puis passez ces données à un Client Component pour le bouton interactif de bascule de thème. Cela garde la récupération de données sur le serveur (efficace) tout en gardant l'interactivité sur le client.
Utilisation de "nextjs-best-practices". Comment dois-je mettre en cache les réponses API qui changent toutes les heures ?
Résultat attendu:
Utilisez l'ISR (Incremental Static Regeneration) avec revalidate: 3600 (secondes). Cela met en cache la réponse pendant une heure, puis la régénère à la prochaine requête après expiration. Pour les mises à jour à la demande, utilisez revalidatePath ou revalidateTag lorsque votre source de données se met à jour.
Audit de sécurité
SûrSecurity evaluation complete. All static findings are false positives. The skill contains only markdown documentation about Next.js best practices. Code examples (e.g., page.tsx, revalidate: 60) are displayed in markdown code fences, not executed as shell commands. No cryptographic algorithms, network calls, or file operations are present. This is a safe reference guide for Next.js development.
Motifs détectés
Score de qualité
Ce que vous pouvez construire
Configuration d'un nouveau projet Next.js
Un développeur démarrant un nouveau projet Next.js souhaite suivre les meilleures pratiques dès le début. Il utilise la compétence pour comprendre l'architecture correcte des composants.
Refactoring de code legacy
Une équipe migrant du Pages Router vers l'App Router a besoin de conseils pour convertir les fetch côté client en Server Components.
Audit de performance
Un développeur auditant une application Next.js existante utilise la compétence pour identifier les anti-patterns et les opportunités d'optimisation.
Essayez ces prompts
Dois-je utiliser un Server Component ou Client Component pour un [description du composant] qui [décrire la fonctionnalité] ? Expliquez les compromis.
Quelle est la meilleure façon de récupérer [type de données] depuis [source de données] dans Next.js ? J'ai besoin de [décrire les exigences de fraîcheur].
Comment dois-je organiser les routes pour [décrire les sections de l'application] ? Dois-je utiliser des groupes de routes ? Montrez la structure de fichiers.
Ma page Next.js avec [décrire le contenu] se charge lentement. Quelles techniques d'optimisation issues des meilleures pratiques dois-je appliquer ?
Bonnes pratiques
- Commencez par défaut avec des Server Components - ajoutez uniquement 'use client' lorsque vous avez besoin d'interactivité comme useState, useEffect, ou des gestionnaires d'événements
- Récupérez les données dans les Server Components pour profiter du cache côté serveur et réduire la taille du bundle client
- Utilisez les fichiers loading.tsx et error.tsx pour fournir une bonne UX pendant le chargement des données et une gestion gracieuse des erreurs
Éviter
- Ajouter 'use client' à chaque composant - cela annule les avantages de performance des Server Components et augmente la taille du bundle
- Récupérer des données dans les Client Components avec useEffect - cela crée des requêtes côté client et des états de chargement inutiles
- Ignorer loading.tsx et error.tsx - les utilisateurs voient des écrans vides ou des messages d'erreur bruts au lieu d'une UX appropriée