Bab lan Paragraf[Singidaken][Tampilake]
Nalika milih perpustakaan piranti lunak utawa kerangka kerja, pengalaman pangembang biasane dianggep.
Nalika aku sebutno "pengalaman pangembang," Aku referring kanggo carane gawe bener nindakake karya. Pangembang milih perpustakaan utawa kerangka kerja sing nyenengake kanggo digunakake.
Iki minangka salah sawijining sebab utama kenapa kita saiki duwe perpustakaan lan kerangka kerja sing paling populer. Minangka pangembang, kita ora kudu miwiti saka nol yen ana alat sing wis digawe kanggo nulungi tugas kita.
Frameworks minangka piranti lunak sing digawe lan digunakake dening pangembang kanggo mbangun aplikasi, lan NextJS minangka salah sawijining.
Ing kirim iki, kita bakal nliti Nextjs, fitur-fitur utama, lan kepiye carane bisa digunakake kanggo nggawe aplikasi. Ayo langsung mlebu.
Apa Next.js?
Sabanjure.js minangka kerangka JavaScript kanggo nggawe kaca web statis kanthi cepet lan gampang lan aplikasi online adhedhasar React. Ngidini sampeyan ngrancang aplikasi Web sing apik kanggo macem-macem platform, kalebu Windows, Linux, lan Mac.
Sampeyan kudu ngerti kerangka Next.js yen sampeyan ora ngerti babagan reaksi lan pengin sinau luwih lengkap babagan ekosistem reaksi.
Sanajan Next.js dilengkapi kabeh sing dibutuhake kanggo miwiti, sampeyan bisa milih ing antarane NPM lan Benang, JavaScript lan TypeScript, CSS lan SCSS, ekspor statis, lan penyebaran tanpa server.
fitur
- Nuntun wis rampung kanthi otomatis - Sampeyan ora perlu ngatur apa-apa amarga sembarang URL wis dipetakan menyang filesystem, kanggo file ing folder kaca (sampeyan duwe pilihan pangaturan dhewe, mesthi).
- Komponen File Tunggal - Iku prasaja kanggo nambah gaya scoped kanggo komponen nggunakake styled-jsx, kang sakabehe terpadu lan diprodhuksi dening tim padha.
- Ngundhuh maneh Kode Panas - Nalika Next.js ndeteksi modifikasi sing disimpen ing disk, bakal mbukak maneh kaca kasebut.
- Komponen Dinamis - Sampeyan bisa mbukak modul JavaScript lan Komponen Reaksi kanthi dinamis.
- Ekspor statis - Next.js ngidini sampeyan ngekspor situs statis saka aplikasi sampeyan kanthi printah ekspor sabanjure.
- Kompatibilitas karo Lingkungan - Next.js terintegrasi kanthi lancar karo ekosistem JavaScript, Node, lan React.
- Pisah Kode Otomatis - Mung perpustakaan lan JavaScript sing dibutuhake digunakake kanggo nerjemahake kaca. Tinimbang nggawe file JavaScript siji sing ngemot kabeh kode app, Next.js kanthi cerdas mbagi aplikasi kasebut dadi akeh sumber daya.
Kepiye carane nggawe aplikasi next.js?
instalasi
Sampeyan bisa nggunakake printah npx simpul kanggo nginstal lan mbangun project Next.js.
Iki bakal ngasilake folder lan kabeh file, konfigurasi, lan item liyane sing dibutuhake kanggo mbukak proyek Next.js.
Sampeyan bisa miwiti app yen wis digawe.
Kaca & Routing
Kanggo nangani rute karo Next.js, kita ora perlu nggunakake framework nuntun. Nuntun karo Next.js gampang diatur. Nalika sampeyan nggunakake printah create-next-app kanggo mbangun aplikasi Next.js anyar, app nggawe folder disebut 'kaca' minangka standar.
Folder 'kaca' iki minangka panggonan sampeyan njaga rute sampeyan. Akibaté, saben file komponen reaksi ing subdirektori bakal ditangani minangka rute sing kapisah.
Contone, yen folder kasebut ngemot file kasebut:
- indeks.js
- babagan.js
- aricles.js
Berkas iki bakal diowahi kanthi otomatis kanthi telung cara:
- Kaca indeks localhost/index
- Kaca babagan localhost/about
- Halaman blog localhost/artikel
Conto kaca about.js kapacak ing ngisor iki. Ora ana sing diwenehake babagan kaca kasebut, kaya sing sampeyan deleng. Iku mung komponen fungsional React standar.
Rute
Kanggo nggawe rute nested, sampeyan kudu nggawe subfolder dhisik. Contone: kaca/artikel. Gawe komponen reaksi 'contact.js' ing folder kasebut, lan bakal ngasilake kaca localhost/articles/contact.
Yen sampeyan sijine file siji ing pages/articles.js lan liyane ing pages/articles/index.js. Loro-lorone nggambarake dalan sing padha localhost / blog. Ing kahanan iki, Next.js mung bakal nerjemahake file article.js. Kepiye babagan rute dinamis, sing saben postingan blog duwe dalan dhewe:
- localhost / blog / artikel pisanan
- localhost/blog/-artikel kapindho
Nggunakake notasi kurung, sampeyan bisa nemtokake rute dinamis ing Next.js. Contone: kaca/artikel/[slug].js
Link Rute
Sampeyan saiki wis ngrampungake rute pisanan. Aku ngira sampeyan takon carane nyambungake kaca menyang rute kasebut. Sampeyan mbutuhake 'sabanjure/link' kanggo nglakoni.
Iki conto kaca ngarep sing kalebu pranala menyang kaca Babagan:
Yen sampeyan pengin nggawe gaya link, gunakake sintaks ing ngisor iki:
Pangalihan Rute
Apa yen sampeyan kudu meksa pangalihan menyang kaca tartamtu? Contone, nalika tombol ditekan? Sampeyan bisa nindakake iki kanthi nggunakake 'router.push':
SEO
Kaca ing aplikasi web mbutuhake unsur meta (kepala) saliyane data ing awak HTML. Iki bakal mbutuhake instalasi syarat tambahan sing jenenge React Helmet ing Aplikasi React.
Kita bisa nggunakake komponen Kepala saka sabanjuré/head ing Sabanjure kanggo gampang nambah metadata menyang kaca web sing bakal ditampilake ing asil panelusuran lan embeds:
komponen
Sampeyan kerep kudu nggawe komponen utawa file tata letak. Contone, komponen sing nggawe navbar. Kita mung nggunakake folder kaca nganti saiki. Apa yen komponen sampeyan ora dimaksudake minangka kaca rute?
Sampeyan ora pengin pangguna navigasi menyang kaca kayata localhost/navbar. Yen sampeyan nyeleh komponen Navbar.js ing folder kaca, sing bakal kelakon. Apa sing kudu ditindakake ing kahanan kasebut?
Cukup simpen kabeh komponen 'dudu kaca' ing folder sing kapisah. Umume proyek Next.js nggunakake 'komponen' moniker, lan folder iki digawe ing folder root proyek sampeyan.
Komponen sirah
Muatan kaca wiwitan diwenehake dening Next.js ing sisih server. Iki ditindakake kanthi ngowahi HTML kaca sampeyan. Bagean header kalebu.
Komponen Next.js Head digunakake kanggo menehi tag bagean header kayata judhul lan meta. Komponen Kepala digunakake ing conto komponen Tata letak iki.
Nggawe 404 kaca ora ditemokake
Sampeyan bisa nggawe kaca kesalahan 404 sampeyan dhewe. Sampeyan bisa uga pengin ngatur pesen utawa nambah desain kaca sampeyan dhewe. Ing folder kaca, gawe file 404.js.
Nalika ana kesalahan 404, Next.js bakal kanthi otomatis pangalihan menyang kaca iki. Iki conto kaca 404 sing dipersonalisasi:
Njupuk Data saka sisih server
Tinimbang ndownload data ing sisih klien, Next.js ngidini sampeyan nindakake populasi data awal, sing tegese ngirim kaca kanthi data sing wis diisi saka server.
Sampeyan duwe rong pilihan kanggo ngetrapake data ing sisih server:
- Data kudu dijupuk ing saben panjalukan.
- Mung entuk data sapisan sajrone proses konstruksi (situs statis)
Njupuk data ing saben panjalukan
Cara getServerSideProps digunakake kanggo nerjemahake saben panjalukan ing sisih server. Fungsi iki bisa dilebokake ing mburi file komponen sampeyan. Next.js bakal kanthi otomatis isi props komponen karo obyek getServerSideProps yen fungsi kasebut ana ing file komponen sampeyan.
Njupuk data ing wektu mbangun
Cara getStaticProps digunakake kanggo nerjemahake sisih server ing wektu mbangun. Fungsi iki bisa dilebokake ing mburi file komponen sampeyan. Cara iki mbukak kode server lan ngirim panjalukan GET menyang server, nanging mung sapisan nalika proyek wis rampung.
Napa sampeyan kudu sinau Next.js?
Salah sawijining alasan kanggo iki yaiku amarga Next.js dibangun ing ndhuwur React, toolkit pangembangan ngarep kanggo nggawe antarmuka panganggo iku pilihan favoritku kanggo ngrancang aplikasi web.
Nanging ora bakal cukup yen Next.js ora apik ing apa sing ditindakake… bener?
Dadi, apa sing ditindakake?
Kita kudu nemtokake sawetara konsep dhisik supaya bisa dingerteni. Next.js entuk popularitas amarga ngrampungake masalah sing ditindakake dening akeh pangembang web karo aplikasi web sisih klien (ing browser). Aplikasi Single-Page (SPA) iki nduweni pengalaman sing luwih apik amarga ora mbutuhake pangguna kanggo ngisi maneh kaca kasebut lan ngidini interaktivitas luwih akeh.
Nanging, amarga akeh materi ing aplikasi kaya iki mung katon nalika dileksanakake ing browser, crawler web angel ngerteni isi teks saka aplikasi kasebut.
Akibaté, senadyan popularitasé, akeh SPA tetep anonim kanggo mesin telusur gedhe kayata Google. Next.js saiki kalebu mekanisme sing dibangun ing sisih server (SSR) komponen React sing luwih kuat.
Next.js ngidini pangembang mbangun kode JavaScript ing server sajrone proses mbangun lan nyedhiyakake HTML dhasar sing bisa diindeks kanggo pangguna.
Pros
- Apik kanggo pangguna-pengalaman
- Apik kanggo SEO
- Mbangun situs web statis super-cepet sing tumindak kaya dinamis
- Fleksibilitas ing mbangun UI & UX.
- Akeh kaluwihan pembangunan
- Dhukungan komunitas gedhe
cons
- Situs web utawa aplikasi duwe wektu tartamtu kanggo mbangun utawa ngembangake.
- Kanggo tugas tartamtu, Next.js ora cukup. Pangembang kudu bisa mbangun rute dinamis nggunakake alat Node.js.
kesimpulan
Kaya sing sampeyan ngerteni, Next.js nyederhanakake pangembangan aplikasi React lan ngidini sampeyan fokus ing apa sing paling penting - logika aplikasi lan UI. Iki kalebu kabeh sing dibutuhake kanggo nggawe aplikasi kontemporer, sugih frontend lan API.
Iku uga cocok kanggo proyek mung isi, kayata blog lan situs web bisnis, amarga kemampuan kanggo mbangun kaca HTML statis.
Kanthi edisi saiki, Next.js ora mung njaga tingkat pengalaman pangembang sing dhuwur nanging uga menehi alat kanggo nambah kinerja visual lan pengalaman pangguna, njamin masa depan sing cerah kanggo kerangka kerja iki.
Ninggalake a Reply