Wzorce rozwoju Next.js

Buduj gotowe do produkcji aplikacje Next.js z Cursor i Claude Code. Te wzorce obejmują App Router, Server Components, trasy API, strategie wdrożenia oraz najnowocześniejsze funkcje, które czynią Next.js głównym frameworkiem dla aplikacji React.

Szybka konfiguracja projektów Next.js

Inicjalizacja Next.js z AI

Cursor

1. Otwórz Cursor i utwórz nowy katalog
2. Skonfiguruj Figma MCP: Ustawienia > MCP > Dodaj serwer > http://127.0.0.1:3845/sse
3. Uruchom tryb Agent (Cmd/Ctrl + I)
4. Prompt: “Utwórz aplikację Next.js 14 z App Router, TypeScript, Tailwind CSS, Prisma i konfiguracją testową. Zawieraj komponenty shadcn/ui”
5. Włącz tryb YOLO dla automatycznego wykonywania
6. Przejrzyj wygenerowany next.config.js i strukturę projektu

Claude Code

1. Przejdź do folderu projektów
2. Uruchom claude w terminalu
3. Dodaj Figma MCP: claude mcp add figma --transport sse http://127.0.0.1:3845/sse
4. Wykonaj: “Skonfiguruj projekt Next.js 14 z App Router, TypeScript, tRPC, NextAuth, Drizzle ORM i kompleksowym testowaniem. Skonfiguruj dla wdrożenia Vercel”
5. Pozwól Claude zbudować cały projekt
6. Użyj /init aby utworzyć specyficzny dla Next.js CLAUDE.md

Konfiguracja kontekstu AI

Konfiguracja Figma MCP

.mcp.json

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

.cursor/rules/nextjs-patterns.md

# Zasady rozwoju Next.js

## Konwencje frameworka
- Używaj App Router (katalog app/)
- Server Components domyślnie
- Client Components tylko w razie potrzeby ('use client')
- Kolokuj komponenty z trasami
- Używaj grup tras do organizacji

## Wytyczne wydajności
- Implementuj streaming SSR
- Używaj dynamicznych importów dla code splitting
- Optymalizuj obrazy z next/image
- Implementuj właściwe strategie cache'owania
- Używaj Partial Prerendering gdzie możliwe

## Standardy TypeScript
- Tryb strict włączony
- Używaj właściwego wnioskowania typów
- Unikaj typów any
- Implementuj właściwe granice błędów

Rozwój komponentów UI

Projektowanie do komponentów Next.js

# PRD: Konwertuj projekty Figma na komponenty Next.js
# Plan: Użyj Figma MCP dla Server/Client components

"Używając Figma MCP, wygeneruj komponenty Next.js z wybranego projektu:
1. Określ czy powinien być komponentem Server czy Client
2. Używaj konwencji App Router
3. Stosuj komponenty shadcn/ui gdzie to możliwe
4. Wyodrębnij tokeny projektowe dla motywu"

# Przykładowy przepływ pracy
"Wybierz sekcję Hero w Figma i:
- Wygeneruj jako Server Component (bez interakcji)
- Używaj next/image dla zoptymalizowanych obrazów
- Zastosuj responsywny design z Tailwind
- Wyodrębnij tokeny kolorów i odstępów"

Integracja systemu projektowego

// Wyodrębnij tokeny Figma do motywu Next.js
"Używając Figma MCP get_variable_defs:
1. Pobierz wszystkie zmienne systemu projektowego
2. Wygeneruj rozszerzenia tailwind.config.js
3. Utwórz zmienne CSS dla dynamicznego motywu
4. Skonfiguruj obsługę trybu ciemnego"

// Przykładowe wyjście: tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1D4ED8', // Figma: Primary/Blue
          dark: '#1E40AF',    // Figma: Primary/Dark
          light: '#3B82F6'    // Figma: Primary/Light
        }
      },
      spacing: {
        'section': '5rem',    // Figma: Spacing/Section
        'component': '2rem'   // Figma: Spacing/Component
      }
    }
  }
}

Wzorce App Router

Organizacja tras

Zaawansowana struktura routingu:

Utwórz złożoną strukturę routingu:
1. Strony marketingowe z grupą tras (marketing)
2. Dashboard z grupą tras (dashboard) i layoutem
3. Trasy API w app/api/
4. Równoległe trasy dla modali
5. Przechwytujące trasy dla galerii zdjęć
6. Dynamiczne segmenty z [...slug]
7. Implementuj właściwe loading.tsx i error.tsx

