React a Next.js patří mezi nejoblíbenější nástroje pro tvorbu uživatelských rozhraní. Zatímco React se jeví jako knihovna, Next.js představuje robustní framework, který na Reactu staví.
Jelikož Next.js využívá React jako základ, sdílejí mnohé společné rysy. Tato podobnost může vést k nejasnostem a otázkám o jejich rozdílech. Proto se nyní podíváme podrobněji na to, čím se tyto dva nástroje liší, a pomůžeme tak rozptýlit případné pochybnosti. Začneme s knihovnou React.
React: Začínáme
React je open-source knihovna, která umožňuje vytvářet interaktivní uživatelská rozhraní pomocí JavaScriptu. Primárně se používá k vývoji takzvaných single-page aplikací (SPA). Co si pod tím představit? Aplikace SPA má jediný HTML dokument, který dynamicky aktualizuje obsah na základě interakcí uživatele, aniž by docházelo k opakovanému načítání celé stránky.
V současné době je tvorba jednostránkových aplikací velmi populární a React se v této oblasti jeví jako jedna z nejpreferovanějších knihoven. V žádném případě se nejedná o přehánění.
Díky široké škále dostupných balíčků je vývoj s Reactem pro programátory pohodlnější a efektivnější. S pomocí Reactu je možné vytvářet webové aplikace libovolného druhu a složitosti.
Původně React vyvinula společnost Facebook, nyní se na jeho vývoji může podílet každý a Facebook samotný zajišťuje jeho údržbu.
Nyní si představíme klíčové vlastnosti knihovny React.
Virtuální DOM
Webové aplikace dynamicky aktualizují pouze určité části stránky, aniž by ovlivňovaly zbytek. Například při načítání dat se zobrazí indikátor načítání a po dokončení načítání se tato část aktualizuje. Z technického hlediska se jedná o aktualizaci DOM (Document Object Model) v prohlížeči.
Bez specializovaných knihoven jako je React, by bylo nutné k dosažení stejného efektu používat čistý JavaScript, což by však bylo neefektivní, protože operace s DOM jsou náročné. Právě zde přichází na řadu koncept virtuálního DOM, který React využívá.
Virtuální DOM je v podstatě kopie skutečného DOM. Při aktualizaci React nejprve modifikuje virtuální DOM a následně jej porovná se skutečným DOM. Aktualizace skutečného DOM proběhne pouze v případě, že se objeví změny, a to jen v těch částech, které se skutečně změnily. Tímto způsobem se snižuje počet operací na skutečném DOM, což vede k výraznému zrychlení aktualizací.
Bez knihoven, jako je React, by byl chod webových aplikací mnohem pomalejší.
Komponenty
Komponenty jsou základní stavební kameny uživatelského rozhraní v Reactu. Dá se říct, že v Reactu je všechno komponenta. Tyto komponenty je možné opakovaně používat v rámci celé aplikace.
Představme si například tlačítko s určitým stylem. V Reactu můžeme vytvořit komponentu, která se postará o vykreslení tohoto tlačítka se specifikovaným stylem, a to na základě parametrů (vlastností), které do komponenty předáme. Tuto komponentu tlačítka můžeme dále upravovat pomocí takzvaných rekvizit. Takto lze komponenty opakovaně využívat v různých částech aplikace.
Komponenty umožňují organizovat aplikaci do menších a lépe spravovatelných bloků uživatelského rozhraní. Můžeme je seskupovat a uspořádávat dle potřeby.
JSX
S pomocí JSX je možné psát HTML přímo v JavaScriptu. JSX vypadá podobně jako HTML, nicméně se jedná o speciální syntaxi, která umožňuje vkládat JavaScriptový kód do HTML. Lze tak přistupovat k libovolným HTML atributům.
JSX slouží k definování struktury uživatelského rozhraní. Každá komponenta vrací JSX, který se následně vykreslí do DOM.
Jednosměrný tok dat
Pro efektivní a strukturovaný vývoj je klíčové, aby data mezi komponentami proudila organizovaným způsobem. Pokud by nebyl zaveden systém datového toku, museli bychom vše umístit do jediné, komplexní komponenty.
React používá jednosměrný tok dat od nadřazené komponenty k podřízené. Data můžeme předávat z rodičovských komponent do potomků. Podřízená komponenta však nemůže přímo modifikovat stav nadřazené komponenty, nýbrž pouze prostřednictvím předaných funkcí.
Jednosměrný tok dat zjednodušuje ladění aplikace. Komponenty se stávají jednoduššími a přehlednějšími, protože nemusejí spravovat svůj stav složitým způsobem.
Pokud máte základní znalosti JavaScriptu, naučit se React je poměrně snadné. Pro začátek vám postačí oficiální dokumentace Reactu.
Next.js: Začínáme
Next.js je framework pro vývoj webových aplikací postavený na knihovně React. Vytvořila ho společnost Vercel. Next.js tedy přirozeně obsahuje všechny funkce, které nabízí React. Co je tedy na Next.js tak speciální? Podívejme se na některé vlastnosti, které jej odlišují kromě komponent Reactu.
Předběžné vykreslování
Next.js předběžně vykreslí každou stránku. Díky tomu se stránka v prohlížeči načte velmi rychle jako statické HTML. Poté se do stránky načte JavaScript potřebný pro danou interaktivitu. Tímto způsobem se zvyšuje výkon a optimalizuje se SEO.
Existují dva typy předběžného vykreslování. Prvním je statické generování stránek (SSG – Static Site Generation) a druhým vykreslování na straně serveru (SSR – Server-Side Rendering). SSG generuje HTML při sestavování aplikace a opětovně ho používá při dalších požadavcích.
SSR naopak generuje HTML při každém požadavku, takže je o něco pomalejší než SSG. Next.js doporučuje používat SSG všude tam, kde není nutné použít SSR.
Next.js také přednačítá stránky, na které odkazují odkazy (pomocí komponenty Link) na aktuálně zobrazené stránce. Tato skvělá funkce umožňuje velmi rychlé načítání stránek během navigace.
Směrování
Next.js přichází s integrovaným systémem směrování, který využívá strukturu složek. Pro vytvoření nové trasy stačí umístit stránky do určené složky. K tomuto se nepoužívá žádný externí balíček.
API
S Next.js je také možné vytvářet API, podobně jako u frameworku Express. Otevírá se tak možnost vytvářet kompletní full-stack aplikace. Nemusí být sice tak efektivní jako dedikované serverové frameworky, ale pro většinu úkolů je dostatečný.
Další funkce
Mezi další funkce Next.js patří optimalizace obrázků, vestavěná podpora CSS, meta tagy pro každou stránku (pro lepší SEO) a další. Všechny tyto funkce doplňují základní vlastnosti Reactu a rozšiřují tak jeho možnosti.
Od svého vydání si Next.js získal velkou popularitu. Pokud znáte React, učení se Next.js je velmi užitečné. Nicméně, není nutné se nejprve učit React. Můžete začít s kterýmkoliv. Pro oba je však nezbytná znalost JavaScriptu.
Nyní, když jsme si představili funkce Reactu a Next.js, si je porovnáme.
React vs. Next.js
Jak už víme, mezi Reactem a Next.js je mnoho podobností, protože Next.js staví na Reactu. Základní koncepty jsou shodné. Porovnejme si některé z nich vedle sebe.
Kód
Podívejme se na jednoduchý „Hello World!“ komponent v Reactu a Next.js.
React
function App() {
return (
<div className="app">
Hello World!
</div>
);
}
export default App;Next.js
export default function Home() {
return (
<div className="app">
Hello World!
</div>
)
}Jak vidíme, kód je téměř identický.
Struktura složek
React jako knihovna nemá definovanou strukturu složek. Je na vývojáři, jak si uspořádá složky a soubory.
Ani Next.js nemá striktní strukturu složek, kterou by bylo nutné dodržovat. Jedinou výjimkou je složka „pages“, která se používá pro směrování. Ostatní složky a soubory je možné uspořádat podobně jako v Reactu.
Výkon
Aplikace vytvořené s Next.js bývají o něco rychlejší ve srovnání s aplikacemi v Reactu. Next.js totiž využívá techniky předběžného vykreslování. Nicméně to neznamená, že nelze s Reactem dosáhnout rychlé aplikace. Jen to vyžaduje více úsilí ze strany vývojáře.
TypeScript
TypeScript hraje významnou roli ve větších aplikacích. Bez TypeScriptu může být ladění aplikací frustrující. Nicméně, jak React, tak Next.js podporují TypeScript.
Další funkce
Jak React, tak Next.js jsou aktivně spravované s velkou komunitou. Ve srovnání s jinými frontendovými knihovnami a frameworky je jejich popularita obrovská. Pokud narazíte na problém, je velká šance, že řešení najdete online.
Dokumentace obou nástrojů je kvalitní a usnadňuje začátky. Tak na co čekáte? Začněte objevovat svět Reactu a Next.js!
Souhrn
| Vlastnosti | React | Next.js |
| Kód | Pro psaní aplikací v Reactu je potřeba znát JavaScript. | Kód je podobný Reactu, protože na něm staví. |
| Struktura složek | Neurčuje striktní pravidla pro strukturu složek. | Používá specifickou strukturu pro složku stránek (směrování). |
| TypeScript | Podporuje TypeScript. | Podporuje také TypeScript. |
| Vykreslování na straně serveru | Nemá vestavěnou podporu pro vykreslování na straně serveru. | Má vestavěnou podporu vykreslování na straně serveru s předběžným načítáním (SSG a SSR). |
| Výkon | O něco pomalejší ve srovnání s Next.js | O něco rychlejší ve srovnání s Reactem. |
| Komunita a údržba | Dobře spravovaný Facebookem s velkou open-source komunitou. | Vercel také odvádí skvělou práci při údržbě. Má také open-source komunitní podporu. |
| Dokumentace a učení | Dobře zdokumentované, i pro začátečníky. Můžete začít kdykoliv, pokud znáte JavaScript. | Má dobrou dokumentaci a učení bude rychlejší, pokud znáte koncepty React. |
React vs. Next.js
Který si vybrat?
Na tuto otázku neexistuje jednoznačná odpověď. Výběr závisí na mnoha faktorech, jako je typ projektu, jeho účel a další specifika. Než se rozhodneme, musíme si pečlivě projít všechny vlastnosti a požadavky projektu.
Jedním z kritérií může být například SEO. Pokud je pro váš projekt optimalizace pro vyhledávače důležitá, je lepší volbou Next.js.
Pokud si nejste jistí, je lepší začít s Reactem. V pozdější fázi můžete projekt bez větších obtíží migrovat na Next.js. Víte, proč to nebude trvat příliš dlouho 😄.
Oba nástroje mají velkou komunitu, takže řešení pro většinu problémů, se kterými se setkáte, je dostupné online. K dispozici je také spousta balíčků, které vám usnadní vývoj webových aplikací a které lze používat v obou nástrojích.
Rozhodování bývá těžké. Ale nebojte se rozhodnout 😜.
Závěr
Dá se říci, že Next.js je nadmnožinou Reactu. Next.js staví na Reactu a přidává další funkce. Z tohoto pohledu není porovnávání úplně na místě, nicméně jsme si ho dovolili 😅. Každopádně byste nyní měli mít základní představu o Reactu i Next.js.
Jak jste si mohli všimnout, rozdíly mezi nimi nejsou příliš velké, s výjimkou extra funkcí, které Next.js nabízí. To je pro dnešek vše. Závěrem si dovolíme krátké doporučení.
Pokud se chcete naučit framework pro frontend, doporučujeme začít s Reactem. Díky znalostem konceptů Reactu bude učení Next.js pro vás hračkou.
Můžete si také prohlédnout zdroje, které vám pomohou s učením ReactJS.