nextjs-best-practices
Master Next.js App Router Best Practices
Erstellen Sie produktionsreife Next.js-Anwendungen mit Vertrauen. Lernen Sie Server Components, Datenabrufstrategien und Routing-Muster, die skalieren.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“nextjs-best-practices”。 Should I use useState in a Server Component?
预期结果:
Nein. Server Components können useState, useEffect oder Event-Handler nicht verwenden. Diese Hooks erfordern Browser-JavaScript. Wenn Sie State benötigen, markieren Sie die Component mit 'use client' oder extrahieren Sie die interaktiven Teile in eine separate Client Component.
正在使用“nextjs-best-practices”。 How do I cache API responses in Next.js?
预期结果:
Verwenden Sie die fetch-Optionen: fetch(url, { next: { revalidate: 60 } }) cached für 60 Sekunden. Für statischen Content lassen Sie revalidate weg für Build-Time-Caching. Verwenden Sie 'no-store', um Caching komplett zu deaktivieren.
正在使用“nextjs-best-practices”。 What is the purpose of loading.tsx?
预期结果:
loading.tsx bietet automatische Loading-States während Navigation und Datenabruf. Es wird gerendert, während das neue Segment lädt, was die wahrgenommene Leistung verbessert. Platzieren Sie es neben page.tsx in jedem Route-Segment.
安全审计
安全This skill is documentation-only content describing Next.js App Router best practices. Static analysis flagged 18 patterns (external_commands, weak cryptographic algorithms), but all are FALSE POSITIVES. The SKILL.md file contains only educational markdown content with code examples - no executable code, no shell commands, no cryptographic operations. Safe for publication.
质量评分
你能构建什么
Migration von Pages zu App Router
Transition bestehender Next.js-Projekte zur App Router-Architektur mit properen Server Component-Mustern.
Erstellen neuer Next.js-Anwendungen
Starten Sie neue Projekte mit korrekter Ordnerstruktur, Caching-Strategien und Component-Architektur von Anfang an.
Code-Review und Optimierung
Überprüfen Sie bestehende Codebasen auf Anti-Patterns wie unnötige Client Components oder fehlende Loading-States.
试试这些提示
Ich habe eine Component, die Benutzerprofildaten anzeigt und einen Follow-Button hat. Sollte dies eine Server Component oder Client Component sein? Erklären Sie die Begründung.
Was ist das empfohlene Abrufmuster für die Anzeige von Produktlisten, die alle 5 Minuten aktualisiert werden sollen? Zeigen Sie die Implementierung.
Wie organisiere ich ein Dashboard mit mehreren Abschnitten (Analytics, Einstellungen, Benutzer), die ein gemeinsames Layout teilen, aber die URL-Struktur nicht beeinflussen sollen?
Erstellen Sie ein Kommentarformular mit Server Actions. Inkludieren Sie Eingabevalidierung mit Zod, optimistic UI-Updates und Fehlerbehandlung. Zeigen Sie sowohl den Server Component- als auch den Client Component-Code.
最佳实践
- Starten Sie standardmäßig mit Server Components, fügen Sie Client Components nur hinzu, wenn Interaktivität erforderlich ist
- Verwenden Sie Route Groups mit Klammern, um Routen zu organisieren, ohne den URL-Pfad zu beeinflussen
- Implementieren Sie loading.tsx und error.tsx für jedes wichtige Routensegment, um Pending- und Error-States zu behandeln
避免
- 'use client' zu jeder Component hinzufügen - dies untergräbt den Zweck von Server Components und erhöht die Bundle-Größe
- Daten in Client Components statt in Server Components abrufen - verursacht Waterfall-Anfragen und langsamere Ladezeiten
- Überspringen properer Error Boundaries - unbehandelte Fehler stürzen die gesamte Anwendung ab, anstatt Fallback-UI anzuzeigen