Pogłębienie Server Components

Pobieranie danych

Utwórz komponenty serwera, które:
- Pobierają dane bezpośrednio w komponentach
- Używają React cache() do deduplikacji
- Implementują streaming z Suspense
- Obsługują błędy z granicami błędów
- Używają generateStaticParams dla SSG
- Implementują strategie rewalidacji

Wzorce komponentów

Zbuduj dashboard z Server Components:
1. Layout z pobieraniem danych użytkownika
2. Równoległe pobieranie danych dla widgetów
3. Streaming poszczególnych komponentów
4. Client components dla interakcji
5. Optymistyczne aktualizacje z useOptimistic
6. Server Actions dla mutacji

Notatka

💡 Wskazówka: Poproś AI o analizę twojego drzewa komponentów i sugestie, które komponenty powinny być Server vs Client Components na podstawie ich funkcjonalności.

Server Actions i mutacje

Obsługa formularzy z Server Actions

Przykład Server Action

Implementuj kompletny system formularzy:
1. Server Action do przesyłania formularzy
2. Walidacja Zod na serwerze
3. useFormState dla stanu klienta
4. useFormStatus dla stanów pending
5. Optymistyczne aktualizacje
6. Obsługa błędów z useActionState
7. Rewalidacja po mutacji

Zaawansowane Server Actions

Przesyłanie plików

Utwórz przesyłanie plików z Server Actions:
- Obsługuj dane multipart form
- Stream do S3/Cloudinary
- Pokaż postęp przesyłania
- Generuj miniatury
- Aktualizuj bazę danych

Aktualizacje w czasie rzeczywistym

Implementuj funkcje w czasie rzeczywistym:
- Konfiguracja Server-Sent Events
- Integracja WebSocket
- Optymistyczne aktualizacje UI
- Rozwiązywanie konfliktów
- Wskaźniki obecności

Rozwój API

Route Handlers

Wzorzec RESTful API:

Utwórz kompletne REST API:
1. Endpointy CRUD w app/api/resources/
2. Middleware do uwierzytelniania
3. Rate limiting z Upstash
4. Dokumentacja OpenAPI
5. Type-safe responses
6. Middleware obsługi błędów
7. Konfiguracja CORS

Integracja tRPC

Skonfiguruj tRPC z App Router:
1. Utwórz router tRPC
2. Integracja App Router
3. Type-safe wywołania API
4. Integracja React Query
5. Subskrypcje WebSocket
6. Obsługa błędów
7. Kontekst uwierzytelniania

Wzorce uwierzytelniania

Konfiguracja NextAuth.js

1. Konfiguracja providerów

   Skonfiguruj NextAuth z:
   - Wieloma providerami (Google, GitHub, Email)
   - Sesjami bazodanowymi z Prisma
   - Niestandardowymi stronami signin/signout
   - Kontrolą dostępu opartą na rolach
   - JWT z tokenami odświeżania

2. Ochrona middleware

   Implementuj middleware auth:
   - Ochrona tras API
   - Logika przekierowań
   - Sprawdzanie ról
   - Walidacja sesji
   - Niestandardowe nagłówki

Wzorce bazy danych

Prisma z Next.js

Skonfiguruj Prisma dla produkcji:
1. Skonfiguruj pooling połączeń
2. Implementuj soft deletes
3. Dodaj pola audytu (createdAt, updatedAt)
4. Utwórz skrypty seed
5. Optymalizuj zapytania z include/select
6. Implementuj transakcje
7. Dodaj indeksy bazy danych

Warstwa dostępu do danych

Utwórz warstwę dostępu do danych:
- Wzorzec repozytorium dla modeli
- Cache'owane zapytania z unstable_cache
- Type-safe wywołania bazy danych
- Pomocniki transakcji
- Query builders
- Strategie migracji

Optymalizacja wydajności

Optymalizacja obrazów

Obrazy statyczne

Optymalizuj obrazy statyczne:
- Używaj next/image z sizing
- Implementuj blur placeholders z Figma
- Skonfiguruj domeny obrazów
- Używaj responsywnych obrazów
- Generowanie WebP
- Integracja CDN

# Z Figma MCP:
"Wyodrębnij obrazy z projektu Figma i:
- Wygeneruj zoptymalizowane komponenty next/image
- Utwórz blur data URLs
- Ustaw właściwe proporcje width/height"

