Saturs[Paslēpt][Rādīt]
Izvēloties programmatūras bibliotēku vai sistēmu, parasti tiek ņemta vērā izstrādātāja pieredze.
Kad es pieminu “izstrādātāju pieredzi”, es runāju par to, kā izstrādātāji faktiski veic darbu. Izstrādātāji izvēlas bibliotēkas vai ietvarus, kurus ir patīkami lietot.
Tas ir viens no galvenajiem iemesliem, kāpēc mums tagad ir vispopulārākās bibliotēkas un ietvari. Mums kā izstrādātājiem nav jāsāk no nulles, ja ir izveidoti rīki, kas palīdz mums veikt uzdevumus.
Ietvari ir programmatūras daļas, ko izstrādā un izmanto izstrādātāji, lai izveidotu lietojumprogrammas, un NextJS ir viena no tām.
Šajā ziņā mēs apskatīsim Nextjs, tā galvenās funkcijas un to, kā mēs varam to izmantot, lai izveidotu lietojumprogrammu. Iesim tieši iekšā.
Kas ir Next.js?
Next.js ir JavaScript ietvars ātrai un vienkāršai statisku tīmekļa lapu un uz React balstītu tiešsaistes lietojumprogrammu izveidei. Tas ļauj jums izveidot lieliskas tīmekļa lietotnes dažādām platformām, tostarp Windows, Linux un Mac.
Ja jums ir minimālas zināšanas par react un vēlaties uzzināt vairāk par react ekosistēmu, jums ir jāpārzina Next.js ietvars.
Lai gan Next.js ir aprīkots ar visu, kas nepieciešams darba sākšanai, varat izvēlēties starp NPM un Yarn, JavaScript un TypeScript, CSS un SCSS, statisko eksportēšanu un izvietošanu bez servera.
Apkalpošana
- Maršrutēšana tiek veikta automātiski — jums nekas nav jākonfigurē, jo jebkurš URL ir piesaistīts failu sistēmai, failiem mapē lapas (jums, protams, ir pielāgošanas iespējas).
- Viena faila komponenti — ir vienkārši pievienot komponentam ietvertos stilus, izmantojot styled-jsx, ko pilnībā integrē un izstrādā viena un tā pati komanda.
- Karstā koda atkārtota ielāde — kad Next.js konstatē diskā saglabātu modifikāciju, tā atkārtoti ielādē lapu.
- Dinamiskie komponenti — varat dinamiski ielādēt JavaScript moduļus un reakcijas komponentus.
- Statiskā eksportēšana — Next.js ļauj eksportēt no lietotnes pilnīgi statisku vietni, izmantojot nākamo eksportēšanas komandu.
- Saderība ar vidi — Next.js nemanāmi integrējas ar JavaScript, Node un React ekosistēmām.
- Automātiska kodu sadalīšana — lapu renderēšanai tiek izmantotas tikai nepieciešamās bibliotēkas un JavaScript. Tā vietā, lai izveidotu vienu JavaScript failu, kurā ietverts viss lietotnes kods, Next.js gudri sadala lietotni daudzos resursos.
Kā izveidot next.js lietojumprogrammu?
uzstādīšana
Varat izmantot komandu node npx, lai instalētu un izveidotu Next.js projektu.
Tādējādi tiks izveidota mape un visi faili, konfigurācijas un citi vienumi, kas nepieciešami Next.js projekta palaišanai.
Varat palaist lietotni, kad tā ir ģenerēta.
Lapas un maršrutēšana
Lai apstrādātu maršrutus ar Next.js, mums nav jāizmanto maršrutēšanas sistēma. Maršrutēšana ar Next.js ir vienkārša iestatīšana. Ja izmantojat komandu Create-next-app, lai izveidotu jaunu lietotni Next.js, programma pēc noklusējuma izveido mapi ar nosaukumu “lapas”.
Šī 'lapu' mape ir vieta, kur uzturēt savus maršrutus. Rezultātā katrs apakšdirektorijā esošās reakcijas komponentu fails tiks apstrādāts kā atsevišķs maršruts.
Piemēram, ja mapē ir šie faili:
- index.js
- about.js
- aricles.js
Šis fails tiks automātiski pārveidots trīs veidos:
- Indeksa lapa localhost/index
- Par lapu localhost/about
- Emuāra lapa localhost/articles
Tālāk ir parādīts lapas about.js piemērs. Par lapu nekas nav sniegts, kā redzat. Tas ir vienkārši standarta React funkcionālais komponents.
maršruti
Lai izveidotu ligzdotus maršrutus, vispirms ir jāizveido apakšmape. Piemēram: lapas/raksti. Izveidojiet savu "contact.js" reakcijas komponentu šajā mapē, un tas ģenerēs lapu localhost/articles/contact.
Ja ievietojat vienu failu mapē pages/articles.js un otru - pages/articles/index.js. Abi atspoguļo vienu un to pašu ceļu localhost/emuāru. Šādā situācijā Next.js vienkārši atveidos failu article.js. Kas par dinamiskajiem maršrutiem, kuros katram emuāra ierakstam ir savs ceļš:
- localhost/blog/first-article
- localhost/blog/-otrais-raksts
Izmantojot iekavu apzīmējumu, jūs varat definēt dinamisku maršrutu vietnē Next.js. Piemēram: pages/article/[slug].js
Saites maršruti
Tagad esat pabeidzis savu pirmo maršrutu. Es domāju, ka jūs jautājat, kā savienot lapas ar šiem maršrutiem. Lai to izdarītu, būs nepieciešams “nākamais/saite”.
Šeit ir mājaslapas piemērs, kurā ir ietverta saite uz lapu Par:
Ja vēlaties izveidot saites stilu, izmantojiet šādu sintaksi:
Novirzīt maršrutus
Ko darīt, ja nepieciešams piespiedu kārtā novirzīt uz noteiktu lapu? Piemēram, kad tiek nospiesta poga? To var paveikt, izmantojot 'router.push':
SEO
Tīmekļa lietojumprogrammu lapām papildus datiem HTML pamattekstā ir nepieciešami meta (head) elementi. Tāpēc React lietojumprogrammā būs jāinstalē papildu prasība ar nosaukumu React Helmet.
Mēs varam izmantot Head komponentu no next/head in Next, lai viegli pievienotu metadatus mūsu tīmekļa lapām, kas tiks parādīti meklēšanas rezultātos un iegulti:
sastāvdaļas
Jums bieži būs jāizstrādā komponenti vai izkārtojuma fails. Piemēram, komponents, kas atveido navigācijas joslu. Līdz šim esam tikko izmantojuši lapu mapi. Ko darīt, ja jūsu komponents nav paredzēts kā maršruta lapa?
Jūs nevēlaties, lai lietotājs pārietu uz lapu, piemēram, localhost/navbar. Ja komponentu Navbar.js ievietosit lapu mapē, tas notiks. Kas jums jādara situācijā?
Vienkārši glabājiet visus savus “nav lapas” komponentus atsevišķā mapē. Lielākā daļa Next.js projektu izmanto nosaukumu “komponenti”, un šī mape tiek ģenerēta jūsu projekta saknes mapē.
Galvas sastāvdaļa
Sākotnējo lapas ielādi servera pusē renderē Next.js. Tas tiek darīts, mainot jūsu lapas HTML. Ir iekļauta galvenes sadaļa.
Komponents Next.js Head tiek izmantots, lai piešķirtu galvenes sadaļas tagus, piemēram, nosaukumu un meta. Šajā izkārtojuma komponenta piemērā tiek izmantots komponents Head.
Izveidot 404 lapa nav atrasta
Ir iespējams izveidot savu 404 kļūdu lapu. Iespējams, vēlēsities pielāgot ziņojumu vai pievienot savu lapas dizainu. Mapē lapas izveidojiet failu 404.js.
Kad rodas kļūda 404, Next.js automātiski novirzīs uz šo lapu. Tālāk ir sniegts personalizētas 404 lapas piemērs.
Datu ienešana no servera puses
Tā vietā, lai lejupielādētu datus no klienta puses, Next.js ļauj veikt sākotnējo datu kopu, kas nozīmē, ka ir jānosūta lapa ar datiem, kas jau ir aizpildīti no servera.
Servera puses datu ielādes ieviešanai ir divas iespējas:
- Dati ir jāiegūst pēc katra pieprasījuma.
- Saņemt datus tikai vienu reizi visā būvniecības procesā (statiskā vieta)
Iegūstiet datus par katru pieprasījumu
Katra pieprasījuma renderēšanai servera pusē tiek izmantota metode getServerSideProps. Šo funkciju var iekļaut jūsu komponenta faila beigās. Next.js automātiski aizpildīs jūsu komponentu rekvizītus ar objektu getServerSideProps, ja šī funkcija ir iekļauta jūsu komponenta failā.
Izgūt datus izveides laikā
GetStaticProps metode tiek izmantota, lai renderētu servera puses izveides laikā. Šo funkciju var iekļaut jūsu komponenta faila beigās. Šī metode palaiž servera kodu un nosūta serverim GET pieprasījumu, taču tikai vienu reizi, kad mūsu projekts ir pabeigts.
Kāpēc jums vajadzētu mācīties Next.js?
Viens no iemesliem ir tas, ka Next.js ir izveidots, pamatojoties uz React — priekšgala izstrādes rīku komplektu veidojot lietotāja saskarnes kas ir mana iecienītākā izvēle tīmekļa lietotņu izstrādei.
Bet ar to nepietiktu, ja Next.js nebūtu labs tajā, ko tas darīja... vai ne?
Tātad, ko tieši tas dara?
Vispirms mums ir jādefinē daži jēdzieni, lai to saprastu. Next.js ieguva popularitāti, jo tas atrisināja problēmu, kas daudziem tīmekļa izstrādātājiem bija ar klienta puses tīmekļa lietotnēm (pārlūkprogrammā). Šīs vienas lapas lietojumprogrammas (SP) sniedza labāku pieredzi, jo tām nebija nepieciešams, lai lietotājs atkārtoti ielādētu lapu, un tika nodrošināta lielāka interaktivitāte.
Tomēr, tā kā lielākā daļa materiāla šādā lietotnē kļūst redzama tikai tad, kad tas tiek veikts pārlūkprogrammā, tīmekļa rāpuļprogrammām ir grūti saprast šādas lietotnes teksta saturu.
Rezultātā, neskatoties uz to popularitāti, daudzi ĪAT lielām meklētājprogrammām, piemēram, Google, lielākoties palika anonīmi. Next.js tagad ietver stingrāku iebūvētu mehānismu React komponentu servera puses renderēšanai (SSR).
Next.js ļauj izstrādātājiem konstruēšanas procesā serverī izveidot JavaScript kodu un nodrošināt lietotājam pamata indeksējamu HTML.
Plusi
- Lieliski piemērots lietotāja pieredzei
- Lieliski piemērots SEO
- Izveidojiet īpaši ātru statisku vietni, kas darbojas kā dinamiska
- Elastība UI un UX veidošanā.
- Daudzas attīstības priekšrocības
- Lielisks sabiedrības atbalsts
Mīnusi
- Vietnēm vai lietojumprogrammām ir noteikts laiks, lai tās izveidotu vai izstrādātu.
- Dažiem uzdevumiem Next.js nav piemērots. Izstrādātājiem jāspēj izveidot dinamiskus maršrutus, izmantojot Node.js rīkus.
Secinājumi
Kā redzat, Next.js vienkāršo React lietotņu izstrādi un ļauj koncentrēties uz vissvarīgāko — lietotnes loģiku un lietotāja interfeisu. Tas ietver visu, kas nepieciešams, lai izveidotu mūsdienīgas, ar priekšgalu bagātas un ar API darbināmas lietotnes.
Tā ir piemērota arī tikai satura projektiem, piemēram, emuāriem un biznesa vietnēm, jo tā spēj veidot statiskas HTML lapas.
Ar pašreizējiem izdevumiem Next.js ne tikai uztur augsta līmeņa izstrādātāju pieredzi, bet arī sniedz rīkus vizuālās veiktspējas un lietotāja pieredzes uzlabošanai, nodrošinot šai sistēmai gaišu nākotni.
Atstāj atbildi