nextjs-best-practices
Maîtrisez les bonnes pratiques du App Router Next.js
Développez des applications Next.js prêtes pour la production en toute confiance. Apprenez les Server Components, les stratégies de récupération de données et les modèles de routage évolutifs.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“nextjs-best-practices”。 Devrais-je utiliser useState dans un Server Component ?
预期结果:
Non. Les Server Components ne peuvent pas utiliser useState, useEffect ou les gestionnaires d'événements. Ces hooks nécessitent le JavaScript du navigateur. Si vous avez besoin d'état, marquez le composant avec 'use client' ou extrayez les parties interactives dans un Client Component séparé.
正在使用“nextjs-best-practices”。 Comment mettre en cache les réponses API dans Next.js ?
预期结果:
Utilisez les options fetch : fetch(url, { next: { revalidate: 60 } }) met en cache pendant 60 secondes. Pour le contenu statique, omettez revalidate pour la mise en cache au moment du build. Utilisez 'no-store' pour désactiver complètement la mise en cache.
正在使用“nextjs-best-practices”。 Quel est le but de loading.tsx ?
预期结果:
loading.tsx fournit des états de chargement automatiques pendant la navigation et la récupération de données. Il s'affiche pendant le chargement du nouveau segment, améliorant les performances perçues. Placez-le à côté de page.tsx dans n'importe quel segment de route.
安全审计
安全This skill is documentation-only content describing Next.js App Router best practices. Static analysis flagged 18 patterns (external_commands, weak cryptographic algorithms), but all are FALSE POSITIVES. The SKILL.md file contains only educational markdown content with code examples - no executable code, no shell commands, no cryptographic operations. Safe for publication.
质量评分
你能构建什么
Migration de Pages vers App Router
Transitionnez les projets Next.js existants vers l'architecture App Router avec des modèles Server Component appropriés.
Construction de nouvelles applications Next.js
Démarrez de nouveaux projets avec une structure de dossiers correcte, des stratégies de mise en cache et une architecture de composants dès le premier jour.
Revue de code et optimisation
Auditez les bases de code existantes pour détecter les anti-modèles comme les Client Components inutiles ou les états de chargement manquants.
试试这些提示
J'ai un composant qui affiche les données de profil d'un utilisateur et contient un bouton de suivi. Devrait-il s'agir d'un Server Component ou d'un Client Component ? Expliquez le raisonnement.
Quel est le modèle fetch recommandé pour afficher des listes de produits qui doivent être mises à jour toutes les 5 minutes ? Montrez l'implémentation.
Comment organiser un tableau de bord avec plusieurs sections (analytique, paramètres, utilisateurs) qui partagent une mise en page commune mais ne doivent pas affecter la structure de l'URL ?
Créez un formulaire de commentaires utilisant Server Actions. Incluez la validation des entrées avec Zod, les mises à jour optimistes de l'interface et la gestion des erreurs. Montrez à la fois le code Server Component et Client Component.
最佳实践
- Commencez par les Server Components par défaut, ajoutez des Client Components uniquement lorsque l'interactivité est requise
- Utilisez des groupes de routes avec des parenthèses pour organiser les routes sans affecter le chemin de l'URL
- Implémentez loading.tsx et error.tsx pour chaque segment de route majeur afin de gérer les états en attente et d'erreur
避免
- Ajouter 'use client' à chaque composant - cela va à l'encontre du but des Server Components et augmente la taille du bundle
- Récupérer des données dans des Client Components au lieu de Server Components - provoque des requêtes en cascade et des chargements plus lents
- Ignorer les frontières d'erreur appropriées - les erreurs non gérées font planter toute l'application au lieu d'afficher une interface de secours