Obsah[Skrýt][Ukázat]
Při výběru softwarové knihovny nebo rámce se obvykle bere v úvahu zkušenost vývojáře.
Když zmiňuji „zkušenosti vývojáře“, mám na mysli, jak vývojáři skutečně dělají práci. Vývojáři si vybírají knihovny nebo frameworky, které je příjemné používat.
To je jeden z hlavních důvodů, proč nyní máme nejoblíbenější knihovny a frameworky. Jako vývojáři nemusíme začínat od nuly, když existují existující nástroje, které nám pomáhají s našimi úkoly.
Frameworky jsou části softwaru, které vytvářejí a používají vývojáři ke konstrukci aplikací, a NextJS je jedním z nich.
V tomto příspěvku se podíváme na Nextjs, jeho klíčové funkce a jak jej můžeme použít k vytvoření aplikace. Pojďme rovnou do toho.
Co je Next.js?
Další.js je JavaScript framework pro rychlé a snadné vytváření statických webových stránek a online aplikací založených na Reactu. Umožňuje vám navrhovat skvělé webové aplikace pro různé platformy, včetně Windows, Linux a Mac.
Rámec Next.js byste měli znát, pokud jste minimálně obeznámeni s reakcí a chcete se dozvědět více o ekosystému reakce.
Přestože Next.js obsahuje vše, co potřebujete, abyste mohli začít, můžete si vybrat mezi NPM a Yarn, JavaScriptem a TypeScriptem, CSS a SCSS, statickým exportem a nasazením bez serveru.
Funkce
- Směrování se provádí automaticky – nemusíte nic konfigurovat, protože jakákoli adresa URL je mapována na souborový systém, na soubory ve složce stránek (samozřejmě máte možnosti přizpůsobení).
- Komponenty jednoho souboru – Je snadné přidat styly s rozsahem do komponenty pomocí styled-jsx, který je zcela integrovaný a vytvořený stejným týmem.
- Opětovné načtení aktivního kódu – Když Next.js zjistí úpravu uloženou na disku, znovu načte stránku.
- Dynamické komponenty – Můžete dynamicky načítat moduly JavaScriptu a komponenty React.
- Statické exporty – Next.js vám umožňuje exportovat zcela statický web z vaší aplikace pomocí příkazu dalšího exportu.
- Kompatibilita s prostředím – Next.js se hladce integruje s ekosystémy JavaScript, Node a React.
- Automatické rozdělení kódů – K vykreslování stránek se používají pouze požadované knihovny a JavaScript. Namísto vytvoření jediného souboru JavaScript obsahujícího veškerý kód aplikace, Next.js inteligentně rozděluje aplikaci do mnoha zdrojů.
Jak vytvořit aplikaci next.js?
Instalace
K instalaci a sestavení projektu Next.js můžete použít příkaz node npx.
Tím se vygeneruje složka a všechny soubory, konfigurace a další položky potřebné ke spuštění projektu Next.js.
Po vygenerování můžete aplikaci spustit.
Stránky a směrování
Ke zpracování tras pomocí Next.js nepotřebujeme používat směrovací rámec. Nastavení směrování pomocí Next.js je hračka. Když použijete příkaz create-next-app k vytvoření nové aplikace Next.js, aplikace ve výchozím nastavení vytvoří složku s názvem 'pages'.
Tato složka 'stránky' je místo, kde udržujete své trasy. Výsledkem je, že každý soubor složek reakcí v podadresáři bude zpracován jako samostatná cesta.
Pokud složka například obsahuje tyto soubory:
- index.js
- about.js
- aricles.js
Tento soubor bude automaticky transformován třemi způsoby:
- Stránka indexu localhost/index
- Stránka o localhost/about
- Stránka blogu localhost/articles
Níže je uveden příklad stránky about.js. Jak vidíte, o stránce není uvedeno nic. Je to prostě standardní funkční součást Reactu.
trasy
Chcete-li vytvořit vnořené trasy, musíte nejprve vytvořit podsložku. Například: stránky/články. Vytvořte si komponentu reakce 'contact.js' v této složce a ta vygeneruje stránku localhost/articles/contact.
Pokud vložíte jeden soubor do pages/articles.js a další do pages/articles/index.js. Oba odrážejí stejnou cestu localhost/blog. V této situaci Next.js pouze vykreslí soubor article.js. A co dynamické trasy, ve kterých má každý příspěvek na blogu svou vlastní cestu:
- localhost/blog/first-article
- localhost/blog/-second-article
Pomocí zápisu hranatých závorek můžete definovat dynamickou trasu v Next.js. Například: stránky/článek/[slug].js
Link Trasy
Nyní jste dokončili svou první trasu. Předpokládám, že se ptáte, jak připojit stránky k těm trasám. K tomu budete potřebovat 'další/odkaz'.
Zde je příklad domovské stránky, která obsahuje odkaz na stránku O aplikaci:
Pokud chcete upravit styl odkazu, použijte následující syntaxi:
Přesměrování tras
Co když potřebujete vynutit přesměrování na určitou stránku? Například, když se stiskne tlačítko? Můžete to provést pomocí 'router.push':
SEO
Stránky ve webových aplikacích vyžadují kromě dat v těle HTML také prvky meta (head). To bude vyžadovat instalaci zvláštního požadavku s názvem React Helmet v aplikaci React.
Komponentu Head from next/head in Next můžeme použít ke snadnému přidávání metadat na naše webové stránky, které se zobrazí ve výsledcích vyhledávání a vložení:
Komponenty
Často budete muset vyvinout komponenty nebo soubor rozložení. Například komponenta, která vykresluje navigační panel. Zatím jsme používali pouze složku stránek. Co když vaše komponenta nemá být stránkou trasy?
Nechcete, aby uživatel přecházel na stránku, jako je localhost/navbar. Pokud umístíte komponentu Navbar.js do složky pages, stane se to. Co byste měli v dané situaci dělat?
Jednoduše uložte všechny své součásti „není stránka“ do samostatné složky. Většina projektů Next.js používá přezdívku 'komponenty' a tato složka je generována v kořenové složce vašeho projektu.
Hlavová součást
Počáteční načtení stránky je vykresleno pomocí Next.js na straně serveru. Dělá to úpravou kódu HTML vaší stránky. Je zahrnuta sekce záhlaví.
Komponenta Next.js Head se používá k poskytování značek sekce záhlaví, jako je název a meta. V tomto příkladu komponenty Layout je použita komponenta Head.
Vytvořit stránku 404 nenalezena
Je možné vytvořit si vlastní chybovou stránku 404. Možná budete chtít upravit zprávu nebo přidat vlastní design stránky. Ve složce pages vytvořte soubor 404.js.
Když dojde k chybě 404, Next.js automaticky přesměruje na tuto stránku. Zde je příklad personalizované stránky 404:
Načítání dat ze strany serveru
Namísto stahování dat na straně klienta vám Next.js umožňuje provést počáteční naplnění dat, což znamená odeslání stránky s již naplněnými daty ze serveru.
Pro implementaci načítání dat na straně serveru máte dvě možnosti:
- Data by měla být načtena při každém požadavku.
- Získejte data pouze jednou během procesu výstavby (statické místo)
Načíst data pro každý požadavek
Metoda getServerSideProps se používá k vykreslení každého požadavku na straně serveru. Tato funkce může být zahrnuta na konec souboru komponenty. Next.js automaticky naplní vaše součásti rekvizit objektem getServerSideProps, pokud je tato funkce přítomna v souboru součásti.
Načíst data v době sestavení
Metoda getStaticProps se používá k vykreslení na straně serveru v době sestavení. Tato funkce může být zahrnuta na konec souboru komponenty. Tato metoda spustí kód serveru a odešle na server požadavek GET, ale pouze jednou, když je náš projekt dokončen.
Proč byste se měli naučit Next.js?
Jedním z důvodů je to, že Next.js je postaven na Reactu, přední vývojové sadě pro vytváření uživatelských rozhraní které jsou mojí oblíbenou volbou pro navrhování webových aplikací.
Ale to by nestačilo, kdyby Next.js nebyl dobrý v tom, co udělal… že?
Takže, co přesně dělá?
Abychom to pochopili, musíme nejprve definovat několik pojmů. Next.js získal popularitu, protože vyřešil problém, který měl mnoho webových vývojářů s webovými aplikacemi na straně klienta (v prohlížeči). Tyto jednostránkové aplikace (SPA) měly lepší zkušenost, protože nepotřebovaly, aby uživatel znovu načítal stránku, a umožňovaly větší interaktivitu.
Protože však většina materiálu v aplikaci, jako je tato, je viditelná pouze tehdy, když je spuštěna v prohlížeči, mají webové prohledávače potíže s porozuměním textového obsahu takové aplikace.
Výsledkem bylo, že navzdory své popularitě zůstalo mnoho SPA pro velké vyhledávače, jako je Google, do značné míry anonymní. Next.js nyní obsahuje robustnější vestavěný mechanismus pro vykreslování na straně serveru (SSR) komponent React.
Next.js umožňuje vývojářům vytvářet kód JavaScript na serveru během procesu sestavování a poskytovat uživateli základní indexovatelné HTML.
Klady
- Skvělé pro uživatelskou zkušenost
- Skvělé pro SEO
- Vytvořte super rychlý statický web, který se chová jako dynamický
- Flexibilita při vytváření UI & UX.
- Mnoho vývojových výhod
- Skvělá podpora komunity
Nevýhody
- Webové stránky nebo aplikace mají určitý čas na vytvoření nebo vývoj.
- Pro určité úkoly je Next.js nedostatečný. Vývojáři by měli být schopni vytvářet dynamické trasy pomocí nástrojů Node.js.
Proč investovat do čističky vzduchu?
Jak můžete vidět, Next.js zjednodušuje vývoj aplikací React a umožňuje vám soustředit se na to nejdůležitější – logiku vaší aplikace a uživatelské rozhraní. Zahrnuje vše potřebné k vytváření moderních aplikací s bohatým frontendem a API.
Je také vhodný pro projekty zaměřené pouze na obsah, jako jsou blogy a obchodní weby, díky své schopnosti vytvářet statické stránky HTML.
Se současnými edicemi si Next.js nejen udržuje vysokou úroveň vývojářských zkušeností, ale také poskytuje nástroje pro zvýšení vizuálního výkonu a uživatelské zkušenosti, což tomuto frameworku zajišťuje světlou budoucnost.
Napsat komentář