Obsah[Skryť][Šou]
Pri výbere softvérovej knižnice alebo rámca sa zvyčajne berie do úvahy skúsenosť vývojára.
Keď spomínam „skúsenosti vývojárov“, mám na mysli, ako vývojári v skutočnosti robia prácu. Vývojári si vyberajú knižnice alebo rámce, ktoré je príjemné používať.
Toto je jeden z hlavných dôvodov, prečo máme teraz najobľúbenejšie knižnice a rámce. Ako vývojári nemusíme začínať od nuly, keď existujú existujúce nástroje, ktoré nám pomáhajú s našimi úlohami.
Frameworky sú časti softvéru, ktoré vytvárajú a používajú vývojári na vytváranie aplikácií, a NextJS je jedným z nich.
V tomto príspevku prejdeme cez Nextjs, jeho kľúčové funkcie a ako ho môžeme použiť na zostavenie aplikácie. Poďme rovno do toho.
Čo je Next.js?
Next.js je JavaScript framework na rýchle a jednoduché vytváranie statických webových stránok a online aplikácií založených na React. Umožňuje vám navrhovať skvelé webové aplikácie pre rôzne platformy vrátane Windows, Linux a Mac.
Rámec Next.js by ste mali poznať, ak máte minimálne znalosti o reakcii a chcete sa dozvedieť viac o ekosystéme reakcie.
Aj keď Next.js obsahuje všetko, čo potrebujete, aby ste mohli začať, môžete si vybrať medzi NPM a Yarn, JavaScript a TypeScript, CSS a SCSS, statickým exportom a nasadením bez servera.
Vlastnosti
- Smerovanie sa vykonáva automaticky – nemusíte nič konfigurovať, pretože každá adresa URL je namapovaná na súborový systém, na súbory v priečinku stránok (samozrejme máte možnosti prispôsobenia).
- Komponenty jedného súboru – Je jednoduché pridať štýly s rozsahom do komponentu pomocou styled-jsx, ktorý je úplne integrovaný a vytvorený tým istým tímom.
- Opätovné načítanie horúceho kódu – Keď Next.js zistí modifikáciu uloženú na disku, znova načíta stránku.
- Dynamické komponenty – Môžete dynamicky načítať moduly JavaScript a komponenty React.
- Statické exporty – Next.js vám umožňuje exportovať úplne statickú stránku z vašej aplikácie pomocou príkazu na ďalší export.
- Kompatibilita s prostredím – Next.js sa bezproblémovo integruje do ekosystémov JavaScript, Node a React.
- Automatické rozdelenie kódov – Na vykreslenie stránok sa používajú iba potrebné knižnice a JavaScript. Namiesto vytvorenia jedného súboru JavaScript, ktorý obsahuje celý kód aplikácie, Next.js inteligentne rozdeľuje aplikáciu do mnohých zdrojov.
Ako vytvoriť aplikáciu next.js?
inštalácia
Na inštaláciu a zostavenie projektu Next.js môžete použiť príkaz node npx.
Tým sa vygeneruje priečinok a všetky súbory, konfigurácie a ďalšie položky potrebné na spustenie projektu Next.js.
Aplikáciu môžete spustiť po jej vygenerovaní.
Stránky a smerovanie
Na spracovanie trás pomocou Next.js nepotrebujeme použiť smerovací rámec. Nastavenie smerovania pomocou Next.js je hračka. Keď použijete príkaz create-next-app na vytvorenie novej aplikácie Next.js, aplikácia vytvorí priečinok s názvom „pages“ predvolene.
Tento priečinok „stránky“ je miestom, kde si udržiavate svoje trasy. Výsledkom je, že každý súbor komponentov reakcií v podadresári bude spracovaný ako samostatná cesta.
Napríklad, ak priečinok obsahuje tieto súbory:
- index.js
- about.js
- aricles.js
Tento súbor bude automaticky transformovaný tromi spôsobmi:
- Stránka indexu localhost/index
- Stránka o localhost/about
- Stránka blogu localhost/články
Príklad stránky about.js je uvedený nižšie. Ako vidíte, o stránke nie je nič poskytnuté. Je to jednoducho štandardný funkčný komponent React.
trasy
Ak chcete vytvoriť vnorené trasy, musíte najprv vytvoriť podpriečinok. Napríklad: stránky/články. Vytvorte si komponent reakcie 'contact.js' v tomto priečinku a vygeneruje stránku localhost/articles/contact.
Ak vložíte jeden súbor do pages/articles.js a ďalší do pages/articles/index.js. Obe odrážajú rovnakú cestu localhost/blog. V tejto situácii Next.js vykreslí iba súbor article.js. A čo dynamické trasy, v ktorých má každý blogový príspevok svoju vlastnú cestu:
- localhost/blog/first-article
- localhost/blog/-second-article
Pomocou zápisu v zátvorkách môžete definovať dynamickú trasu v súbore Next.js. Napríklad: stránky/článok/[slug].js
Link Trasy
Teraz ste dokončili svoju prvú trasu. Predpokladám, že sa pýtate, ako pripojiť stránky k tým trasám. Na to budete potrebovať 'ďalší/odkaz'.
Tu je príklad domovskej stránky, ktorá obsahuje odkaz na stránku Informácie:
Ak chcete upraviť štýl odkazu, použite nasledujúcu syntax:
Presmerovanie trás
Čo ak potrebujete vynútiť presmerovanie na určitú stránku? Napríklad, keď sa stlačí tlačidlo? Môžete to dosiahnuť pomocou 'router.push':
SEO
Stránky vo webových aplikáciách vyžadujú okrem údajov v tele HTML aj prvky meta (head). To si vyžiada inštaláciu dodatočnej požiadavky s názvom React Helmet v aplikácii React.
Komponent Head from next/head in Next môžeme použiť na jednoduché pridávanie metadát na naše webové stránky, ktoré sa budú zobrazovať vo výsledkoch vyhľadávania a vložení:
komponenty
Často budete musieť vyvinúť komponenty alebo súbor rozloženia. Napríklad komponent, ktorý vykresľuje navigačný panel. Doteraz sme používali iba priečinok stránok. Čo ak váš komponent nemá byť stránkou trasy?
Nechcete, aby používateľ prešiel na stránku, ako je napríklad localhost/navbar. Ak umiestnite komponent Navbar.js do priečinka stránok, stane sa to. Čo by ste mali v danej situácii urobiť?
Jednoducho uložte všetky svoje súčasti „nie je stránka“ do samostatného priečinka. Väčšina projektov Next.js používa prezývku „komponenty“ a tento priečinok sa generuje v koreňovom priečinku vášho projektu.
Hlavový komponent
Počiatočné načítanie stránky vykreslí Next.js na strane servera. Robí to úpravou kódu HTML vašej stránky. Časť hlavičky je zahrnutá.
Komponent Next.js Head sa používa na poskytnutie značiek sekcie hlavičky, ako je názov a meta. Komponent Head je použitý v tomto príklade komponentu Layout.
Stránka Create 404 sa nenašla
Je možné vytvoriť si vlastnú chybovú stránku 404. Možno budete chcieť prispôsobiť správu alebo pridať vlastný dizajn stránky. V priečinku pages vytvorte súbor 404.js.
Keď sa vyskytne chyba 404, Next.js automaticky presmeruje na túto stránku. Tu je príklad prispôsobenej stránky 404:
Načítavanie údajov zo strany servera
Namiesto sťahovania údajov na strane klienta vám Next.js umožňuje vykonať počiatočnú populáciu údajov, čo znamená odoslanie stránky s už naplnenými údajmi zo servera.
Na implementáciu načítavania údajov na strane servera máte dve možnosti:
- Údaje by sa mali načítať pri každej žiadosti.
- Získajte údaje iba raz počas procesu výstavby (statická lokalita)
Načítajte údaje o každej žiadosti
Metóda getServerSideProps sa používa na vykreslenie každej požiadavky na strane servera. Táto funkcia môže byť zahrnutá na konci vášho komponentného súboru. Next.js automaticky naplní vaše komponenty rekvizity objektom getServerSideProps, ak je táto funkcia prítomná vo vašom komponentnom súbore.
Načítajte údaje v čase zostavovania
Metóda getStaticProps sa používa na vykreslenie na strane servera v čase zostavovania. Táto funkcia môže byť zahrnutá na konci vášho komponentného súboru. Táto metóda spustí kód servera a odošle požiadavku GET na server, ale iba raz, keď je náš projekt dokončený.
Prečo by ste sa mali naučiť Next.js?
Jedným z dôvodov je to, že Next.js je postavený na React, súprave front-endových vývojových nástrojov pre vytváranie používateľských rozhraní ktoré sú mojou obľúbenou voľbou pri navrhovaní webových aplikácií.
Ale to by nestačilo, keby Next.js nebol dobrý v tom, čo robil... však?
Takže, čo presne robí?
Najprv musíme definovať niekoľko pojmov, aby sme to pochopili. Next.js si získal popularitu, pretože vyriešil problém, ktorý mali mnohí weboví vývojári s webovými aplikáciami na strane klienta (v prehliadači). Tieto jednostránkové aplikácie (SPA) mali lepšiu skúsenosť, pretože nepotrebovali, aby používateľ znova načítal stránku, a umožnili väčšiu interaktivitu.
Keďže však väčšina materiálu v aplikácii, ako je táto, je viditeľná iba vtedy, keď je vykonaná v prehliadači, webové prehľadávače majú problém porozumieť textovému obsahu takejto aplikácie.
Výsledkom je, že napriek svojej popularite zostali mnohé SPA pre veľké vyhľadávače, ako je Google, do značnej miery anonymné. Next.js teraz obsahuje robustnejší vstavaný mechanizmus na server-side rendering (SSR) komponentov React.
Next.js umožňuje vývojárom zostaviť kód JavaScript na serveri počas procesu zostavovania a poskytnúť používateľovi základné, indexovateľné HTML.
Pros
- Skvelé pre užívateľskú skúsenosť
- Skvelé pre SEO
- Vytvorte super rýchly statický web, ktorý sa správa ako dynamický
- Flexibilita pri budovaní UI & UX.
- Veľa vývojových výhod
- Skvelá podpora komunity
Zápory
- Webové stránky alebo aplikácie majú určitý čas na vytvorenie alebo vývoj.
- Pre určité úlohy je Next.js neadekvátny. Vývojári by mali byť schopní vytvárať dynamické trasy pomocou nástrojov Node.js.
záver
Ako môžete vidieť, Next.js zjednodušuje vývoj aplikácií React a umožňuje vám sústrediť sa na to, na čom najviac záleží – na logiku aplikácie a používateľské rozhranie. Zahŕňa všetko potrebné na vytváranie súčasných aplikácií bohatých na frontend a API.
Je tiež vhodný pre projekty zamerané len na obsah, ako sú blogy a obchodné webové stránky, vďaka svojej schopnosti vytvárať statické stránky HTML.
Vďaka súčasným vydaniam si Next.js nielen zachováva vysokú úroveň skúseností vývojárov, ale poskytuje aj nástroje na zvýšenie vizuálneho výkonu a používateľského zážitku, čím zaisťuje tomuto rámcu svetlú budúcnosť.
Nechaj odpoveď