Turinys[Slėpti][Rodyti]
Renkantis programinės įrangos biblioteką ar sistemą, dažniausiai atsižvelgiama į kūrėjo patirtį.
Kai užsiimu „kūrėjo patirtis“, turiu omenyje, kaip kūrėjai iš tikrųjų atlieka darbą. Kūrėjai pasirenka bibliotekas ar sistemas, kurias malonu naudoti.
Tai viena iš pagrindinių priežasčių, kodėl dabar turime populiariausias bibliotekas ir sistemas. Mums, kūrėjams, nereikia pradėti nuo nulio, kai yra sukurtų įrankių, padedančių mums atlikti užduotis.
Frameworks yra programinės įrangos dalys, kurias kuria ir naudoja kūrėjai programoms kurti, o NextJS yra viena iš jų.
Šiame įraše apžvelgsime Nextjs, pagrindines jo funkcijas ir tai, kaip galime jį naudoti kurdami programą. Įšokime tiesiai.
Kas yra Next.js?
Kitas.js yra „JavaScript“ sistema, skirta greitai ir lengvai kurti statinius tinklalapius ir „React“ pagrindu veikiančias internetines programas. Tai leidžia kurti puikias žiniatinklio programas įvairioms platformoms, įskaitant „Windows“, „Linux“ ir „Mac“.
Turėtumėte būti susipažinę su Next.js sistema, jei esate minimaliai susipažinę su react ir norite sužinoti daugiau apie react ekosistemą.
Nors „Next.js“ yra viskas, ko reikia norint pradėti, galite pasirinkti NPM ir „Yarn“, „JavaScript“ ir „TypeScript“, CSS ir SCSS, statinį eksportavimą ir diegimą be serverio.
Savybės
- Maršrutas atliekamas automatiškai – nieko konfigūruoti nereikia, nes bet koks URL yra susietas su failų sistema, failais puslapių aplanke (žinoma, turite tinkinimo parinkčių).
- Vieno failo komponentai – paprasta pridėti stilių, priskirtų prie komponento, naudojant styled-jsx, kuris yra visiškai integruotas ir sukurtas tos pačios komandos.
- Karštojo kodo įkėlimas iš naujo – kai Next.js aptinka diske išsaugotą modifikaciją, jis iš naujo įkelia puslapį.
- Dinaminiai komponentai – galite dinamiškai įkelti „JavaScript“ modulius ir „React“ komponentus.
- Statinis eksportavimas – „Next.js“ leidžia eksportuoti visiškai statinę svetainę iš programos naudodami kitą eksportavimo komandą.
- Suderinamumas su aplinka – Next.js sklandžiai integruojasi su JavaScript, Node ir React ekosistemomis.
- Automatinis kodų padalijimas – puslapiams pateikti naudojamos tik reikalingos bibliotekos ir „JavaScript“. Užuot sukūręs vieną „JavaScript“ failą, kuriame būtų visas programos kodas, „Next.js“ sumaniai padalija programą į daugybę išteklių.
Kaip sukurti next.js programą?
montavimas
Norėdami įdiegti ir sukurti Next.js projektą, galite naudoti komandą node npx.
Taip bus sukurtas aplankas ir visi failai, konfigūracijos ir kiti elementai, reikalingi Next.js projektui vykdyti.
Galite paleisti programą, kai ji bus sugeneruota.
Puslapiai ir maršrutas
Norėdami tvarkyti maršrutus su Next.js, mums nereikia naudoti maršruto parinkimo sistemos. Nustatyti maršrutą naudojant Next.js yra paprasta. Kai naudojate komandą Create-next-app kurdami naują Next.js programą, pagal numatytuosius nustatymus programa sukuria aplanką, vadinamą puslapiais.
Šiame aplanke „puslapiai“ tvarkote savo maršrutus. Dėl to kiekvienas pakatalogyje esantis reaguoja komponentų failas bus tvarkomas kaip atskiras maršrutas.
Pavyzdžiui, jei aplanke yra šie failai:
- rodyklė.js
- apie.js
- aricles.js
Šis failas bus automatiškai transformuojamas trimis būdais:
- Indekso puslapis localhost/index
- Apie puslapis localhost/about
- Tinklaraščio puslapis localhost/articles
Žemiau pateikiamas apie.js puslapio pavyzdys. Kaip matote, apie puslapį nieko nepateikiama. Tai tiesiog standartinis „React“ funkcinis komponentas.
maršrutai
Norėdami sukurti įdėtus maršrutus, pirmiausia turite sukurti poaplankį. Pavyzdžiui: puslapiai / straipsniai. Tame aplanke sukurkite savo „contact.js“ reakcijos komponentą ir jis sugeneruos puslapį localhost/articles/contact.
Jei vieną failą įdėsite į pages/articles.js, o kitą į pages/articles/index.js. Abu atspindi tą patį kelią localhost/blog. Esant tokiai situacijai, Next.js tiesiog pateiks failą article.js. O dinamiški maršrutai, kuriuose kiekvienas tinklaraščio įrašas turi savo kelią:
- localhost/blog/first-article
- localhost/blog/-antras-straipsnis
Naudodami skliaustų žymėjimą galite apibrėžti dinaminį maršrutą Next.js. Pavyzdžiui: pages/article/[slug].js
Nuorodų maršrutai
Dabar baigėte savo pirmąjį maršrutą. Spėju, kad klausiate, kaip sujungti puslapius su tais maršrutais. Norėdami tai padaryti, jums reikės „kitas / nuoroda“.
Štai pagrindinio puslapio, kuriame yra nuoroda į puslapį „Apie“, pavyzdys:
Jei norite sukurti nuorodos stilių, naudokite šią sintaksę:
Peradresuoti maršrutus
Ką daryti, jei reikia priverstinai peradresuoti į tam tikrą puslapį? Pavyzdžiui, kai paspaudžiamas mygtukas? Tai galite padaryti naudodami „router.push“:
SEO
Žiniatinklio programų puslapiams, be duomenų HTML turinyje, reikalingi meta (head) elementai. Dėl to „React“ programoje reikės įdiegti papildomą reikalavimą, pavadintą „React Helmet“.
Galime naudoti komponentą Head iš next/head in Next, kad lengvai įtrauktume metaduomenis į savo tinklalapius, kurie bus rodomi paieškos rezultatuose ir įterptuose:
komponentai
Jums dažnai reikės kurti komponentus arba maketo failą. Pavyzdžiui, komponentas, kuris pateikia naršymo juostą. Iki šiol mes ką tik naudojome puslapių aplanką. Ką daryti, jei jūsų komponentas nėra skirtas maršruto puslapiui?
Nenorite, kad vartotojas eitų į puslapį, pvz., „localhost“ / „navbar“. Jei komponentą Navbar.js įdėsite į puslapių aplanką, taip ir nutiks. Ką turėtumėte daryti tokioje situacijoje?
Tiesiog išsaugokite visus „ne puslapio“ komponentus atskirame aplanke. Dauguma Next.js projektų naudoja pravardę „komponentai“, o šis aplankas sugeneruojamas jūsų projekto šakniniame aplanke.
Galvos komponentas
Pradinį puslapio įkėlimą serverio pusėje pateikia Next.js. Tai daroma pakeisdama jūsų puslapio HTML. Įtraukta antraštės dalis.
„Next.js Head“ komponentas naudojamas antraštės skyriaus žymoms, pvz., pavadinimui ir meta, suteikti. Šiame išdėstymo komponento pavyzdyje naudojamas komponentas Head.
Sukurti 404 puslapį nerastas
Galima sukurti savo 404 klaidos puslapį. Galbūt norėsite tinkinti pranešimą arba pridėti savo puslapio dizainą. Puslapių aplanke sukurkite 404.js failą.
Įvykus 404 klaidai, Next.js automatiškai nukreips į šį puslapį. Štai suasmeninto 404 puslapio pavyzdys:
Duomenų gavimas iš serverio pusės
Vietoj duomenų atsisiuntimo iš kliento pusės, Next.js leidžia atlikti pradinę duomenų populiaciją, o tai reiškia, kad puslapis bus išsiųstas su duomenimis, jau užpildytais iš serverio.
Turite du pasirinkimus, kaip įdiegti duomenų gavimą iš serverio:
- Duomenys turėtų būti gauti kiekvienoje užklausoje.
- Gauti duomenis tik vieną kartą per visą statybos procesą (statinė svetainė)
Gauti duomenis apie kiekvieną užklausą
Metodas getServerSideProps naudojamas kiekvienai užklausai pateikti serverio pusėje. Ši funkcija gali būti įtraukta į komponento failo pabaigą. Next.js automatiškai užpildys jūsų komponentų rekvizitus objektu getServerSideProps, jei ši funkcija yra jūsų komponento faile.
Gaukite duomenis kūrimo metu
GetStaticProps metodas naudojamas serverio pusėje pateikti kūrimo metu. Ši funkcija gali būti įtraukta į komponento failo pabaigą. Šis metodas paleidžia serverio kodą ir serveriui siunčia GET užklausą, bet tik vieną kartą, kai mūsų projektas bus baigtas.
Kodėl turėtumėte išmokti Next.js?
Viena iš to priežasčių yra ta, kad Next.js sukurtas ant React, priekinio kūrimo įrankių rinkinio kurti vartotojo sąsajas kurie yra mano mėgstamiausias pasirinkimas kuriant žiniatinklio programas.
Tačiau to nepakaktų, jei Next.js nebūtų geras tuo, ką darė... tiesa?
Taigi, ką tiksliai tai daro?
Pirmiausia turime apibrėžti keletą sąvokų, kad ją suprastume. Next.js išpopuliarėjo, nes išsprendė daugelio žiniatinklio kūrėjų problemą, susijusią su kliento žiniatinklio programomis (naršyklėje). Šios vieno puslapio taikomosios programos (SPA) turėjo geresnę patirtį, nes joms nereikėjo, kad vartotojas iš naujo įkeltų puslapį ir leido daugiau interaktyvumo.
Tačiau kadangi didžioji dalis tokios programos medžiagos tampa matoma tik tada, kai ji atliekama naršyklėje, žiniatinklio tikrintuvams sunku suprasti tokios programos tekstinį turinį.
Todėl, nepaisant jų populiarumo, daugelis SPA centrų išliko anonimiški didelėms paieškos sistemoms, tokioms kaip „Google“. „Next.js“ dabar apima patikimesnį integruotą „React“ komponentų atvaizdavimo serverio pusėje (SSR) mechanizmą.
„Next.js“ leidžia kūrėjams kūrimo proceso metu sukurti „JavaScript“ kodą serveryje ir pateikti vartotojui pagrindinį indeksuojamą HTML.
Argumentai "už"
- Puikiai tinka vartotojo patirčiai
- Puikiai tinka SEO
- Sukurkite itin greitą statinę svetainę, kuri elgiasi kaip dinamiška
- Lankstumas kuriant UI ir UX.
- Daug plėtros pranašumų
- Puikus bendruomenės palaikymas
Trūkumai
- Tinklalapiams ar programoms sukurti arba tobulinti tenka tam tikrą laiką.
- Tam tikroms užduotims „Next.js“ netinka. Kūrėjai turėtų turėti galimybę sukurti dinamiškus maršrutus naudodami Node.js įrankius.
Išvada
Kaip matote, Next.js supaprastina React programos kūrimą ir leidžia sutelkti dėmesį į tai, kas svarbiausia – programos logika ir vartotojo sąsaja. Jame yra viskas, ko reikia norint sukurti šiuolaikiškas, daug sąsajų turinčias ir API pagrįstas programas.
Jis taip pat tinka tik turinio projektams, pvz., tinklaraščiams ir verslo svetainėms, nes gali kurti statinius HTML puslapius.
Dabartiniais leidimais „Next.js“ ne tik palaiko aukštą kūrėjo patirties lygį, bet ir suteikia įrankius vizualiniam našumui ir naudotojo patirčiai didinti, užtikrinant šviesią šios sistemos ateitį.
Palikti atsakymą