Ripanga o Ihirangi[Huna][Whakaatu]
I te wa e whiriwhiri ana i te whare pukapuka rorohiko, i te angamahi ranei, ka whakaarohia te wheako kaiwhakawhanake.
Ka whakahua ahau i te "wheako kaiwhakawhanake," kei te korero ahau me pehea te mahi a nga kaihanga. Ka whiriwhiri nga kaihanga i nga whare pukapuka, i nga anga ranei e pai ana ki te whakamahi.
Koinei tetahi o nga take tuatahi kei a tatou nga whare pukapuka rongonui me nga anga. Hei kaiwhakawhanake, kaore e tika kia timata mai i te wahanga ina he taputapu kua hangaia hei awhina i a maatau mahi.
Ko nga Angamahi he waahanga rorohiko i hangaia ka whakamahia e nga kaiwhakawhanake hei hanga tono, a ko NextJS tetahi o era.
I tenei pou, ka korerohia e tatou a Nextjs, ona ahuatanga matua, me pehea e taea ai e tatou te whakamahi hei hanga tono. Me peke tika ki roto.
He aha te Next.js?
Whai muri.js he anga JavaScript mo te hanga tere me te ngawari ki te hanga i nga wharangi paetukutuku pateko me nga tono ipurangi e pa ana ki te React. Ka taea e koe te hoahoa i nga taupānga Tukutuku pai mo nga momo papaaho, tae atu ki a Windows, Linux, me Mac.
Me mohio koe ki te angamahi Next.js mena he iti to mohio ki te react me te hiahia ki te ako atu mo te rauwiringa kaiao react.
Ahakoa ka tae mai a Next.js me nga mea katoa e hiahia ana koe ki te tiimata, ka taea e koe te kowhiri i waenga i te NPM me te Miro, JavaScript me te TypeScript, CSS me te SCSS, te kaweake pateko, me te tukunga kore.
āhuatanga
- Ka mahia aunoatia te ararere – Kare koe e hiahia ki te whirihora i tetahi mea na te mea kua mapi tetahi URL ki te punaha konae, ki nga konae kei roto i te kōpaki wharangi (kei a koe nga whiringa whakaritenga, o te akoranga).
- Nga Waahanga o te Kōnae Kotahi - He ngawari ki te taapiri i nga momo kua horahia ki te waahanga ma te whakamahi i te styled-jsx, he mea whakakotahi me te whakaputa e te roopu kotahi.
- Te uta ano i tetahi Waehere Wera - Ina kitea e Next.js he whakarereketanga kua tiakina ki te kōpae, ka utaina ano te wharangi.
- Nga Waahanga Hihiko - Ka taea e koe te uta i nga waahanga JavaScript me nga Waahanga React.
- Kaweake pateko - Next.js ka taea e koe te kaweake i tetahi pae tino pateko mai i to taupānga me te whakahau kaweake e whai ake nei.
- Te Hototahi ki te Taiao - Ko Next.js ka hono marie ki te JavaScript, Node, me te React rauwiringa kaiao.
- Waehere Waehere Aunoa – Ko nga whare pukapuka me te JavaScript e hiahiatia ana ka whakamahia hei whakaputa wharangi. Engari ki te hanga i tetahi konae JavaScript kei roto katoa nga waehere o te taupānga, ka wehewehea marie e Next.js te taupānga ki nga rauemi maha.
Me pehea te hanga i tetahi tono next.js?
tāutanga
Ka taea e koe te whakamahi i te tono node npx ki te whakauru me te hanga kaupapa Next.js.
Ma tenei ka whakaputa he kōpaki me nga konae katoa, nga whirihoranga, me etahi atu mea e hiahiatia ana hei whakahaere kaupapa Next.js.
Ka taea e koe te whakarewa i te taupānga ina oti te hanga.
Whārangi me te Ararere
Hei hapai i nga huarahi me Next.js, karekau e hiahia ki te whakamahi anga ararere. Ko te ararere me Next.js he ngawari ki te whakarite. Ina whakamahi koe i te tono hanga-muri-taupānga ki te hanga i tetahi taupānga Next.js hou, ka hangaia e te taupānga he kōpaki e kiia nei ko 'wharangi' ma te taunoa.
Ko tenei kōpaki 'whārangi' kei reira koe e mau tonu ai o ara. Ko te mutunga mai, ka whakahaerea nga konae waahanga urupare i te raarangi-roto hei ara motuhake.
Hei tauira, mena kei te kōpaki aua konae:
- taurangi.js
- mo.js
- aricles.js
Ka huri aunoa i tenei konae ma nga huarahi e toru:
- Ko te wharangi taurangi localhost/index
- Ko te whārangi mo te localhost/mo
- Ko te page blog localhost/tuhinga
Kei raro nei tetahi tauira o te wharangi about.js. Kaore he mea e whakaratohia ana mo te wharangi, ka kite koe. He paerewa noa te waahanga mahi React.
Nga ara
Ki te hanga ara kohanga, me whakatu e koe he kōpakiroto. Hei tauira: wharangi/tuhinga. Waihangahia to waahanga urupare 'contact.js' i roto i taua kōpaki, ka puta te whaarangi localhost/tuhinga/whakapapa.
Mena ka tukuna e koe tetahi konae ki nga wharangi/articles.js me tetahi atu ki nga wharangi/articles/index.js. E whakaatu ana nga mea e rua i te ara ano localhost/blog. I tenei ahuatanga, ka tukuna noa e Next.js te tuhinga article.js. Me pehea nga huarahi hihiri, kei roto i ia pou rangitaki tona ake ara:
- localhost/blog/tuatahi-tuhinga
- localhost/blog/-tuarua-tuhinga
Ma te whakamahi i nga tohu taiapa, ka taea e koe te tautuhi i tetahi ara hihiri ki Next.js. Hei tauira: wharangi/tuhinga/[slug].js
Hononga huarahi
Kua oti i a koe to huarahi tuatahi. Ki taku whakaaro kei te patai koe me pehea te hono atu i nga wharangi ki aua ara. Ka hiahia koe ki te 'next/link' ki te mahi.
Anei he tauira o te wharangi kainga kei roto he hono ki te wharangi About:
Mena kei te pirangi koe ki te whakaahua i te hono, whakamahia te wetereo e whai ake nei:
Ahurihia nga huarahi
Ka aha mena ka hiahia koe ki te akiaki i te anga ki tetahi wharangi? Hei tauira, ina pehia te paatene? Ka taea e koe tenei ma te whakamahi 'router.push':
SEO
Ko nga wharangi i roto i nga tono paetukutuku ka hiahia huānga meta (upoko) hei taapiri atu ki nga raraunga kei roto i te tinana HTML. Ma tenei me whakauru he whakaritenga taapiri ko React Helmet i roto i te Taupānga React.
Ka taea e tatou te whakamahi i te Waahanga Upoko mai i muri/upoko i muri ki te taapiri ngawari ki nga metadata ki a maatau wharangi paetukutuku ka whakaatuhia ki nga hua rapu me nga whakaurunga:
wae
Ka hiahia koe ki te whakawhanake i nga waahanga, i te konae tahora ranei. Hei tauira, he waahanga e whakaatu ana i te pae whakatere. Kua whakamahia e matou te kōpaki wharangi i tenei wa. Ka aha mena karekau to waahanga hei wharangi ara?
Kaore koe e hiahia kia whakatere te kaiwhakamahi ki tetahi wharangi penei i te localhost/navbar. Mena ka tuu koe i te waahanga Navbar.js ki te kōpaki wharangi, katahi ka puta. Me aha koe i roto i te ahuatanga?
Rokiroki noa i o wahanga 'ehara i te wharangi' ki tetahi kōpaki motuhake. Ko te nuinga o nga kaupapa Next.js e whakamahi ana i te moniker 'wahanga,' ka hangaia tenei kōpaki ki te kōpaki pakiaka o to kaupapa.
Waahanga upoko
Ko te kawenga wharangi tuatahi ka tukuna e Next.js i te taha-tumau. Ka mahia tenei ma te whakarereke i te HTML o to wharangi. Kua whakauruhia te waahanga pane.
Ka whakamahia te waahanga Next.js Head ki te hoatu tohu wahanga pane penei i te taitara me te meta. Ka whakamahia te waahanga Upoko i tenei tauira o te waahanga Tahora.
Waihangahia te wharangi 404 kaore i kitea
Ka taea te hanga i to ake wharangi hapa 404. Ka hiahia pea koe ki te whakarite i te karere, ki te taapiri ranei i to ake hoahoa wharangi. I roto i te kōpaki whārangi, hangahia te kōnae 404.js.
Ka puta he hapa 404, ka tukuna aunoa a Next.js ki tenei wharangi. Anei tetahi tauira o te wharangi 404 kua whakawhaiarohia:
Te Tiki Raraunga mai i te taha tūmau
Engari ki te tango raraunga i runga i te taha-kiritaki, ka taea e Next.js te whakahaere i te taupori raraunga tuatahi, e kii ana ki te tuku i te wharangi me nga raraunga kua noho mai i te tūmau.
E rua nga whiringa hei whakatinana i te tiki raraunga taha-tumau:
- Me tiki raraunga mo ia tono.
- Kotahi anake te tiki raraunga puta noa i te mahi hanga (pae pateko)
Tikina raraunga mo ia tono
Ka whakamahia te tikanga getServerSideProps ki te tuku taha-tumau ki ia tono. Ka taea te whakauru i tenei mahi ki te mutunga o to konae waahanga. Next.js ka whakakii aunoa i o taputapu wae ki te ahanoa getServerSideProps mena kei roto tera mahi i to konae waahanga.
Tikina raraunga i te wa hanga
Ka whakamahia te tikanga getStaticProps ki te tuku taha-kaituku i te wa hanga. Ka taea te whakauru i tenei mahi ki te mutunga o to konae waahanga. Ko tenei tikanga ka whakahaere i te waehere tūmau me te tuku tono GET ki te tūmau, engari kotahi anake ka mutu to maatau kaupapa.
He aha koe me ako Next.js?
Ko tetahi o nga take mo tenei na te mea ka hangaia a Next.js ki runga ake o React, he kete taputapu whanaketanga o mua mo te hanga atanga kaiwhakamahi Koira taku tino pai mo te hoahoa taupānga tukutuku.
Engari kare e ranea mena kaore a Next.js i pai ki tana mahi… tika?
Na, he aha te mahi?
Me tautuhi i te tuatahi etahi ariā kia marama ai. I rongonui a Next.js na te mea i whakatauhia e te maha o nga kaiwhakawhanake paetukutuku me nga taupānga paetukutuku taha-kiritaki (i te tirotiro). He pai ake te wheako o enei Taupānga Wharangi-Kotahi (SPA) i te mea kaore i hiahiatia e te kaiwhakamahi te utaina ano i te wharangi ka whakaaetia kia nui ake te taunekeneke.
Heoi, na te mea ka kitea te nuinga o nga rawa i roto i te taupānga penei ina mahia ana i roto i te kaitirotiro, he uaua nga ngoki tukutuku ki te mohio ki nga tuhinga o taua taupānga.
Ko te mutunga mai, ahakoa te rongonui, he maha nga SPA i noho ingoamuna ki nga miihini rapu nui penei i a Google. Ko Next.js kei roto i naianei he tikanga hanga-i roto ake mo te whakaputa taha-tumau (SSR) o nga waahanga React.
Next.js ka taea e nga kaiwhakawhanake te hanga waehere JavaScript ki runga i te tūmau i te wa o te hangahanga me te whakarato i te HTML taketake, ka taea te tohu ki te kaiwhakamahi.
AtAKi
- He pai mo te wheako-kaiwhakamahi
- He pai mo SEO
- Hangaia he paetukutuku pateko tino tere e rite ana ki te hihiko
- Te ngawari ki te hanga UI me te UX.
- He maha nga painga whanaketanga
- Te tautoko nui o te hapori
raruraru
- He wa roa nga paetukutuku me nga tono hei hanga, hei whakawhanake ranei.
- Mo etahi mahi, kaore e tika a Next.js. Me kaha nga Kaihanga ki te hanga huarahi hihiri ma te whakamahi i nga taputapu Node.js.
Opaniraa
Ka kite koe, ka whakangawari a Next.js i te whanaketanga taupānga React ka taea e koe te aro ki nga mea tino nui - to arorau taupānga me to UI. Kei roto i nga mea katoa e hiahiatia ana hei hanga i nga taupānga o naianei, o mua me te whai mana API.
E tika ana hoki mo nga kaupapa ihirangi-anake, penei i nga rangitaki me nga paetukutuku pakihi, na tona kaha ki te hanga wharangi HTML pateko.
Na nga putanga o naianei, kaore a Next.js e pupuri noa i te taumata teitei o te wheako kaiwhakawhanake engari ka hoatu taputapu mo te whakanui ake i te mahi ataata me te wheako kaiwhakamahi, me te whakarite i te marama o te heke mai mo tenei anga.
Waiho i te Reply