N
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
How to use
- 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.