Բառը[Թաքցնել][Ցուցադրում]
Ծրագրաշարի գրադարան կամ շրջանակ ընտրելիս սովորաբար հաշվի է առնվում մշակողի փորձը:
Երբ ես նշում եմ «մշակողի փորձը», ես նկատի ունեմ այն, թե ինչպես են մշակողները իրականում կատարում աշխատանքը: Մշակողները ընտրում են գրադարաններ կամ շրջանակներ, որոնք հաճելի է օգտագործել:
Սա հիմնական պատճառներից մեկն է, թե ինչու մենք այժմ ունենք ամենահայտնի գրադարաններն ու շրջանակները: Որպես մշակողներ, մենք չպետք է սկսենք զրոյից, երբ կան գոյություն ունեցող գործիքներ, որոնք ստեղծվել են մեզ մեր առաջադրանքներում օգնելու համար:
Frameworks-ը ծրագրաշարի կտորներ են, որոնք ստեղծվում և օգտագործվում են ծրագրավորողների կողմից հավելվածներ ստեղծելու համար, և NextJS-ը դրանցից մեկն է:
Այս գրառման մեջ մենք կանդրադառնանք Nextjs-ին, նրա հիմնական հատկանիշներին և ինչպես կարող ենք օգտագործել այն հավելված ստեղծելու համար: Եկեք անմիջապես ներս ցատկենք:
Ի՞նչ է Next.js-ը:
Հաջորդ. Js JavaScript-ի շրջանակ է՝ արագ և հեշտությամբ ստատիկ վեբ էջեր և React-ի վրա հիմնված առցանց հավելվածներ ստեղծելու համար: Այն թույլ է տալիս նախագծել հիանալի վեբ հավելվածներ տարբեր հարթակների համար, ներառյալ Windows, Linux և Mac:
Դուք պետք է ծանոթ լինեք Next.js շրջանակին, եթե նվազագույն ծանոթ եք react-ին և ցանկանում եք ավելին իմանալ react էկոհամակարգի մասին:
Թեև Next.js-ն ունի այն ամենը, ինչ անհրաժեշտ է սկսելու համար, դուք կարող եք ընտրել NPM-ի և Yarn-ի, JavaScript-ի և TypeScript-ի, CSS-ի և SCSS-ի, ստատիկ արտահանման և առանց սերվերի տեղակայման միջև:
Հատկություններ
- Ուղղորդումն իրականացվում է ավտոմատ կերպով. Ձեզ հարկավոր չէ որևէ բան կարգավորել, քանի որ ցանկացած URL-ը քարտեզագրված է ֆայլային համակարգին, էջերի թղթապանակում գտնվող ֆայլերին (իհարկե, դուք ունեք հարմարեցման տարբերակներ):
- Մեկ ֆայլի բաղադրամասեր – Պարզ է բաղադրիչին ընդգրկված ոճեր ավելացնելը` օգտագործելով styled-jsx, որն ամբողջությամբ ինտեգրված և արտադրված է նույն թիմի կողմից:
- Թեժ կոդի վերաբեռնում – Երբ Next.js-ը հայտնաբերում է սկավառակի վրա պահված փոփոխությունը, այն վերաբեռնում է էջը:
- Դինամիկ բաղադրիչներ – Դուք կարող եք դինամիկ բեռնել JavaScript մոդուլները և React բաղադրիչները:
- Ստատիկ արտահանումներ – Next.js-ը թույլ է տալիս արտահանել ամբողջովին ստատիկ կայք ձեր հավելվածից հաջորդ արտահանման հրամանով:
- Համատեղելիություն շրջակա միջավայրի հետ – Next.js-ն անխափան կերպով ինտեգրվում է JavaScript, Node և React էկոհամակարգերի հետ:
- Կոդերի ինքնաբերաբար բաժանում – Միայն անհրաժեշտ գրադարաններն ու JavaScript-ն օգտագործվում են էջերի ցուցադրման համար: Հավելվածի ամբողջ կոդը պարունակող մեկ JavaScript ֆայլ ստեղծելու փոխարեն, Next.js-ը խելամտորեն բաժանում է հավելվածը բազմաթիվ ռեսուրսների:
Ինչպե՞ս ստեղծել next.js հավելված:
տեղակայում
Next.js նախագիծը տեղադրելու և կառուցելու համար կարող եք օգտագործել node npx հրամանը:
Սա կստեղծի թղթապանակ և բոլոր ֆայլերը, կոնֆիգուրացիաները և մյուս տարրերը, որոնք անհրաժեշտ են Next.js նախագիծը գործարկելու համար:
Դուք կարող եք գործարկել հավելվածը, երբ այն ստեղծվի:
Էջեր և երթուղիավորում
Next.js-ով երթուղիները մշակելու համար մենք կարիք չունենք երթուղային շրջանակ օգտագործելու: Next.js-ով երթուղի անցնելը հեշտ չէ: Երբ դուք օգտագործում եք create-next-app հրամանը նոր Next.js հավելված ստեղծելու համար, հավելվածը լռելյայն ստեղծում է «էջեր» կոչվող թղթապանակ:
Այս «էջեր» թղթապանակն այն է, որտեղ դուք պահպանում եք ձեր երթուղիները: Արդյունքում, ենթագրքում գտնվող յուրաքանչյուր արձագանքող բաղադրիչների ֆայլ կմշակվի որպես առանձին երթուղի:
Օրինակ, եթե թղթապանակը պարունակում է այդ ֆայլերը.
- index.js
- մասին.js
- aricles.js
Այս ֆայլը ավտոմատ կերպով կփոխակերպվի երեք եղանակով.
- Ինդեքսային էջը localhost/index
- Էջի մասին localhost/ about
- Բլոգի էջը localhost/հոդվածներ
Ստորև ներկայացված է about.js էջի օրինակ: Էջի մասին ոչինչ չի տրամադրվում, ինչպես տեսնում եք։ Դա պարզապես ստանդարտ React ֆունկցիոնալ բաղադրիչ է:
երթուղիներ
Ներդրված երթուղիներ պատրաստելու համար նախ պետք է ստեղծել ենթաթղթապանակ: Օրինակ՝ էջեր/հոդվածներ: Ստեղծեք ձեր «contact.js» արձագանքման բաղադրիչը այդ թղթապանակում, և այն կստեղծի էջը localhost/articles/contact:
Եթե դուք դնում եք մեկ ֆայլ pages/articles.js-ում, իսկ մյուսը՝ pages/articles/index.js: Երկուսն էլ արտացոլում են նույն ուղին localhost/blog. Այս իրավիճակում Next.js-ը պարզապես կարտացոլի article.js ֆայլը: Ինչ վերաբերում է դինամիկ երթուղիներին, որոնցում յուրաքանչյուր բլոգային գրառում ունի իր ուղին.
- localhost/blog/first-article
- localhost/blog/-second- article
Օգտագործելով փակագծերի նշումը, կարող եք դինամիկ երթուղի սահմանել Next.js-ում: Օրինակ՝ pages/article/[slug].js
Կապել երթուղիները
Դուք այժմ ավարտել եք ձեր առաջին երթուղին: Կարծում եմ, դուք հարցնում եք, թե ինչպես միացնել էջերը այդ երթուղիներին: Դա անելու համար ձեզ հարկավոր է «հաջորդ/հղում»:
Ահա գլխավոր էջի օրինակ, որը պարունակում է հղում դեպի «Մոտ» էջի:
Եթե ցանկանում եք ոճավորել հղումը, օգտագործեք հետևյալ շարահյուսությունը.
Վերահղման երթուղիներ
Իսկ եթե Ձեզ անհրաժեշտ է ստիպել վերահղում կատարել որոշակի էջ: Օրինակ, երբ կոճակը սեղմվում է. Դուք կարող եք դա անել՝ օգտագործելով «router.push»:
SEO
Վեբ հավելվածների էջերը պահանջում են մետա (գլուխ) տարրեր՝ ի լրումն HTML մարմնի տվյալների: Սա կպահանջի լրացուցիչ պահանջի տեղադրում, որը կոչվում է React Helmet React հավելվածում:
Մենք կարող ենք օգտագործել Head բաղադրիչը next/head-ից Next-ում, որպեսզի հեշտությամբ մետատվյալներ ավելացնենք մեր վեբէջերում, որոնք կցուցադրվեն որոնման արդյունքներում և ներկառուցվածներում.
Բաղադրիչներ
Ձեզ հաճախ անհրաժեշտ կլինի մշակել բաղադրիչներ կամ դասավորության ֆայլ: Օրինակ, բաղադրիչ, որը ներկայացնում է navbar-ը: Մենք պարզապես օգտագործել ենք էջերի պանակը մինչ այժմ: Իսկ եթե ձեր բաղադրիչը նախատեսված չէ լինել երթուղու էջ:
Դուք չեք ցանկանում, որ օգտվողը նավարկի այնպիսի էջ, ինչպիսին է localhost/navbar-ը: Եթե Navbar.js բաղադրիչը տեղադրեք էջերի թղթապանակում, դա տեղի կունենա: Ի՞նչ պետք է անեք իրավիճակում:
Պարզապես պահեք ձեր բոլոր «ոչ էջ» բաղադրիչները առանձին թղթապանակում: Next.js նախագծերի մեծ մասը օգտագործում է «բաղադրիչներ» անվանումը, և այս թղթապանակը ստեղծվում է ձեր նախագծի արմատային պանակում:
Գլխի բաղադրիչ
Էջի սկզբնական բեռնումը կատարվում է Next.js-ի կողմից սերվերի կողմից: Դա անում է ձեր էջի HTML-ը փոփոխելով: Ներառված է վերնագրի բաժինը:
Next.js Head բաղադրիչն օգտագործվում է վերնագրի բաժնի թեգեր տալու համար, ինչպիսիք են վերնագիրը և մետա: Head բաղադրիչն օգտագործվում է Layout բաղադրիչի այս օրինակում:
Ստեղծեք 404 էջ, որը չի գտնվել
Հնարավոր է ստեղծել ձեր սեփական 404 սխալի էջը: Կարող եք հարմարեցնել հաղորդագրությունը կամ ավելացնել ձեր սեփական էջի ձևավորումը: Էջերի պանակում ստեղծեք 404.js ֆայլը:
Երբ տեղի է ունենում 404 սխալ, Next.js-ն ավտոմատ կերպով կվերահղվի այս էջ: Ահա անհատականացված 404 էջի օրինակ.
Տվյալների բեռնում սերվերի կողմից
Հաճախորդի կողմից տվյալները ներբեռնելու փոխարեն Next.js-ը թույլ է տալիս կատարել նախնական տվյալների հավաքում, ինչը ենթադրում է էջ ուղարկել սերվերից արդեն բնակեցված տվյալների հետ:
Դուք ունեք երկու ընտրություն սերվերի կողմից տվյալների առբերման իրականացման համար.
- Տվյալները պետք է բեռնվեն յուրաքանչյուր հարցում:
- Ստացեք տվյալներ միայն մեկ անգամ շինարարության ընթացքում (ստատիկ տեղամաս)
Ստացեք տվյալներ յուրաքանչյուր հարցման վերաբերյալ
GetServerSideProps մեթոդն օգտագործվում է սերվերի կողմից յուրաքանչյուր հարցում ներկայացնելու համար: Այս գործառույթը կարող է ներառվել ձեր բաղադրիչ ֆայլի վերջում: Next.js-ն ավտոմատ կերպով կլցնի ձեր բաղադրիչի հենարանները getServerSideProps օբյեկտով, եթե այդ ֆունկցիան առկա է ձեր բաղադրիչ ֆայլում:
Վերցրեք տվյալները ստեղծման ժամանակ
GetStaticProps մեթոդը օգտագործվում է սերվերի կողմից կառուցման ժամանակ մատուցելու համար: Այս գործառույթը կարող է ներառվել ձեր բաղադրիչ ֆայլի վերջում: Այս մեթոդը գործարկում է սերվերի կոդը և GET հարցում է ուղարկում սերվերին, բայց միայն մեկ անգամ, երբ մեր նախագիծն ավարտված է:
Ինչու՞ պետք է սովորել Next.js-ը:
Դրա պատճառներից մեկն այն է, որ Next.js-ը կառուցված է React-ի վերևում՝ ճակատային զարգացման գործիքակազմի համար: օգտատիրոջ միջերեսների ստեղծում որոնք իմ սիրելի ընտրությունն են վեբ հավելվածների նախագծման համար:
Բայց դա բավարար չէր լինի, եթե Next.js-ը լավ չլինի իր արածի մեջ… չէ՞:
Այսպիսով, կոնկրետ ինչ է դա անում:
Այն հասկանալու համար նախ պետք է մի քանի հասկացություն սահմանենք։ Next.js-ը հանրաճանաչություն ձեռք բերեց, քանի որ լուծեց այն խնդիրը, որը շատ վեբ մշակողներ ունեին հաճախորդի կողմից վեբ հավելվածների հետ (բրաուզերում): Այս մեկ էջանոց հավելվածները (SPA) ավելի լավ փորձ ունեին, քանի որ նրանք կարիք չունեին օգտվողին վերաբեռնելու էջը և թույլ էին տալիս ավելի շատ ինտերակտիվություն:
Այնուամենայնիվ, քանի որ նման հավելվածի նյութի մեծ մասը տեսանելի է դառնում միայն այն ժամանակ, երբ այն կատարվում է զննարկիչում, վեբ որոնիչները դժվարանում են հասկանալ նման հավելվածի տեքստի բովանդակությունը:
Արդյունքում, չնայած իրենց ժողովրդականությանը, շատ SPA-ներ հիմնականում անանուն մնացին այնպիսի խոշոր որոնման համակարգերի համար, ինչպիսին է Google-ը: Next.js-ն այժմ ներառում է React բաղադրիչների սերվերի կողմից մատուցման (SSR) ավելի ամուր ներկառուցված մեխանիզմ:
Next.js-ը ծրագրավորողներին թույլ է տալիս կառուցել JavaScript կոդ սերվերի վրա կառուցման գործընթացում և տրամադրել հիմնական, ինդեքսավորվող HTML օգտատիրոջը:
Կոալիցիայում
- Հիանալի է օգտագործողի փորձի համար
- Հիանալի է SEO-ի համար
- Կառուցեք գերարագ ստատիկ կայք, որն իրեն դինամիկ է պահում
- UI և UX կառուցելու ճկունություն:
- Զարգացման բազմաթիվ առավելություններ
- Համայնքի մեծ աջակցություն
Դեմ
- Կայքերը կամ հավելվածները որոշակի ժամանակ ունեն կառուցելու կամ մշակելու համար:
- Որոշ առաջադրանքների համար Next.js-ը անբավարար է: Մշակողները պետք է կարողանան դինամիկ երթուղիներ կառուցել՝ օգտագործելով Node.js գործիքները:
Եզրափակում
Ինչպես տեսնում եք, Next.js-ը պարզեցնում է React հավելվածի մշակումը և թույլ է տալիս կենտրոնանալ այն ամենի վրա, ինչն ամենակարևորն է՝ ձեր հավելվածի տրամաբանությունը և միջերեսը: Այն ներառում է այն ամենը, ինչ անհրաժեշտ է ժամանակակից, առջևից հարուստ և API-ով աշխատող հավելվածներ ստեղծելու համար:
Այն նաև հարմար է միայն բովանդակությամբ նախագծերի համար, ինչպիսիք են բլոգները և բիզնես կայքերը, քանի որ այն կարող է ստատիկ HTML էջեր ստեղծել:
Ընթացիկ հրատարակություններով Next.js-ը ոչ միայն պահպանում է ծրագրավորողների փորձի բարձր մակարդակը, այլև գործիքներ է տալիս տեսողական արդյունավետությունն ու օգտատերերի փորձը բարձրացնելու համար՝ ապահովելով այս շրջանակի պայծառ ապագան:
Թողնել գրառում