Next.js — co to jest i kiedy go używać

Next.js to nadbudowa nad React. React sam z siebie to biblioteka komponentów UI bez routingu, bez SSR, bez optymalizacji. Next.js dodaje wszystko czego brakuje żeby zbudować pełnowartościową stronę produkcyjną: routing oparty o strukturę plików, server-side rendering, statyczną generację, optymalizację obrazów i fontów, edge functions, API routes, middleware.

App Router (od wersji 13) to obecny standard. Każdy folder w `app/` to route. Plik `page.tsx` renderuje stronę, `layout.tsx` wspólny szablon, `loading.tsx` stan ładowania, `error.tsx` boundary błędów. Routing nested (zagnieżdżone layouty), parallel routes, intercepting routes — rzeczy których React Router nie ma.

React Server Components (RSC) to flagowa funkcja. Komponenty domyślnie renderują się na serwerze, NIE wysyłają JS do klienta, fetchują dane bezpośrednio (np. `await db.query()` w komponencie). Klient dostaje gotowy HTML i tylko niezbędny JavaScript do interaktywności. Bundle size spada o 30-60% vs klasyczny React.

Stack 2026 dla stron Next.js: Next.js 16 + TypeScript + Tailwind 4 + headless CMS (Sanity / Contentful / Payload) + Vercel hosting. Dla aplikacji dorzucasz Postgres + Prisma + auth (Clerk lub NextAuth) + Stripe / Przelewy24.

**SSG (Static Site Generation)** — strona renderowana raz przy build, deploy jako statyczny HTML na CDN. Najszybsza możliwa strona (LCP poniżej 1s). Dla blogów, dokumentacji, marketing pages, portfolio. Default w Next.js App Router gdy nie używasz dynamicznych funkcji.

**ISR (Incremental Static Regeneration)** — strona statyczna na CDN, ale regeneruje się on-demand po update content (webhook z CMS). Łączy szybkość SSG z świeżością dynamicznych danych. Dla e-commerce z często zmieniającymi się cenami, blogów z dużym wolumenem postów.

**SSR (Server-Side Rendering)** — strona renderowana na serwerze per request. Każdy user dostaje świeży HTML. Dla dashboardów z user-specific data, A/B testing, geo-targeting, real-time data.

**CSR (Client-Side Rendering)** — komponent z `'use client'`, pełny React po stronie przeglądarki. Dla heavy interactivity: edytory, gry, chats. W Next.js to wyjątek, nie reguła.

Wybór per route nie per projekt. Marketing pages SSG, dashboard SSR, listing produktów ISR, edytor CSR — w jednej aplikacji, automatycznie. Vercel detekuje strategię z kodu i optymalizuje deployment.

Strona marketingowa firmy lub usług — pełen SEO, OG images, schema.org, sub-1s ładowanie. Standardowy use case.

Blog albo magazyn — content w MDX lub headless CMS, statyczna generacja, ISR przy publikacji nowego posta. Świetny SEO out of the box.

E-commerce małej-średniej skali — katalog statyczny, koszyk client-side, checkout SSR, integracja Stripe / Przelewy24. Dla większych sklepów (10k+ produktów) lepiej dedykowane platformy (Shopify, Centra).

Aplikacja SaaS lub B2B narzędzie — dashboard po logowaniu, panel klienta, integracje API. Server actions zamiast osobnego backendu, edge functions dla geo-distributed users.

Dokumentacja techniczna — MDX + automatyczna generacja sidebar, sub-1s search, dark mode. Docusaurus i Mintlify są oparte o Next.js z powodu.

Mała wewnętrzna aplikacja firmowa za logowaniem, brak wymogu SEO — wystarczy Vite + React. Mniej setupu, prostszy deployment, brak narzutu SSR.

Real-time gry przeglądarkowe — Phaser, PixiJS, Three.js standalone. Next.js renderowanie jest zbędne, gra to canvas + WebGL.

Statyczny one-pager bez dynamiki — HTML + CSS + jeden plik JS. Next.js to overkill dla landing page'a na 5 sekcji.

Strony z bardzo dużą bazą treści (100k+ stron) — czas build w Next.js przy SSG urośnie do 30+ minut. Lepiej Hugo (Go-based, build w sekundach) lub Astro z partial hydration.

Klient KONIECZNIE chce edytować wszystko w Gutenbergu z muscle memory 5 lat — wtedy WordPress ze starannie zrobionym themem custom. Headless WordPress + Next.js frontend to alternatywa łącząca oba światy.

Strona wizytówka (5-10 podstron): 8-15 tys. zł netto. Czas: 4-6 tygodni. Stack Next.js + Tailwind + treści w MDX (bez CMS) + Vercel free.

Strona firmowa z CMS i blogiem (15-50 podstron): 15-30 tys. Czas: 6-10 tygodni. Stack + Sanity Studio + Vercel.

Aplikacja webowa (konfigurator, panel klienta, integracje): 30-80 tys. Czas: 8-16 tygodni. Stack + Postgres + Prisma + auth + Stripe.

Aplikacja SaaS multi-tenant: 80 tys. zł wzwyż. Czas: 4-9 miesięcy.

Dla pełnych widełek z breakdownem na poszczególne komponenty zobacz ile kosztuje strona na Next.js — przewodnik. Dla porównania z WordPress: Next.js vs WordPress: koszty wdrożenia i utrzymania.

**Astro** — content-first framework. Multi-framework support (React, Vue, Svelte w jednym projekcie), zero JS by default, partial hydration ("islands"). Świetny dla blogów, dokumentacji, marketing pages bez aplikacyjnej dynamiki. Słabszy ekosystem niż Next.js.

**SvelteKit** — Svelte-based, mniejszy bundle niż React, lżejszy runtime. Świetny developer experience, ale mniejsza społeczność, mniej gotowych komponentów, trudniej znaleźć developera.

**Remix** — od twórców React Router (przejęty przez Shopify w 2022). Filozofia full-stack web standards (loaders, actions zamiast custom API). Świetny ale Next.js wygrał market share — dla większości projektów Next.js to bezpieczniejszy wybór.

**Nuxt (Vue)** — odpowiednik Next.js w świecie Vue. Jeśli zespół zna Vue, jest sensowny. Jeśli pracujesz na rynku React (jak większość PL), Next.js standardem.

Wybór 2026: Next.js dla 80% projektów (full app + ekosystem), Astro dla content-heavy bez aplikacyjnej dynamiki, reszta — sytuacyjnie.