Table of Contents[Hūnā][Hōʻike]
I ke koho ʻana i kahi waihona lako polokalamu a i ʻole framework, e noʻonoʻo mau ʻia ka ʻike mea hoʻomohala.
Ke haʻi aku nei au i ka "ʻike hoʻomohala," ke ʻōlelo nei au i ka hana maoli ʻana o nā mea hoʻomohala i ka hana. Koho nā mea hoʻomohala i nā hale waihona puke a i ʻole nā papa hana leʻaleʻa e hoʻohana.
ʻO kēia kekahi o nā kumu nui e loaʻa ai iā mākou nā hale waihona puke kaulana loa. Ma ke ʻano he mea hoʻomohala, ʻaʻole pono mākou e hoʻomaka mai ka wā ʻuʻuku inā aia nā mea hana i hana ʻia e kōkua iā mākou i kā mākou mau hana.
ʻO Frameworks nā ʻāpana o nā polokalamu i hana ʻia a hoʻohana ʻia e nā mea hoʻomohala e kūkulu i nā noi, a ʻo NextJS kekahi o lākou.
Ma kēia pou, e hele mākou ma luna o Nextjs, kāna mau hiʻohiʻona nui, a pehea e hiki ai iā mākou ke hoʻohana iā ia e kūkulu i kahi noi. E lele koke kāua.
He aha ka Next.js?
ʻO aʻe.js he hoʻolālā JavaScript no ka hana wikiwiki a maʻalahi i nā palapala pūnaewele paʻa a me nā noi pūnaewele React. Hāʻawi ia iā ʻoe e hoʻolālā i nā polokalamu pūnaewele maikaʻi no nā ʻano papahana like ʻole, me Windows, Linux, a me Mac.
Pono ʻoe e kamaʻāina me ka Next.js framework inā he liʻiliʻi kou kamaʻāina me ka react a makemake ʻoe e aʻo hou e pili ana i ka kaiaola react.
ʻOiai hele mai ʻo Next.js me nā mea a pau e pono ai ʻoe e hoʻomaka, hiki iā ʻoe ke koho ma waena o NPM a me Yarn, JavaScript a me TypeScript, CSS a me SCSS, static export, a me ka serverless deployment.
hiʻona
- Hana ʻia ke ala ala - ʻAʻole pono ʻoe e hoʻonohonoho i kekahi mea no ka mea ua paʻi ʻia kekahi URL i ka filesystem, i nā faila i ka waihona ʻaoʻao (loaʻa iā ʻoe nā koho maʻamau, ʻoiaʻiʻo).
- Nā ʻāpana o kahi faila hoʻokahi - He mea maʻalahi ke hoʻohui i nā ʻano i hoʻopili ʻia i ka ʻāpana me ka styled-jsx, i hoʻohui pū ʻia a hana ʻia e ka hui like.
- Hoʻouka hou i kahi Code Hot - Ke ʻike ʻo Next.js i kahi hoʻololi i mālama ʻia i ka disk, hoʻouka hou ia i ka ʻaoʻao.
- Nā ʻāpana Dynamic - Hiki iā ʻoe ke hoʻouka i nā module JavaScript a me React Components.
- Nā hoʻokuʻu kūʻokoʻa - Next.js hiki iā ʻoe ke hoʻokuʻu aku i kahi kahua paʻa paʻa loa mai kāu polokalamu me ke kauoha hoʻoiho aʻe.
- Hoʻolike me ke Kaiapuni - Next.js e hoʻohui pono me ka JavaScript, Node, a me React kaiaolaola.
- Hoʻokaʻawale i nā Codes - ʻO nā hale waihona puke a me JavaScript wale nō i koi ʻia e hoʻohana i nā ʻaoʻao. Ma kahi o ka hana ʻana i hoʻokahi faila JavaScript i loaʻa nā code āpau o ka app, hoʻokaʻawale naʻauao ʻo Next.js i ka app i nā kumuwaiwai he nui.
Pehea e hana ai i kahi noi next.js?
mea hoʻonoho
Hiki iā ʻoe ke hoʻohana i ke kauoha node npx e hoʻokomo a kūkulu i kahi papahana Next.js.
E hoʻopuka kēia i kahi waihona a me nā faila a pau, nā hoʻonohonoho, a me nā mea ʻē aʻe e pono ai e holo i kahi papahana Next.js.
Hiki iā ʻoe ke hoʻomaka i ka app i ka wā i hana ʻia ai.
Nā ʻaoʻao a me ke alahele
No ka mālama ʻana i nā ala me Next.js, ʻaʻole pono mākou e hoʻohana i kahi hoʻolālā ala. He mea maʻalahi ka hoʻonohonoho ʻana me Next.js. Ke hoʻohana ʻoe i ke kauoha create-next-app e kūkulu i kahi polokalamu Next.js hou, hana ka app i kahi waihona i kapa ʻia ʻo 'pages' ma ka paʻamau.
ʻO kēia waihona 'ʻaoʻao' kahi āu e mālama ai i kāu mau ala. ʻO ka hopena, e mālama ʻia kēlā me kēia mea i nā faila ʻāpana i ka subdirectory ma ke ʻano he ala kaʻawale.
No ka laʻana, inā loaʻa kēlā mau faila i ka waihona:
- index.js
- pili.js
- aricles.js
E hoʻololi aunoa ʻia kēia faila ma ʻekolu mau ala:
- ʻO ka ʻaoʻao kuhikuhi localhost/index
- ʻO ka ʻaoʻao pili localhost/e pili ana
- ʻO ka ʻaoʻao blog localhost/ʻatikala
Hōʻike ʻia kahi laʻana o kahi ʻaoʻao about.js ma lalo nei. ʻAʻohe mea i hāʻawi ʻia e pili ana i ka ʻaoʻao, e like me kāu e ʻike ai. He ʻāpana hana maʻamau ʻo React.
? ooia
No ka hana ʻana i nā ala pūnana, pono ʻoe e hoʻokumu i kahi subfolder. No ka laʻana: ʻaoʻao/ʻatikala. E hana i kāu 'contact.js' react component i loko o kēlā waihona, a e hoʻopuka i ka ʻaoʻao localhost/articles/contact.
Inā hoʻokomo ʻoe i hoʻokahi faila ma nā ʻaoʻao/articles.js a me kekahi ma nā ʻaoʻao/articles/index.js. Hōʻike nā mea ʻelua i ke ala like localhost/blog. Ma kēia kūlana, e hāʻawi wale ʻo Next.js i ka faila article.js. Pehea e pili ana i nā ala ikaika, kahi i loaʻa i kēlā me kēia pou blog kona ala ponoʻī:
- localhost/blog/ʻatikala mua
- localhost/blog/-ʻelua-ʻatikala
Me ka hoʻohana ʻana i ka notation brackets, hiki iā ʻoe ke wehewehe i kahi ala ikaika ma Next.js. No ka laʻana: ʻaoʻao/ʻatikala/[slug].js
Nā Alanui loulou
Ua hoʻopau ʻoe i kāu ala mua. Manaʻo wau e nīnau ana ʻoe pehea e hoʻopili ai i nā ʻaoʻao i kēlā mau ala. Pono ʻoe i 'next/link' e hana pēlā.
Eia kekahi laʻana o kahi ʻaoʻao home e loaʻa ana kahi loulou i ka ʻaoʻao About:
Inā makemake ʻoe e kāhiko i ka loulou, e hoʻohana i kēia syntax:
Hoʻihoʻi hou i nā alanui
He aha inā pono ʻoe e hoʻoneʻe i kahi ʻaoʻao? No ka laʻana, ke kaomi ʻana i kahi pihi? Hiki iā ʻoe ke hoʻokō i kēia ma ka hoʻohana ʻana i 'router.push':
SEO
Pono nā ʻaoʻao ma nā polokalamu pūnaewele i nā mea meta (poʻo) me ka ʻikepili i loko o ke kino HTML. Pono kēia e hoʻokomo i kahi koi hou i kapa ʻia ʻo React Helmet i kahi React Application.
Hiki iā mākou ke hoʻohana i ka ʻāpana Poʻo mai aʻe/poʻo i Next e hoʻohui maʻalahi i ka metadata i kā mākou pūnaewele pūnaewele e hōʻike ʻia i nā hopena hulina a me nā hoʻopili:
eiiiiiaiou
Pono ʻoe e hoʻomohala i nā ʻāpana a i ʻole kahi faila hoʻonohonoho. No ka laʻana, he ʻāpana e hoʻolilo i ka navbar. Ua hoʻohana wale mākou i ka waihona ʻaoʻao a hiki i kēia manawa. He aha inā ʻaʻole i manaʻo ʻia kāu ʻāpana he ʻaoʻao ala?
ʻAʻole ʻoe makemake i ka mea hoʻohana e hoʻokele i kahi ʻaoʻao e like me kahi localhost/navbar. Inā ʻoe e kau i ka ʻāpana Navbar.js i loko o ka waihona ʻaoʻao, ʻo ia ka mea e hiki mai ana. He aha kāu e hana ai ma ke kūlana?
E mālama wale i kāu ʻāpana 'ʻaʻole kahi ʻaoʻao' i loko o kahi waihona ʻokoʻa. Hoʻohana ka hapa nui o nā papahana Next.js i nā 'āpana moniker,' a ua hana ʻia kēia waihona ma ka waihona kumu o kāu papahana.
ʻāpana poʻo
Hāʻawi ʻia ka ukana ʻaoʻao mua e Next.js ma ka ʻaoʻao kikowaena. Hana ia i kēia ma ka hoʻololi ʻana i ka HTML o kāu ʻaoʻao. Hoʻokomo ʻia ka ʻāpana poʻo.
Hoʻohana ʻia ka ʻāpana Next.js Head e hāʻawi i nā hōʻailona ʻāpana poʻomanaʻo e like me ke poʻo inoa a me ka meta. Hoʻohana ʻia ka ʻāpana Poʻo i kēia hiʻohiʻona o kahi ʻāpana Layout.
ʻAʻole i loaʻa ka ʻaoʻao 404
Hiki ke hana i kāu ʻaoʻao hewa 404 ponoʻī. Makemake paha ʻoe e hoʻopilikino i ka memo a hoʻohui i kāu hoʻolālā ʻaoʻao ponoʻī. Ma ka waihona ʻaoʻao, hana i ka faila 404.js.
Ke loaʻa ka hewa 404, e hoʻihoʻi hou ʻo Next.js i kēia ʻaoʻao. Eia kekahi laʻana o kahi ʻaoʻao 404 pilikino:
Kii ʻikepili mai ka ʻaoʻao kikowaena
Ma kahi o ka hoʻoiho ʻana i ka ʻikepili ma ka ʻaoʻao o ka mea kūʻai aku, ʻae ʻo Next.js iā ʻoe e alakaʻi i kahi heluna ʻikepili mua, ʻo ia hoʻi ka hoʻouna ʻana i ka ʻaoʻao me ka ʻikepili i hoʻopaʻa ʻia mai ke kikowaena.
Loaʻa iā ʻoe nā koho ʻelua no ka hoʻokō ʻana i ka lawe ʻana i ka ʻikepili ʻaoʻao server:
- Pono e kiʻi ʻia ka ʻikepili ma kēlā me kēia noi.
- Hoʻokahi wale nō kiʻi ʻikepili i ke kaʻina hana (kahi kahua paʻa)
E kiʻi i ka ʻikepili ma kēlā me kēia noi
Hoʻohana ʻia ke ʻano getServerSideProps e hāʻawi i ka ʻaoʻao kikowaena i kēlā me kēia noi. Hiki ke hoʻokomo ʻia kēia hana ma ka hope o kāu faila ʻāpana. Next.js e hoʻopiha ʻokoʻa i kāu mau mea hoʻopili me ka mea getServerSideProps inā aia kēlā hana i kāu faila.
E kiʻi i ka ʻikepili i ka manawa kūkulu
Hoʻohana ʻia ke ʻano getStaticProps e hāʻawi i ka ʻaoʻao server i ka manawa kūkulu. Hiki ke hoʻokomo ʻia kēia hana ma ka hope o kāu faila ʻāpana. Ke holo nei kēia ʻano i ka code server a hoʻouna i kahi noi GET i ke kikowaena, akā hoʻokahi wale nō i ka pau ʻana o kā mākou papahana.
No ke aha ʻoe e aʻo ai iā Next.js?
ʻO kekahi kumu o kēia no ka mea ua kūkulu ʻia ʻo Next.js ma luna o React, kahi mea hana hoʻomohala mua hana ana i na mea hoohana ʻo ia kaʻu koho punahele no ka hoʻolālā ʻana i nā polokalamu pūnaewele.
Akā ʻaʻole lawa inā ʻaʻole maikaʻi ʻo Next.js i kāna hana… ʻaʻole anei?
No laila, he aha ka hana?
Pono mākou e wehewehe mua i kekahi mau manaʻo i mea e hoʻomaopopo ai. Ua kaulana ʻo Next.js ma muli o ka hoʻoponopono ʻana i kahi pilikia i loaʻa i nā mea hoʻomohala pūnaewele me nā polokalamu pūnaewele ʻaoʻao (ma ka polokalamu kele pūnaewele). Ua ʻoi aku ka maikaʻi o kēia mau noiʻi ʻaoʻao hoʻokahi (SPA) no ka mea ʻaʻole pono lākou i ka mea hoʻohana e hoʻouka hou i ka ʻaoʻao a ʻae ʻia no ka launa pū ʻana.
Eia nō naʻe, no ka mea, ʻike ʻia ka nui o ka mea i loko o kahi polokalamu e like me kēia ke hana ʻia ma ka polokalamu kele pūnaewele, paʻakikī ka poʻe kolo pūnaewele e hoʻomaopopo i ka ʻike kikokikona o ia app.
ʻO ka hopena, ʻoiai ko lākou kaulana, nui nā SPA i noho inoa ʻole i nā ʻenekini huli nui e like me Google. ʻO Next.js i kēia manawa ua loaʻa i kahi mīkini paʻa i kūkulu ʻia no ka hōʻike ʻana i ka ʻaoʻao server (SSR) o nā ʻāpana React.
Next.js hiki i nā mea hoʻomohala ke kūkulu i ka code JavaScript ma ke kikowaena i ka wā o ke kaʻina hana a hāʻawi i ka HTML kumu, hiki ke kuhikuhi ʻia i ka mea hoʻohana.
Pros
- Nui no ka ʻike hoʻohana
- Nui no SEO
- E kūkulu i kahi pūnaewele static super-wikiwiki e hana like me ka dynamic
- Hoʻololi i ke kūkulu ʻana i ka UI & UX.
- Nui nā pono hoʻomohala
- Kākoʻo kaiaulu nui
Con
- Loaʻa i nā pūnaewele a i ʻole nā noi kekahi manawa e kūkulu ai a hoʻomohala paha.
- No kekahi mau hana, ʻaʻole lawa ka Next.js. Hiki i nā mea hoʻomohala ke kūkulu i nā ala ikaika me ka hoʻohana ʻana i nā mea hana Node.js.
Panina
E like me kāu e ʻike ai, hoʻomaʻamaʻa ʻo Next.js i ka hoʻomohala ʻana i ka app React a hiki iā ʻoe ke nānā aku i nā mea nui loa - kāu loiloi app a me UI. Loaʻa iā ia nā mea a pau e pono ai e hana i nā polokalamu hou, waiwai mua a me ka mana API.
He kūpono hoʻi ia no nā papahana maʻiʻo wale nō, e like me nā blog a me nā pūnaewele ʻoihana, ma muli o kona hiki ke kūkulu i nā ʻaoʻao HTML paʻa.
Me nā paʻi o kēia manawa, ʻaʻole mālama ʻo Next.js i kahi kiʻekiʻe o ka ʻike mea hoʻomohala akā hāʻawi pū kekahi i nā mea hana no ka hoʻonui ʻana i ka hana ʻike a me ka ʻike mea hoʻohana, e hōʻoiaʻiʻo ana i ka wā e hiki mai ana no kēia anga.
Waiho i ka Reply