nextjs-app-router-patterns

Vue d'ensemble

Qu'est-ce que nextjs-app-router-patterns ?

nextjs-app-router-patterns est une compétence pratique destinée aux développeurs frontend travaillant avec Next.js 14 et versions supérieures. Elle se concentre sur la maîtrise de l'architecture App Router, incluant les Server Components, le streaming, les routes parallèles et interceptantes, ainsi que les stratégies avancées de récupération de données. Cette compétence est idéale pour les équipes qui créent de nouvelles applications Next.js, migrent depuis le Pages Router ou optimisent les React Server Components pour la performance et la scalabilité.

À qui s'adresse cette compétence ?

• Développeurs frontend construisant ou migrant vers Next.js App Router
• Équipes mettant en œuvre le rendu côté serveur (SSR), la génération statique (SSG) ou les React Server Components
• Développeurs optimisant la récupération de données, la mise en cache et les fonctionnalités full-stack dans des applications React modernes

Problèmes résolus

• Facilite l'adoption des bonnes pratiques du Next.js App Router
• Clarifie quand utiliser les Server Components versus les Client Components
• Fournit des conventions de fichiers et des modèles architecturaux pour des projets Next.js évolutifs

Comment utiliser

Étapes d'installation

1. Installez la compétence via le Skills CLI :

   npx skills add https://github.com/wshobson/agents --skill nextjs-app-router-patterns
   

2. Commencez par consulter le fichier SKILL.md pour un résumé global et des conseils sur le workflow.
3. Explorez les fichiers associés tels que README.md, AGENTS.md et metadata.json pour un contexte plus approfondi si disponibles.
4. Examinez les dossiers rules/, resources/, references/ ou scripts/ pour des supports complémentaires et des exemples d'implémentation.

Adapter à votre projet

• Utilisez les modes de rendu décrits (Server, Client, Static, Dynamic, Streaming) pour structurer chaque route ou composant dans votre application Next.js.
• Suivez les conventions de fichiers recommandées pour le répertoire app/, incluant layout.tsx, page.tsx, loading.tsx, error.tsx et not-found.tsx.
• Intégrez les routes parallèles et interceptantes selon les besoins pour des modèles de navigation et d'expérience utilisateur avancés.
• Appliquez des techniques avancées de récupération et de mise en cache des données pour optimiser la performance et la scalabilité.

Quand nextjs-app-router-patterns est-il adapté ?

• Lors du démarrage d'un nouveau projet Next.js avec App Router
• Lors de la migration depuis le Pages Router pour exploiter les Server Components et le streaming
• Lorsque vous avez besoin de modèles clairs et maintenables pour le développement React full-stack

FAQ

Que couvre nextjs-app-router-patterns ?

Elle couvre des modèles complets pour utiliser Next.js 14+ App Router, incluant Server Components, streaming, routes parallèles et interceptantes, ainsi que la récupération avancée de données.

Par où commencer après l'installation ?

Commencez par le fichier SKILL.md pour une vue d'ensemble, puis explorez les autres fichiers et dossiers de support selon vos besoins.

Puis-je utiliser cette compétence avec des versions plus anciennes de Next.js ?

Cette compétence est conçue pour Next.js 14 et versions supérieures, spécifiquement pour les projets utilisant App Router. Elle n'est pas recommandée pour les versions plus anciennes ou le Pages Router legacy.

Comment prévisualiser tous les fichiers disponibles ?

Utilisez l'onglet Files dans votre répertoire de compétences agent pour parcourir l'arborescence complète des fichiers, y compris les références imbriquées et les scripts d'aide.