Next.js App Router Patterns
Maîtrise l'App Router Next.js 14+ — Server Components, streaming, parallel routes, data fetching, Server Actions
- Quoi
- Maîtrise l'App Router Next.js 14+ — Server Components, streaming, parallel routes, data fetching, Server Actions
- Coût
- Gratuit
- Prérequis
- un projet Next.js 14+ (voir le README du dépôt pour l'installation)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le guide d'architecture App Router : tableau des modes de rendu (Server Components pour data fetching/secrets, Client Components pour l'interactivité, Static, Dynamic, Streaming), conventions de fichiers (`layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`, `route.ts`, `template.tsx`, `default.tsx`, `opengraph-image.tsx`), snippets de démarrage layout/page, et patterns travaillés avec une liste Do/Don't (commencer par les Server Components, colocaliser le data fetching, boundaries Suspense pour le streaming, parallel routes pour des états de chargement indépendants, Server Actions pour les mutations ; ne jamais passer de données non-sérialisables à la frontière server→client, ne jamais utiliser de hooks dans les Server Components, ne jamais fetcher dans les Client Components). Disjoint des deux fiches wshobson publiées : `wshobson-nodejs-backend-patterns` (lot 33, backend API Node/Express) et `wshobson-brand-landingpage` (lot 33, landing pages Stitch SDK) — celui-ci est l'architecture frontend full-stack. Crédit : @wshobson. Bémols honnêtes : exige un projet Next.js 14+ (gratuit et open source) ; les détails approfondis sont dans le references/details.md du dépôt. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : un projet Next.js 14+ (voir le README du dépôt pour l'installation) Installe-moi « Next.js App Router Patterns ». Donne à mon agent le guide d'architecture Next.js App Router : modes de rendu (Server/Client/Static/Dynamic/Streaming), conventions de fichiers (layout, page, loading, error, not-found, route, template, default), snippets de démarrage, patterns de data fetching et caching, Server Actions, et la liste Do/Don't — avec les patterns approfondis de references/details.md quand le résumé ne suffit pas Dépôt : https://github.com/wshobson/agents/blob/main/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md 1. Récupère le fichier SKILL.md du skill wshobson-agents-nextjs-app-router-patterns depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « wshobson-agents-nextjs-app-router-patterns ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. avoir un projet Next.js 14+, lire references/details.md pour la profondeur). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat — les identifiants passent par le coffre sécurisé ou les variables d'environnement. Au moindre doute, arrête et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.