Compétences nextjs-app-router-patterns
📦

nextjs-app-router-patterns

Sûr

Créez des applications Next.js modernes avec les motifs App Router

Également disponible depuis: wshobson

Vous luttez avec la complexité d'App Router de Next.js 14+ ? Cette compétence fournit des motifs éprouvés pour les Server Components, le streaming, les routes parallèles et la récupération de données pour accélérer votre développement.

Prend en charge: Claude Codex Code(CC)
🥉 74 Bronze
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 "nextjs-app-router-patterns". Créer un Server Component qui récupère des articles de blog avec mise en cache ISR

Résultat attendu:

  • Généré app/blog/page.tsx avec récupération de données asynchrone
  • Configuré revalidate: 3600 pour un rafraîchissement du cache horaire
  • Ajouté loading.tsx skeleton pour une meilleure UX pendant la révalidation
  • Inclus une error boundary pour une gestion gracieuse des échecs

Utilisation de "nextjs-app-router-patterns". Implémenter une modale qui intercepte les routes photo

Résultat attendu:

  • Créé une structure de route parallèle @modal
  • Ajouté une route interceptante à (.)photos/[id]/page.tsx
  • Configuré un fallback default.tsx pour la navigation directe
  • Implémenté un composant modale avec un comportement de fermeture approprié

Audit de sécurité

Sûr
v1 • 2/24/2026

This skill contains documentation-only markdown files with Next.js educational code examples. All 56 static findings are false positives because the scanner incorrectly flagged markdown code blocks as executable code. No actual security risks detected.

2
Fichiers analysés
580
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
50
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Migrer de Pages Router vers App Router

Guidage étape par étape pour la transition d'applications Next.js existantes vers la nouvelle architecture App Router avec un minimum de perturbations.

Construire des sites e-commerce optimisés pour la performance

Implémentez des pages produits en streaming, des mises à jour parallèles du panier et la mise en cache ISR pour des boutiques en ligne rapides et évolutives.

Créer des applications de tableau de bord avec données en temps réel

Concevez des mises en page complexes avec des panneaux chargés indépendamment en utilisant des routes parallèles et des limites Suspense.

Essayez ces prompts

Configuration Server Component de base 
Créez un Server Component Next.js qui récupère des produits depuis une API et les affiche dans une grille. Incluez une gestion d'erreur appropriée et des états de chargement.
Implémenter le streaming avec Suspense 
Construisez une page de détail produit qui stream les avis et recommandations de manière progressive. Utilisez des limites Suspense pour afficher le contenu au fur et à mesure qu'il se charge.
Créer des Server Actions pour la gestion de formulaires 
Implémentez un formulaire de paiement en utilisant Server Actions avec validation, gestion d'erreur et redirection en cas de succès. Incluez des mises à jour UI optimistes.
Configurer des routes parallèles pour un tableau de bord 
Concevez une mise en page de tableau de bord avec des panneaux d'analytique, d'équipe et d'activité indépendants qui se chargent en parallèle.

Bonnes pratiques

  • Commencez avec les Server Components par défaut et ajoutez 'use client' uniquement lorsque les APIs navigateur ou l'interactivité sont requises
  • Placez la récupération de données près de l'endroit où les données sont consommées pour un caching optimal et une meilleure organisation du code
  • Utilisez les limites Suspense stratégiquement pour activer le streaming et améliorer la performance perçue

Éviter

  • Utiliser useState ou useEffect dans les Server Components où ils ne peuvent pas s'exécuter
  • Récupérer toutes les données au niveau supérieur au lieu de placer les fetches à côté des composants consommateurs
  • Ignorer les états de chargement ce qui résulte en une mauvaise expérience utilisateur pendant les récupérations de données

Foire aux questions

Quelle est la différence entre Server Components et Client Components ?
Les Server Components font leur rendu sur le serveur et envoient du HTML au navigateur. Ils peuvent accéder directement aux ressources backend. Les Client Components s'exécutent dans le navigateur et prennent en charge l'interactivité avec useState, useEffect et les gestionnaires d'événements.
Comment migrer de Pages Router vers App Router ?
Créez un répertoire app/ à côté de votre répertoire pages/. Migrez progressivement les routes en les recréant dans app/. Les deux routeurs peuvent coexister pendant la migration. Mettez à jour les imports et adaptez-vous aux nouvelles conventions de fichiers.
Quand dois-je utiliser Server Actions plutôt que les routes API ?
Utilisez les Server Actions pour les soumissions de formulaires et les mutations déclenchées depuis les composants. Utilisez les routes API lorsque vous avez besoin d'un endpoint REST pour des consommateurs externes ou des clients non-React.
Comment fonctionne le cache dans App Router ?
App Router met en cache les requêtes fetch par défaut. Utilisez cache: 'no-store' pour désactiver le cache, cache: 'force-cache' pour un cache statique, ou next: { revalidate: N } pour ISR. L'invalidation basée sur les tags permet des mises à jour de cache ciblées.
Puis-je utiliser les routes parallèles avec des segments dynamiques ?
Oui, les routes parallèles fonctionnent avec les segments dynamiques. Chaque slot parallèle reçoit les mêmes params. Utilisez la convention de nommage de slot comme @analytics et @team dans votre layout pour définir des zones de rendu indépendantes.
À quoi servent les routes interceptantes ?
Les routes interceptantes vous permettent d'afficher une UI différente pour la même URL selon le contexte de navigation. Les cas d'usage courants incluent les modales qui apparaissent lors de la navigation depuis l'application mais affichent des pages complètes lors de visites directes.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-app-router-patterns

Réf

main

Structure de fichiers

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md