Mi a Next.js és mit ad hozzá a React-hez?

Question

Accepted Answer

A **Next.js** egy teljes körű React **framework**. A React maga csak egy UI könyvtár — rendereli az összetevőket, de a routing, az adatlekérést, a szerver renderelést és az összeállítási eszközöket rábízza. A Next.js mindezt azonnal biztosítja, plusz egy szerver futtatókörnyezet. ## Amit a React elhagyott (és a Next.js hozzáadott) ```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 ``` ## Egy konkrét példa: az útvonal csak egy fájl ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` A sima React-ben telepítenie kellene egy routert, konfigurálnia az útvonalakat és beállítania az összeállítást. A Next.js-ben a fájl létrehozása *az* útvonal. ## Miért választják a csapatok - **SEO és teljesítmény** — a szerver által renderelt HTML azt jelenti, hogy a tartalom az kezdeti válaszban van (jó a keresőmotoroknak és a gyors első festéshez), ellentétben a csak ügyféloldali React SPA-val, amely üres oldalt küld, majd hidratálódik. - **Teljes körű egy projektben** — az előtér és a háttér (API útvonalak, Server Actions) együtt élnek. - **Termelésre kész alapértelmezések** — automatikus kódfelosztás, kép/betűtípus optimalizálás, gyorsítótárazás. ## Miért fontos ez A Next.js a legnépszerűbb React keretrendszer, mert a React-ot egy UI könyvtárból egy teljes alkalmazási platformmá alakítja — a renderelési stratégia, az útválasztás, az adatok és a háttér kezelésével, így a plumbing helyett a funkciókra koncentrálhat. Ez az alapértelmezett választás, amikor SEO, teljesítmény vagy szerver oldali logika szükséges a React-tel.