Communitygithub.com

YepAPI/skills

App Router, composants serveur et modèles modernes Next.js 15 — sans hallucinations du Pages Router.

Qu'est-ce que skills ?

Cette compétence est conçue pour les développeurs utilisant Next.js 15, en se concentrant exclusivement sur le modèle App Router et les Composants Serveur. Elle fournit des règles strictes pour éviter la confusion avec le Pages Router obsolète, garantissant que les développeurs utilisent toujours les bonnes API et conventions. La compétence met l'accent sur les actions de serveur pour les mutations, `generateMetadata()` pour le métadonnées dynamiques, et `next/image` pour les images optimisées. Elle est particulièrement utile pour les agents IA comme Claude Code ou Cursor, qui peuvent l'utiliser pour générer du code Next.js 15 conforme aux meilleures pratiques, sans risque de produire du code Pages Router non fonctionnel. La compétence répertorie également les API à éviter, ce qui permet à l'agent d'identifier et de corriger les erreurs courantes de migration.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/nextjs

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Next.js 15

Règles

  • Utilisez toujours App Router (dossier app/), jamais Pages Router (pages/)
  • Composants Serveur par défaut — ajoutez "use client" uniquement si nécessaire (état, effets, API navigateur)
  • Utilisez generateMetadata() pour les métadonnées dynamiques, pas <Head>
  • Utilisez les Actions Serveur pour les mutations, pas les routes API pour les formulaires simples
  • Utilisez next/image avec les bonnes propriétés width/height ou fill — jamais de balise <img> brute
  • Utilisez next/link — jamais de balise <a> brute pour la navigation interne
  • Les gestionnaires de routes vont dans app/api/[route]/route.ts — exportez des fonctions nommées (GET, POST)
  • Les layouts dans layout.tsx, les états de chargement dans loading.tsx, les limites d'erreur dans error.tsx
  • Utilisez unstable_cache ou revalidateTag pour l'ISR — pas les anciens getStaticProps/getServerSideProps
  • Variables d'environnement : préfixe NEXT_PUBLIC_ pour le côté client uniquement

À éviter

  • getServerSideProps, getStaticProps, getStaticPaths — ce sont des Pages Router
  • _app.tsx, _document.tsx — ce sont des Pages Router
  • useRouter de next/router — utilisez next/navigation à la place
  • next/head — utilisez l'export generateMetadata
  • Envelopper inutilement les Composants Serveur dans "use client"

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

Skills associés