Czym jest Next.js i co dodaje do React?

Question

Accepted Answer

**Next.js** to full-stack **framework** dla React. React sam w sobie to tylko biblioteka UI — renderuje komponenty, ale pozostawia Ci routing, pobieranie danych, renderowanie po stronie serwera i narzędzia do budowania. Next.js zapewnia wszystko to z pudełka plus server runtime. ## Co React sam pomija (a Next.js dodaje) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Konkretny przykład: trasa to po prostu plik ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` W czystym React zainstalowałbyś router, skonfigurował trasy i ustawił build. W Next.js, sam fakt utworzenia pliku *to* trasa. ## Dlaczego to ważne - **SEO i performance** — HTML renderowany po stronie serwera oznacza, że zawartość znajduje się w odpowiedzi początkowej (dobry dla crawlerów i szybkiego pierwszego renderowania), w przeciwieństwie do samego klienta React SPA, które wysyła pustą stronę, a następnie ją nawilża. - **Full-stack w jednym projekcie** — frontend i backend (trasy API, Server Actions) znajdują się razem. - **Domyślne ustawienia gotowe do produkcji** — automatyczne dzielenie kodu, optymalizacja obrazów/czcionek, buforowanie. ## Dlaczego to ważne Next.js to najpopularniejszy framework React, ponieważ zmienia React z biblioteki UI na pełną platformę aplikacyjną — obsługując strategię renderowania, routing, dane i backend, abyś mógł skupić się na funkcjach zamiast na infrastrukturze. To domyślny wybór, gdy potrzebujesz SEO, wydajności lub logiki po stronie serwera w React.