next-best-practices

Vue d'ensemble

Qu'est-ce que next-best-practices ?

next-best-practices est une compétence complète destinée aux développeurs frontend travaillant avec Next.js. Elle offre des meilleures pratiques concrètes et des modèles pour construire des applications Next.js évolutives et maintenables. Couvrant tout, des conventions de fichiers et des limites des React Server Components (RSC) aux méthodes de récupération de données asynchrones, gestion des erreurs et optimisation, cette compétence vous aide à éviter les pièges courants et à adopter les workflows modernes de Next.js.

À qui s'adresse cette compétence ?

• Développeurs frontend utilisant Next.js et React
• Équipes en migration vers le Next.js App Router
• Toute personne souhaitant appliquer ou apprendre les conventions Next.js à jour

Quels problèmes résout-elle ?

• Clarifie la structure des fichiers et dossiers pour les grands projets Next.js
• Guide l'utilisation correcte des Server et Client Components
• Explique les modèles de données asynchrones et la migration pour Next.js 15+
• Aide à prévenir les erreurs courantes de bundling et d'exécution
• Fournit des stratégies robustes de gestion des erreurs et de débogage

Quand utiliser next-best-practices ?

• Lors du démarrage d'un nouveau projet Next.js ou de la refonte d'un existant
• Lors de l'intégration de nouveaux membres à la convention Next.js
• Lors du dépannage de problèmes liés à la récupération de données, au routage ou au bundling

Comment utiliser

Étapes d'installation

1. Ajoutez la compétence à votre projet avec :

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. Ouvrez le fichier SKILL.md pour un résumé global et des liens vers des guides détaillés.
3. Consultez les fichiers complémentaires pour des sujets ciblés :
   • file-conventions.md : Découvrez la structure du projet, les segments de routes et les fichiers spéciaux.
   • rsc-boundaries.md : Comprenez les modèles valides et invalides des React Server Components.
   • async-patterns.md : Migrez vers les nouvelles API asynchrones pour params, cookies et headers.
   • data-patterns.md : Choisissez les bonnes stratégies de récupération et mutation de données.
   • error-handling.md : Implémentez des frontières d'erreur et gérez les exceptions de navigation.
   • bundling.md : Résolvez les problèmes de bundling avec des paquets tiers.
   • directives.md : Utilisez les directives React et Next.js comme 'use client', 'use server' et 'use cache'.
   • debug-tricks.md : Accélérez le débogage avec les outils de développement Next.js et les endpoints.

Adapter à votre projet

• Utilisez les modèles fournis comme référence et adaptez-les à votre dépôt, vos outils et votre environnement de déploiement.
• Ne copiez pas le code tel quel — vérifiez chaque modèle pour sa compatibilité avec votre stack et votre version de Next.js.

Sujets clés abordés

• Conventions de fichiers et structure du projet
• Limites RSC et modèles de composants
• Récupération de données asynchrone et migration
• Gestionnaires de routes et sélection du runtime
• Frontières d'erreur et gestion globale des erreurs
• Optimisation des images et des polices
• Bundling et externalisation des dépendances
• Outils de débogage et de développement

FAQ

Comment prévisualiser le contenu de next-best-practices ?

Après l'installation, ouvrez l'onglet Fichiers pour parcourir tous les guides inclus, tels que SKILL.md, async-patterns.md, bundling.md et d'autres. Chaque fichier se concentre sur une meilleure pratique Next.js spécifique.

next-best-practices est-il spécifique à une version de Next.js ?

La compétence est mise à jour pour Next.js 15+ et couvre les étapes de migration vers les nouvelles API asynchrones et conventions. Certains modèles peuvent ne pas s'appliquer aux versions plus anciennes.

Puis-je utiliser next-best-practices avec des configurations personnalisées ?

Oui, mais vérifiez chaque modèle pour sa compatibilité avec vos configurations personnalisées, notamment en ce qui concerne le routage, les runtimes serveur et le bundling.

Que faire si j'ai besoin de plus de détails sur un sujet spécifique ?

Chaque fichier thématique contient des exemples pratiques et des références à la documentation officielle Next.js ou React pour approfondir vos connaissances.

Où puis-je obtenir de l'aide en cas de problème ?

Consultez debug-tricks.md pour des astuces avancées de débogage, ou référez-vous à la documentation officielle Next.js liée dans les fichiers de la compétence.