Daptar eusi[Sumputkeun][Témbongkeun]
Nalika milih perpustakaan software atanapi kerangka, pangalaman pamekar biasana dipertimbangkeun.
Nalika kuring nyebatkeun "pangalaman pamekar," Kuring ngarujuk kana kumaha pamekar sabenerna ngalakukeun padamelan éta. Pamekar milih perpustakaan atanapi kerangka anu pikaresepeun pikeun dianggo.
Ieu mangrupikeun salah sahiji alesan utama naha urang ayeuna ngagaduhan perpustakaan sareng kerangka anu paling populér. Salaku pamekar, urang henteu kedah ngamimitian ti mimiti nalika aya alat anu tos didamel pikeun ngabantosan tugas urang.
Frameworks mangrupikeun potongan parangkat lunak anu diciptakeun sareng dianggo ku pamekar pikeun ngawangun aplikasi, sareng NextJS mangrupikeun salah sahijina.
Dina postingan ieu, urang bakal ngaliwat Nextjs, fitur konci na, sareng kumaha urang tiasa ngagunakeunana pikeun ngawangun aplikasi. Hayu urang langsung asup.
Naon Next.js?
Teras.js mangrupikeun kerangka JavaScript pikeun gancang sareng gampang ngawangun halaman wéb statik sareng aplikasi online dumasar-React. Éta ngamungkinkeun anjeun ngarancang aplikasi wéb anu saé pikeun sababaraha platform, kalebet Windows, Linux, sareng Mac.
Anjeun kedah wawuh sareng kerangka Next.js upami anjeun gaduh sakedik familiarity sareng réaksi sareng hoyong diajar langkung seueur ngeunaan ékosistem réaksi.
Sanaos Next.js hadir sareng sadaya anu anjeun peryogikeun pikeun ngamimitian, anjeun tiasa milih antara NPM sareng Benang, JavaScript sareng TypeScript, CSS sareng SCSS, ékspor statik, sareng panyebaran tanpa server.
Fitur
- Routing dipigawé sacara otomatis - Anjeun teu kedah ngonpigurasikeun nanaon sabab sagala URL dipetakeun kana filesystem, kana file dina folder kaca (anjeun gaduh pilihan kustomisasi, tangtosna).
- Komponén File Tunggal - Ieu basajan pikeun nambahkeun gaya scoped kana komponén maké styled-jsx, nu sagemblengna terpadu jeung dihasilkeun ku tim anu sarua.
- Reloading a Hot Code - Nalika Next.js ngadeteksi modifikasi disimpen kana disk, eta reloads kaca.
- Komponén Dinamis - Anjeun sacara dinamis tiasa ngamuat modul JavaScript sareng Komponén Réaksi.
- Ékspor statik - Next.js ngamungkinkeun anjeun ngékspor situs statik lengkep tina aplikasi anjeun nganggo paréntah ékspor salajengna.
- Kasaluyuan sareng Lingkungan - Next.js ngahijikeun lancar sareng ékosistem JavaScript, Node, sareng React.
- Ngabagi Kode Otomatis - Ngan ukur perpustakaan sareng JavaScript anu diperyogikeun anu dianggo pikeun ngadamel halaman. Gantina nyieun hiji file JavaScript ngandung sakabéh kode aplikasi urang, Next.js intelligently ngabagi aplikasi kana loba sumber.
Kumaha cara nyieun aplikasi next.js?
parabot nu geus dipasang di tempatna sarta sadia dipake
Anjeun tiasa make paréntah titik npx masang sarta ngawangun hiji proyék Next.js.
Ieu bakal ngahasilkeun polder sareng sadaya file, konfigurasi, sareng barang-barang sanés anu diperyogikeun pikeun ngajalankeun proyék Next.js.
Anjeun tiasa ngaluncurkeun aplikasi saatos didamel.
Kaca & Routing
Pikeun nanganan rute sareng Next.js, urang henteu kedah nganggo kerangka routing. Routing kalawan Next.js téh gampang pikeun nyetél. Nalika anjeun nganggo paréntah create-next-app pikeun ngawangun aplikasi Next.js anyar, aplikasi éta nyiptakeun polder anu disebut 'halaman' sacara standar.
Polder 'halaman' ieu mangrupikeun tempat anjeun ngajaga rute anjeun. Hasilna, unggal file komponén meta dina subdirectory bakal diatur salaku jalur misah.
Salaku conto, upami polder ngandung file-file éta:
- indéks.js
- ngeunaan.js
- aricles.js
Berkas ieu bakal otomatis dirobih ku tilu cara:
- Kaca indéks localhost / indéks
- The ngeunaan kaca localhost / ngeunaan
- Halaman blog localhost/artikel
Conto halaman about.js dipidangkeun di handap. Henteu aya anu disayogikeun ngeunaan halaman éta, sakumaha anu anjeun tingali. Éta ngan saukur komponén fungsional React standar.
ruteu
Pikeun nyieun rute nested, Anjeun mimitina kudu nyieun subfolder. Contona: kaca/artikel. Jieun komponén réaksi 'contact.js' anjeun dina folder éta, sareng éta bakal ngahasilkeun halaman localhost / artikel / kontak.
Upami anjeun nempatkeun hiji file dina pages/articles.js sareng anu sanésna dina pages/articles/index.js. Duanana ngagambarkeun jalur anu sami localhost / blog. Dina kaayaan ieu, Next.js ngan bakal ngajadikeun file article.js. Kumaha upami rute dinamis, dimana unggal tulisan blog gaduh jalur sorangan:
- localhost / blog / artikel munggaran
- localhost / blog / - artikel kadua
Ngagunakeun notasi kurung, Anjeun bisa nangtukeun jalur dinamis dina Next.js. Contona: kaca/artikel/[slug].js
Link Rute
Anjeun ayeuna parantos réngsé jalur munggaran anjeun. Kuring guessing nu nuju nanya kumaha nyambungkeun kaca ka eta ruteu. Anjeun peryogi 'next/link' pikeun ngalakukeunana.
Ieu conto halaman bumi anu kalebet tautan ka halaman Ngeunaan:
Upami anjeun hoyong gaya tautan, paké sintaksis ieu:
Alihan Rute
Kumaha upami anjeun kedah maksa alihan ka halaman anu tangtu? Salaku conto, nalika tombol dipencet? Anjeun tiasa ngalengkepan ieu ku ngagunakeun 'router.push':
SEO
Kaca dina aplikasi wéb merlukeun elemen meta (sirah) salian data dina awak HTML. Ieu bakal ngabutuhkeun pamasangan sarat tambahan anu namina React Helmet dina Aplikasi React.
Urang tiasa nganggo komponén Head from next/head in Next pikeun gampang nambihan metadata kana halaman wéb urang anu bakal ditingalikeun dina hasil pamilarian sareng embeds:
komponén
Anjeun bakal remen kudu ngamekarkeun komponén atawa file perenah. Salaku conto, komponén anu ngajantenkeun navbar. Kami parantos nganggo folder halaman dugi ka ayeuna. Kumaha upami komponén anjeun henteu dimaksudkeun janten halaman rute?
Anjeun teu hoyong pangguna napigasi ka halaman sapertos localhost / navbar. Lamun nempatkeun komponén Navbar.js dina folder kaca, éta naon anu bakal kajadian. Naon anu anjeun kedah laksanakeun dina kaayaan éta?
Kantun nyimpen sadaya komponén 'sanés halaman' anjeun dina polder anu misah. Seuseueurna proyék Next.js nganggo 'komponén' moniker, sareng polder ieu dihasilkeun dina polder akar proyék anjeun.
Komponén sirah
Beban kaca awal rendered ku Next.js dina sisi server. Éta ngalakukeun ieu ku ngarobih HTML halaman anjeun. Bagian lulugu kaasup.
Komponén Next.js Head dipaké pikeun méré tag bagian lulugu saperti judul jeung meta. Komponén Head dipaké dina conto ieu komponén Layout.
Jieun 404 kaca teu kapanggih
Éta tiasa ngadamel halaman kasalahan 404 anjeun nyalira. Anjeun panginten hoyong nyaluyukeun pesen atanapi nambihan desain halaman anjeun nyalira. Dina folder pages, jieun file 404.js.
Lamun kasalahan 404 lumangsung, Next.js bakal otomatis alihan ka kaca ieu. Ieu conto halaman 404 anu dipersonalisasi:
Dipulut Data ti sisi server
Gantina ngaunduh data dina sisi klien, Next.js ngamungkinkeun anjeun ngalaksanakeun populasi data awal, anu hartosna ngirim halaman sareng data anu parantos dieusi tina server.
Anjeun gaduh dua pilihan pikeun ngalaksanakeun pengambilan data sisi-server:
- Data kudu dipulut dina unggal pamundut.
- Ngan meunang data sakali sapanjang prosés konstruksi (situs statik)
Nyokot data dina unggal pamundut
Metoda getServerSideProps dipaké pikeun server-sisi ngajadikeun unggal pamundut. Pungsi ieu bisa diasupkeun dina tungtung file komponén Anjeun. Next.js bakal otomatis populate props komponén anjeun kalawan obyék getServerSideProps lamun fungsi nu aya dina file komponén Anjeun.
Candak data dina waktos ngawangun
Metoda getStaticProps dianggo pikeun ngajantenkeun sisi-server dina waktos ngawangun. Pungsi ieu bisa diasupkeun dina tungtung file komponén Anjeun. Metoda ieu ngajalankeun kode server sarta ngirimkeun pamundut GET ka server, tapi ngan sakali lamun proyek urang geus rengse.
Naha anjeun kedah diajar Next.js?
Salah sahiji alesan pikeun ieu nyaéta kusabab Next.js diwangun dina luhureun React, toolkit pangembangan hareup-tungtung pikeun nyieun interfaces pamaké Éta mangrupikeun pilihan karesep kuring pikeun ngarancang aplikasi wéb.
Tapi éta moal cekap upami Next.js henteu saé dina naon anu dilakukeun… leres?
Ku kituna, naon kahayang eta ngalakukeun?
Urang kedah netepkeun heula sababaraha konsép supados ngartos éta. Next.js meunang popularitas sabab ngarengsekeun masalah anu dipiboga ku seueur pamekar wéb sareng aplikasi wéb sisi klien (dina browser). Aplikasi Halaman Tunggal (SPA) ieu ngagaduhan pangalaman anu langkung saé sabab henteu peryogi pangguna pikeun ngamuat deui halaman sareng ngamungkinkeun langkung interaktif.
Sanajan kitu, kusabab bulk tina bahan dina aplikasi kawas ieu janten katingali ngan lamun dipigawé dina browser nu, crawlers web boga waktu hésé ngarti eusi téks aplikasi misalna hiji.
Hasilna, sanajan popularitas maranéhanana, loba SPAs tetep sakitu legana anonim kana mesin pencari badag kayaning Google. Next.js ayeuna kalebet mékanisme anu langkung kuat pikeun rendering sisi server (SSR) komponén React.
Next.js ngamungkinkeun pamekar pikeun ngawangun kode JavaScript dina server salila prosés ngawangun sarta nyadiakeun dasar, indexable HTML ka pamaké.
Naros
- Gede pikeun pamaké-pangalaman
- Gede pikeun SEO
- Ngawangun situs wéb statik super-gancang anu kalakuanana sapertos dinamis
- Kalenturan dina ngawangun UI & UX.
- Loba kaunggulan pangwangunan
- rojongan komunitas hébat
kontra
- Situs wéb atanapi aplikasi gaduh sababaraha waktos pikeun ngawangun atanapi ngembangkeun.
- Pikeun tugas-tugas anu tangtu, Next.js henteu cekap. Pamekar kedah tiasa ngawangun rute dinamis nganggo alat Node.js.
kacindekan
Sakumaha anjeun tiasa tingali, Next.js nyederhanakeun pamekaran aplikasi React sareng ngamungkinkeun anjeun pikeun difokuskeun naon anu paling penting - logika aplikasi sareng UI anjeun. Ieu ngawengku sagalana diperlukeun pikeun nyieun kontemporer, frontend-euyeub tur aktip API-Powered.
Éta ogé cocog pikeun proyék ngan ukur eusi, sapertos blog sareng situs wéb bisnis, kusabab kamampuanana ngawangun halaman HTML statik.
Kalayan édisi ayeuna, Next.js henteu ngan ukur ngajaga tingkat pangalaman pamekar anu luhur tapi ogé masihan alat pikeun ningkatkeun kamampuan visual sareng pangalaman pangguna, mastikeun masa depan anu cerah pikeun kerangka ieu.
Leave a Reply