nextjs-app-router-patterns

Umiejętność dla agentów AI do pracy z architekturą Next.js 14+ App Router. Nauczy Cię Server Components, streamingu, tras równoległych i wzorców pobierania danych. Użyj jej podczas budowania aplikacji Next.js, migracji z Pages Router, implementacji SSR/SSG lub optymalizacji React Server Components. Zawiera konkretne konwencje plików, tryby renderowania i best practices do pełnostackowego rozwoju.

1. Zainstaluj umiejętność w swoim środowisku agenta, wskazując ścieżkę do repozytorium wshobson/agents w katalogu skills/nextjs-app-router-patterns. 2. Zdefiniuj strukturę projektu Next.js zgodnie z konwencjami App Router: utwórz katalog app/ z plikami layout.tsx, page.tsx, loading.tsx, error.tsx i route.ts w zależności od potrzeb. 3. Wybierz odpowiedni tryb renderowania dla każdego komponentu: Server Components do pobierania danych i operacji serwerowych, Client Components do interaktywności i hooków React, Static do treści niezmiennych, Dynamic do danych spersonalizowanych. 4. Implementuj Server Actions dla funkcjonalności pełnostackowej, łącząc logikę serwerową z interfejsem użytkownika bez dodatkowych API. 5. Skonfiguruj streaming i Suspense boundaries dla progresywnego ładowania dużych stron i wolnych źródeł danych, używając pliku loading.tsx. 6. Zastosuj obsługę błędów i fallbacki za pomocą error.tsx i not-found.tsx, oraz rasy równoległe i przechwytujące dla zaawansowanych wzorców routingu.