BIGboss248/nextjs-wordpress

Développement de pages et routes Next.js (nextjs-page-dev)

Workflow spécialisé pour créer des pages Next.js App Router prêtes pour la production avec des paramètres de route asynchrones, des dictionnaires de traduction localisés, des métadonnées dynamiques, des données structurées JSON-LD typées (schema-dts) et un prérendu statique.

[!TIP] Ressources modulaires et guides approfondis :

• Streaming et limites de l'interface utilisateur : references/streaming-and-boundaries.md
• Conventions de page et cycle de vie : references/page-conventions-and-lifecycle.md
• Guide SEO et données structurées : references/seo-structured-data-guide.md
• Modèles réutilisables : resources/templates/
• Script de vérification : scripts/verify-page.ps1 (Windows) / scripts/verify-page.sh (Linux)

---

Règles architecturales et normes

1. Contexte de planification et registre des routes

• Lire docs/project.json pour résoudre supported_languages, dictionaries_dir (par défaut : "messages") et new_component_dir.
• Toutes les URL de navigation DOIVENT faire référence aux ROUTES de @/lib/routes ou @/i18n/navigation.
• Hiérarchie du chemin de la page cible : app/[locale]/<chemin-route>/page.tsx (ou app/<chemin-route>/page.tsx si non localisée).

2. Zéro codage en dur et population du dictionnaire

• Pas de copie codée en dur : Les titres, en-têtes, descriptions et étiquettes statiques des pages doivent être ajoutés à messages/[locale].json dans toutes les supported_languages avant d'écrire le JSX.
• Traductions RSC : Lire les traductions dans les composants serveur en utilisant await getTranslations('<espace-de-noms>').

3. SEO, métadonnées et JSON-LD

• Métadonnées dynamiques : Exporter generateMetadata({ params, searchParams }: Props) fournissant title, description dynamiques et une URL canonique (alternates : { canonical : ... }).
• Données structurées : Injecter du JSON-LD typé en utilisant schema-dts (WithContext<T>) enveloppé dans <script type="application/ld+json"> avec les caractères < échappés en \u003c.
• Consulter references/seo-structured-data-guide.md pour les schémas.

4. Prérendu statique (generateStaticParams)

• Si la page est imbriquée sous un segment dynamique [locale] (ou tout segment dynamique) et que supported_languages contient plus d'une locale, exporter generateStaticParams() retournant { locale } pour toutes les locales prises en charge.

5. Navigation instantanée et descente granulaire de Suspense

• États de chargement granulaires : Descendre <Suspense> vers des sous-composants dynamiques spécifiques afin que les sections statiques/mises en cache (en-tête, hero, informations produit mises en cache) remontent dans la coque statique et la coque d'application immédiatement.
• Désactivation : Si un segment est intrinsèquement dynamique et qu'un retour instantané n'est pas souhaité, configurer export const instant = false.
• Consulter references/streaming-and-boundaries.md pour les modèles de streaming.

---

Étapes du workflow

• Étape 0 : Génération du plan d'implémentation et porte d'approbation

  • Lire docs/project.json et la définition de la route cible dans lib/routes.ts.
  • Formuler les métadonnées de la page, le type de schéma JSON-LD, les espaces de noms de traduction et la disposition des composants.
  • Présenter un plan d'implémentation concis à l'utilisateur si de nouvelles pages majeures sont créées.

• Étape 1 : Remplir les dictionnaires de traduction

  • Ajouter le titre de la page, la méta-description et le texte du corps de la page dans tous les fichiers de locale (messages/en.json, messages/fa.json, etc.) sous un espace de noms de page dédié.

• Étape 2 : Créer les squelettes compagnons (loading.tsx)

  • Si la page diffuse du contenu ou récupère des données, déployer loading.tsx à partir de loading.tsx.template.

• Étape 3 : Implémenter le composant de page (page.tsx)

  • Déployer et personnaliser page.tsx.template :
    1. Définir l'interface des props asynchrones (params: Promise<{ locale: string, ... }>, searchParams).
    2. Exporter generateMetadata() résolvant les titres dynamiques et les alternatives canoniques.
    3. Exporter generateStaticParams() pour les routes localisées/dynamiques.
    4. Implémenter la page RSC composant les composants de section à partir de <new_component_dir>/<nom-page>/.
    5. Rendre le composant de données structurées <JsonLd>.

• Étape 4 : Vérification et contrôle de cohérence

  • Exécuter le script de vérification de la page :
    • Windows (PowerShell) :

      pwsh .agents/skills/nextjs-page-dev/scripts/verify-page.ps1 -RoutePath <répertoire_route>
      

    • Linux / macOS (Bash) :

      bash .agents/skills/nextjs-page-dev/scripts/verify-page.sh <répertoire_route>
      

  • S'assurer qu'il n'y a aucune erreur TypeScript ou de dictionnaire manquant.

• Étape 5 : Synchronisation de la liste de contrôle du plan d'implémentation

  • Cocher les éléments d'infrastructure de page terminés (page.tsx, loading.tsx, error.tsx, generateMetadata, Schéma JSON-LD, generateStaticParams()) dans docs/plan/05-pages-and-components.md.
  • Si toutes les sous-listes de contrôle des composants et les tâches d'infrastructure de page pour cette page sont terminées, cocher l'élément de page parent (- [x]).