Stránky, které se načítají nějakou dobu, mohou být nepříjemné pro vaše návštěvníky i pro Google. Rychlosti načítání pomáhají určit vaši pozici ve výsledcích vyhledávání, což zase ovlivňuje, kolik návštěvníků váš web získá. Čím méně návštěvníků získáte, tím nižší budou vaše tržby.
Rámec JavaScriptu, jako je Next.js, vám může pomoci zvýšit rychlost webu a poskytnout uživatelům ten nejlepší zážitek. Next.js má spoustu funkcí, díky kterým je tou nejlepší volbou pro vytváření rychlých webových stránek.
Co je Next.js?
Next.js je open-source framework postavený na Node.js, který vám umožňuje vytvářet aplikace React, které můžete vykreslovat na serveru. Poskytuje nástroje a konfiguraci, které potřebujete k vytváření rychlých aplikací React šetrných k SEO.
Ať už chcete vytvářet statické stránky, aplikace pro elektronický obchod nebo načítat data z rozhraní API, Next.js vám může pomoci. Umožňuje vám přejít z jednoho řádku kódu na plnohodnotnou aplikaci s malou konfigurací.
To je hlavní výhoda Next.js. Jakmile jej nainstalujete, můžete začít vytvářet rychlé produkční aplikace.
Výhody používání Next.js
Níže jsou uvedeny některé výhody používání Next.js:
Mělká křivka učení
Next.js je obal React, což znamená, že rozšiřuje syntaxi kódu Reactu. Vývojáři Reactu to tedy mohou celkem snadno vychytat. A stejně jako React, i Next.js má příkaz create-next-app, který můžete spustit a rychle vytvořit novou aplikaci Next.
Spusťte v terminálu následující příkaz a Next.js nainstaluje potřebné balíčky a vytvoří soubory, abyste mohli začít.
npx vytvořit-další-aplikujte své-další-aplikace-název
Předběžné vykreslování
JavaScriptové rámce jako React, Angular a Vue popularizované vykreslování na straně klienta. Jedná se o metodu vykreslování, kdy server odesílá shell HTML a balíček JavaScriptu. Tento kód pak běží v prohlížeči a aktualizuje dokument v procesu zvaném hydratace.
Protože vykreslování probíhá na zařízení uživatele, aplikace CSR mohou být pomalé. Next.js poskytuje řešení prostřednictvím předběžného vykreslování. Namísto vytváření uživatelského rozhraní na straně klienta jej Next.js sestaví předem na serveru.
Existují dva typy předběžného vykreslování:
- Vykreslování na straně serveru (SSR)
- Generování statického webu (SSG)
V SSR server vytvoří HTML, načte veškerý dynamický obsah a poté jej odešle do prohlížeče. Server to dělá pro každý příchozí požadavek. SSR se proto nejlépe používá pro neustále se měnící data.
Stránky SSR mohou být pomalé v závislosti na množství dat, které aplikace potřebuje načíst ze serveru, a na úrovni výkonu serveru. Prostřednictvím getServerSideProps() v Next.js můžete použít SSR pouze pro stránky, které to potřebují.
S SSG aplikace předběžně načte všechna data během sestavení. Poté generuje HTML stránky a obsluhuje je pro více požadavků. Je to velmi rychlé, protože jakmile server vygeneruje všechny stránky, může je CDN uložit do mezipaměti a obsloužit je.
Z tohoto důvodu je SSG ideální pro statické stránky, jako jsou vstupní stránky. Pro statické stránky, že spotřebovávat data z API, Next.js umožňuje načíst data během doby sestavování pomocí getStaticProps().
Oba tyto způsoby vykreslování mají své výhody. V závislosti na případu použití vám Next.js umožňuje kombinovat je na základě jednotlivých stránek.
Vestavěné směrování
Next.js používá souborový systém směrování. Server automaticky převede všechny soubory uložené ve složce Pages na trasy. To je na rozdíl od aplikací React, které vyžadují instalaci Reagovat router a jeho konfiguraci.
Kromě toho React podporuje směrování na straně klienta přes komponent. Předběžně také načte stránky, jejichž odkazy jsou ve zobrazované oblasti. Toto je pouze pro stránky používající SSG, ale i tak se díky této funkci zdá navigace z jedné stránky na druhou velmi rychlá.
Automatické dělení kódu
Rozdělení kódu se týká rozdělení souborů svazku na bloky, které můžete líně načítat na vyžádání. Next.js automaticky řeší rozdělení kódu. Next.js automaticky rozdělí každý soubor ve složce Pages do vlastního balíčku. Kromě toho je jakýkoli kód sdílený mezi stránkami spojen do jednoho, aby se zabránilo stažení stejného kódu.
Rozdělení kódu snižuje počáteční dobu načítání, protože prohlížeč musí stahovat pouze malé množství dat.
Vestavěná optimalizace obrazu
Silné obrázky mohou zpomalit váš web a snížit jeho hodnocení na Googlu. S Next.js můžete použít komponentu obrázku k automatické optimalizaci obrázků.
import obraz z 'další/obrázek'
Tato komponenta slouží pro obrázky ve správné velikosti a moderní formáty jako webp pokud to prohlížeč podporuje. Obrázky se také načítají, pouze když je uživatel posune do zobrazení. Tím se optimalizuje rychlost stránky a šetří místo na zařízení uživatele.
Vestavěná podpora CSS
Next.js podporuje CSS moduly a Sass z krabice. Nemusíte trávit čas jeho konfigurací a můžete přejít rovnou k psaní CSS stylů. Next.js také přichází s styled-jsx, který vám umožňuje psát CSS přímo do vaší komponenty.
Rostoucí komunita
Vzhledem k tomu, že Next.js je postaven na Reactu, získává poměrně rychle na popularitě. Existuje proto rostoucí komunita vývojářů ochotných pomoci, pokud uvíznete. To v kombinaci s vynikající dokumentací zajišťuje, že s Next.js mohou snadno začít i začátečníci.
Kdy byste měli použít Next.js?
Jednou z nejlepších věcí na Next.js jsou možnosti vykreslování. Nejste vázáni na CSR, SSR nebo SSG a můžete si vybrat, které stránky chcete vykreslit na straně serveru, klienta nebo které chcete být zcela statické.
Z tohoto důvodu můžete přizpůsobit, jak se každá stránka ve vaší aplikaci vykresluje na základě jejích potřeb. Můžete například vykreslit stránky, které se spoléhají na neustále se měnící data, pomocí SSR a vykreslit statickou stránku, jako je přihlašovací stránka, pomocí SSG.
Next.js přichází s mnoha vestavěnými funkcemi a extra konfigurací, která vám umožní okamžitě začít přidávat funkce. Nemusíte si dělat starosti s konfigurací tras vaší aplikace, optimalizací obrázků nebo rozdělováním souborů balíků. Všechno je hotovo za vás.
Pokud chcete vytvářet aplikace React, které konzumují dynamický obsah a nechcete trávit čas nastavení věcí, instalace balíčků nebo konfigurace aplikace tak, aby byla rychlá, Next.js je nejlepší řešení. Pokud však vytváříte statickou jednostránkovou aplikaci, obyčejná React je stále dobrou volbou.
Vytváření aplikací s React
Next.js má vestavěné optimalizační funkce a nástroje, které z něj dělají skvělý rámec pro vytváření vysoce výkonných aplikací React.
Pokud chcete začít vidět tyto funkce v akci a nevíte, kde začít, začněte tím, že se naučíte vytvářet aplikace React. Protože syntaxe kódu je téměř stejná, budete mít lepší zkušenost s učením Next.js.