nextjs-15-specialist
Next.js 15 App Router Muster korrekt implementieren
Next.js 15 führt neue Muster ein, die leicht falsch umgesetzt werden können. Dieser Skill bietet umfassende Anleitungen zu App Router, Server Components, Server Actions und Caching-Strategien, damit Agenten von Anfang an korrekt entwickeln.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“nextjs-15-specialist”。 Erstelle eine Server Action, die ein neues Projekt mit Name- und Beschreibungsfeldern erstellt.
预期结果:
- Server Action: createProject(formData)
- - Validiert Eingaben mit Zod-Schema
- - Erstellt Projekt in Datenbank
- - Revalidiert /projects Pfad
- - Gibt Erfolg mit erstelltem Projekt zurück
- - Enthält Authentifizierungsprüfung
- - Behandelt Fehler mit try-catch
正在使用“nextjs-15-specialist”。 Konvertiere diese Seite zur Verwendung der korrekten Cache-Strategie. Sie soll Produktdaten jede Stunde aktualisieren.
预期结果:
- Aktualisiere fetch() mit revalidate-Option
- cache: 'force-cache' für Basis-Caching
- next: { revalidate: 3600 } für stündliche Aktualisierung
- Füge revalidateTag für manuelle Invalidierung hinzu
- Dokumentiere Cache-Verhalten in Kommentaren
安全审计
低风险Documentation-only skill containing markdown guides and a Python static analyzer validator. The 786 static findings are all false positives triggered by code examples in documentation. The validate-patterns.py script only reads files for pattern validation, with no network calls, credential access, or code execution capabilities. All 'backtick execution' detections are markdown code fences, not Ruby shell commands. All 'fetch' and 'URL' detections are documentation examples, not runtime network calls.
低风险问题 (1)
风险因素
📁 文件系统访问 (1)
⚡ 包含脚本 (1)
⚙️ 外部命令 (2)
🌐 网络访问 (2)
质量评分
你能构建什么
Next.js 15 Apps entwickeln
Erstellen Sie neue Next.js 15 Anwendungen von Anfang an mit korrekten App Router Mustern.
Server-Mutationen implementieren
Erstellen Sie Server Actions mit korrekter Validierung, Authentifizierung und Fehlerbehandlung.
Datenabruf optimieren
Konfigurieren Sie Caching-Strategien, Revalidierung und Streaming für optimale Performance.
试试这些提示
Erstelle eine neue Next.js 15 Seite unter /projects, die eine Liste von Projekten mit Server Components abruft und anzeigt.
Erstelle eine Client Component, die es Benutzern ermöglicht, ein Projekt mit einer Server Action zu löschen, inklusive korrekter Lade- und Fehlerzustände.
Füge korrektes Caching zu unseren Produktseiten hinzu. Produkte sollen für 1 Stunde gecacht und bei Bestandsaktualisierungen revalidiert werden.
Füge dynamische Metadaten zu unseren Blog-Post-Seiten hinzu, einschließlich Open Graph Bildern, Twitter Cards und JSON-LD strukturierten Daten.
最佳实践
- Standardmäßig Server Components verwenden und 'use client' nur bei Bedarf für Interaktivität hinzufügen
- Immer Cache-Strategie für fetch-Aufrufe angeben (force-cache, no-store oder revalidate)
- Zod für Server Action Validierung verwenden und alle Benutzereingaben bereinigen
- Korrekte Error Boundaries und Loading States für bessere Benutzererfahrung implementieren
避免
- Async Client Components - verursacht Build-Fehler und Performance-Probleme
- <img> statt <Image> from next/image verwenden - unterbricht Build und Optimierung
- Fehlende Cache-Strategie bei fetch-Aufrufen - unvorhersehbares Caching-Verhalten
- Server Actions ohne Authentifizierungsprüfungen - Sicherheitslücke
常见问题
Welche Next.js 15 Features deckt dieser Skill ab?
Wie viele Codebeispiele sind enthalten?
Kann dieser Skill meine Codebasis ändern?
Sind meine Daten sicher bei Verwendung des Validators?
Warum erhalte ich 'useState is not valid in Server Components'?
Wie verhält sich das im Vergleich zu Next.js 14 Mustern?
开发者详情
许可证
MIT
引用
main