nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Next.js App Router principles. Server Components, data fetching, routing patterns.
How to use
Zainstaluj umiejętność w swoim środowisku Claude lub agenta, wskazując repozytorium davila7/claude-code-templates w ścieżce cli-tool/components/skills/development/nextjs-best-practices.
Kiedy projektujesz komponent, zadaj pytanie: czy potrzebujesz useState, useEffect lub obsługi zdarzeń? Jeśli tak, oznacz go jako Client Component ('use client'). Jeśli komponent tylko pobiera dane i wyświetla zawartość, zostaw go jako Server Component (domyślnie).
Przy pobieraniu danych wybierz strategię: Static (domyślnie, cache'owany przy budowie), Revalidate (odświeżanie co określony czas), lub No-store (dynamicznie przy każdym żądaniu). Dla baz danych używaj Server Components, dla API — fetch z cache'owaniem, dla danych użytkownika — Client state plus server action.
Organizuj routing za pomocą konwencji plików: page.tsx dla UI trasy, layout.tsx dla wspólnego layoutu, loading.tsx dla stanu ładowania, error.tsx dla granic błędów, not-found.tsx dla stron 404. Grupy tras (name) pomagają organizować bez zmiany URL, trasy równoległe @slot obsługują wiele stron na tym samym poziomie.
Dla tras API (GET, POST, PUT/PATCH, DELETE) waliduj dane wejściowe narzędziami takimi jak Zod, zwracaj właściwe kody statusu i obsługuj błędy. Rozważ użycie Edge runtime dla lepszej wydajności.
Optymalizuj wydajność: używaj komponentu next/image zamiast zwykłego img, ustaw priority dla obrazów powyżej linii widoku, dostarczaj rozmiary i formaty. Stosuj te zasady podczas każdej iteracji projektu, aby uniknąć pułapek wydajności.