Obrazy dynamiczne

Obsługuj obrazy dynamiczne:
- Optymalizacja na żądanie
- Integracja Cloudinary
- Generowanie awatarów
- API transformacji obrazów
- Strategie cache'owania

Optymalizacja pakietu

Analizuj i optymalizuj pakiety:
1. Uruchom analizator pakietu
2. Implementuj dynamiczne importy
3. Optymalizuj skrypty stron trzecich
4. Tree shake nieużywany kod
5. Skonfiguruj minifikację SWC
6. Implementuj chunking oparty na trasach
7. Monitoruj z SpeedCurve

Strategie testowania

Testowanie komponentów

Wzorzec testowania

Napisz kompleksowe testy:
1. Testy jednostkowe z Jest
2. Testy komponentów z React Testing Library
3. Testy integracji dla tras API
4. Testy E2E z Playwright
5. Regresja wizualna z Percy
6. Testy wydajności
7. Testy dostępności

Testowanie E2E

Utwórz suite testów E2E:
- Testuj krytyczne przepływy użytkownika
- Testy integracji API
- Przepływy uwierzytelniania
- Procesy płatności
- Scenariusze błędów
- Responsywność mobilna
- Benchmarki wydajności

Wdrożenie i DevOps

Wdrożenie Vercel

Skonfiguruj dla Vercel:
1. Zmienne środowiskowe
2. Preview deployments
3. Edge functions
4. Integracja analytics
5. Speed insights
6. Niestandardowe domeny
7. Konfiguracja ISR

Wdrożenie Docker

Utwórz konfigurację Docker produkcyjną:
- Multi-stage build
- Standalone output
- Health checks
- Graceful shutdown
- Environment injection
- Security scanning
- Konfiguracja Compose

Zaawansowane wzorce

Internacjonalizacja

Implementuj i18n:
1. Skonfiguruj next-intl
2. Lokale oparte na trasach
3. Tłumaczenie treści
4. Formatowanie daty/liczb
5. SEO hreflang tags
6. Przełącznik języka
7. Generowanie statyczne per locale

Architektura multi-tenant

Zbuduj aplikację multi-tenant:
1. Detekcja subdomen
2. Izolacja bazy danych
3. Personalizacja motywu
4. Feature flags
5. Middleware specyficzne dla najemcy
6. Integracja billing
7. Portal administratora

SEO i Analytics

Optymalizacja SEO

Implementuj kompleksowe SEO:
- Dynamiczne API metadanych
- Strukturalne dane
- Generowanie sitemap
- robots.txt
- Obrazy Open Graph
- Karty Twitter
- Schema markup

Integracja Analytics

Skonfiguruj analytics:
- Vercel Analytics
- Google Analytics 4
- Niestandardowe zdarzenia
- Śledzenie konwersji
- Śledzenie błędów z Sentry
- Monitorowanie wydajności
- Śledzenie zachowań użytkowników

Typowe wzorce

Obsługa błędów

Implementuj obsługę błędów:
1. Globalna granica błędów
2. error.tsx na poziomie tras
3. Odpowiedzi błędów API
4. Logowanie z winston
5. Integracja Sentry
6. Przyjazne dla użytkownika wiadomości
7. Strategie odzyskiwania błędów

Strategie cache’owania

Skonfiguruj cache'owanie:
- Konfiguracja segmentów tras
- Rewalidacja na żądanie
- Rewalidacja czasowa
- Nagłówki cache
- Cache'owanie CDN
- Cache'owanie zapytań bazy danych
- Integracja Redis

Przewodnik migracji

Pages do App Router

Migruj z Pages Router:
1. Analizuj obecne trasy
2. Konwertuj layouty
3. Aktualizuj pobieranie danych
4. Migruj trasy API
5. Aktualizuj middleware
6. Testuj dokładnie
7. Strategia stopniowej migracji

Następne kroki

• Porównaj z wzorcami Nuxt dla alternatywy Vue
• Eksploruj wzorce React dla podstaw React
• Naucz się wzorców Node.js dla integracji backend

Wskazówka

Next.js szybko ewoluuje. Używaj AI, aby być na bieżąco z najnowszymi wzorcami i funkcjami, ale zawsze weryfikuj z oficjalną dokumentacją dla wdrożeń produkcyjnych.