Communitygithub.com

Next.js 15 (YepAPI)

App Router, Server Components und moderne Next.js 15-Muster – ohne Pages Router-Halluzinationen.

Was ist Next.js 15 (YepAPI)?

Diese Skill-Anleitung für KI-Agenten definiert die korrekte Nutzung von Next.js 15 mit Schwerpunkt auf dem App Router, Server Components und modernen Patterns. Sie hilft, typische Fehler wie die Verwendung des veralteten Pages Routers oder falscher Imports zu vermeiden. Die Anleitung ist plattformunabhängig und kann mit Claude Code, Cursor, Codex oder ähnlichen KI-Coding-Assistenten verwendet werden. Sie legt klare Regeln fest: Standardmäßig Server Components, `"use client"` nur bei Bedarf, Nutzung von `generateMetadata()` anstelle von `<Head>`, Server Actions für Mutationen, `next/image` und `next/link` für optimierte Assets und Navigation. Vermieden werden sollen alte Pages-Router-APIs wie `getServerSideProps`, `getStaticProps`, `_app.tsx` oder `useRouter` aus `next/router`. Die Struktur der Route-Handler, Layouts, Ladezustände und Fehlergrenzen wird ebenso vorgegeben wie der Umgang mit Umgebungsvariablen und ISR-Caching.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/nextjs
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Next.js 15

Regeln

  • Immer App Router (app/-Verzeichnis) verwenden, niemals Pages Router (pages/)
  • Server Components standardmäßig – "use client" nur dann hinzufügen, wenn nötig (State, Effekte, Browser-APIs)
  • generateMetadata() für dynamische Metadaten verwenden, nicht <Head>
  • Server Actions für Mutationen nutzen, keine API-Routen für einfache Formulare
  • next/image mit korrekten width/height oder fill verwenden – niemals rohes <img>
  • next/link verwenden – niemals rohes <a> für interne Navigation
  • Route-Handler gehören nach app/api/[route]/route.ts – benannte Funktionen exportieren (GET, POST)
  • Layouts in layout.tsx, Ladezustände in loading.tsx, Fehlergrenzen in error.tsx
  • unstable_cache oder revalidateTag für ISR nutzen – nicht die veralteten getStaticProps/getServerSideProps
  • Umgebungsvariablen: NEXT_PUBLIC_-Präfix nur für clientseitige Verwendung

Vermeiden

  • getServerSideProps, getStaticProps, getStaticPaths – diese gehören zum Pages Router
  • _app.tsx, _document.tsx – diese gehören zum Pages Router
  • useRouter aus next/router – stattdessen next/navigation verwenden
  • next/head – den Export generateMetadata verwenden
  • Server Components unnötig in "use client" zu packen

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.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community