Kas yra Next.js ir ką jis prideda prie React?

Question

Accepted Answer

**Next.js** yra visapusis React **šablonas**. Pats React yra tik UI biblioteka — jis renduoja komponentus, bet jums paliekamis routingas, duomenų nusikrovimas, serverio renderavimas ir build įrankius. Next.js pagal numatytuosius nustatymus pateikia visa tai, o taip pat serverio runtime. ## Ką React pats palieka (ir Next.js prideda) ```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 ``` ## Konkretus pavyzdys: maršrutas yra tik failas ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` Grynoje React instaliuotumėte maršrutizatorių, sukonfigūruotumėte maršrutus ir sukūrėte build. Next.js atveju failas *yra* maršrutas. ## Kodėl komandos jį pasirenka - **SEO ir veiktumas** — serverio atvaizduotas HTML reiškia, kad turinys yra pradinėje atsakymo dalyje (gerai gūgliams ir greitam pirmajam piešimui), skirtingai nei tik kliento React SPA, kuris siunčia tuščią puslapį, o tada hidratuoja. - **Visapusis viename projekte** — priekinė pusė ir galinė pusė (API maršrutai, Server Actions) gyvena kartu. - **Gamybai paruoštos numatytos nuostatos** — automatinis kodo padalijimas, vaizdo / šrifto optimizavimas, podėliai. ## Kodėl tai svarbu Next.js yra populiariausias React šablonas, nes paverčia React iš UI bibliotekos į visapusę programos platformą — tvarko renderavimo strategiją, routingą, duomenis ir serverį, kad jūs galėtumėte sutelkti dėmesį į funkcijas, o ne į pagrindines operacijas. Tai numatytasis pasirinkimas, kai jums reikalingas SEO, veiktumas ar serverio pusės logika naudojant React.