Next.js: co to je a kdy na něm stavět web
Next.js je framework pro stavbu webů a webových aplikací postavený na knihovně React. React řeší, jak se skládá uživatelské rozhraní, Next.js k tomu přidává vše, co z něj udělá hotový web: adresy stránek, vykreslení na serveru nebo předem, optimalizaci a sestavení. Pro firemní web se hodí, když chcete rychlost a design na míru; když si chcete web skládat sami, je zbytečně složitý.
Aktualizováno
React a Next.js
React je knihovna pro tvorbu uživatelského rozhraní z komponent – tlačítek, formulářů, karet produktů. Sám o sobě neřeší, jak se stránky jmenují, jak se dostanou k vyhledávači ani jak se web nasadí na server. Tyto otázky řeší frameworky a Next.js je jeden z nejrozšířenějších. Vyvíjí ho firma Vercel jako open source.
Co Next.js přidává:
- Směrování – adresa stránky odpovídá složce v projektu, takže struktura webu je vidět už v kódu.
- Vykreslování na serveru a předem – návštěvník i vyhledávač dostanou hotové HTML, ne prázdnou stránku, kterou teprve poskládá JavaScript.
- Optimalizace – komponenty pro obrázky, písma a skripty, rozdělení kódu po stránkách.
- Metadata – titulky, popisy, sitemapa a další podklady pro vyhledávače přímo z kódu.
Způsoby vykreslení stránek
Next.js umí v jednom projektu kombinovat několik přístupů. Každá stránka může vznikat jinak podle toho, jak často se mění:
| Způsob | Kdy stránka vzniká | Na co se hodí |
|---|---|---|
| Statické vykreslení | Při sestavení webu | Obsah, který je pro všechny stejný: služby, ceník, kontakt |
| Dynamické vykreslení | Na serveru při každém požadavku | Stránky podle přihlášeného uživatele nebo aktuálních dat |
| Revalidace (ISR) | Předem, ale po čase nebo na pokyn se obnoví | Katalogy a články, které se mění, ale ne každou vteřinu |
| Vykreslení v prohlížeči | Až u návštěvníka | Interaktivní části: filtry, kalkulačky, přepínače |
Novější verze s takzvaným App Routerem staví na React Server Components: komponenty se ve výchozím stavu vykreslují na serveru a do prohlížeče se posílá JavaScript jen pro interaktivní části. Přesné chování se mezi verzemi vyvíjí, podrobnosti uvádí oficiální dokumentace Next.js.
Statický export
Nastavením output: "export" v konfiguraci Next.js při sestavení vygeneruje hotové soubory HTML, CSS a JavaScriptu do složky out. Výsledek je statický web, který můžete nahrát na jakýkoli server schopný posílat soubory – nepotřebuje Node.js ani databázi.
Daní je, že odpadnou funkce, které potřebují běžící server. Podle dokumentace jde například o dynamické vykreslení na požádání, revalidaci (ISR), serverové akce, přesměrování a hlavičky nastavené v konfiguraci nebo výchozí optimalizaci obrázků. Formulář nebo rezervace se pak řeší samostatnou službou přes API.
Tento web, lagom.cz, je postavený právě na Next.js se statickým exportem a v Lighthouse má na počítači 100/100.
Kdy se Next.js hodí pro firemní web
- chcete vlastní design bez omezení šablony a výbornou rychlost,
- web má časem přerůst v webovou aplikaci – klientskou zónu, rezervace, kalkulačku,
- obsah chodí z více zdrojů (CMS, katalog, API) a má se spojit do jednoho webu,
- o web se stará vývojář nebo studio, které s Reactem pracuje.
Kdy je zbytečně složitý
- Chcete si web skládat sami. Bez vývojáře v Next.js novou stránku nepřidáte; stavebnice nebo WordPress jsou tu přímočařejší.
- Spoléháte na hotové pluginy – pro WordPress existují tisíce doplňků, v Next.js se podobné funkce programují nebo napojují.
- Nikdo nebude hlídat aktualizace. Framework vydává nové verze a velké verze občas vyžadují úpravy kódu. U statického exportu to nespěchá, u aplikace běžící na serveru ano.
Cena webu nezávisí na frameworku
Cenu u nás určuje rozsah, ne nástroj: Vizitkový web vyjde na 15 000 Kč, Web na míru s blogem a napojením na CRM na 35 000 Kč. Aplikační funkce nad rámec ceníku naceníme předem podle rozsahu, hodina práce stojí 1 000 Kč.
Časté otázky
Je Next.js zdarma?
Ano, Next.js je open source s licencí MIT a používat ho můžete i komerčně. Platí se až za hosting, na kterém web nebo aplikace běží, a samozřejmě za práci vývojáře.
Musí web na Next.js běžet u Vercelu?
Nemusí. Vercel Next.js vyvíjí a nabízí pro něj hosting, ale oficiální dokumentace popisuje i provoz na vlastním serveru s Node.js, v kontejneru Docker nebo jako statický export na libovolném webovém serveru. Volba závisí na tom, které funkce web používá.
Upravím si web na Next.js sám jako ve WordPressu?
Samotný Next.js administraci nemá – je to nástroj pro vývojáře. Pokud chcete obsah měnit sami, napojí se na redakční systém, typicky headless CMS. Bez něj změny dělá ten, kdo web spravuje.
Je web na Next.js dobrý pro SEO?
Next.js umí stránky vykreslit na serveru nebo předem, takže vyhledávač dostane hotové HTML. Umí také generovat metadata, sitemapu nebo soubor robots.txt. O výsledku ve vyhledávání ale rozhoduje obsah a jeho kvalita, ne framework.