სარჩევი[დამალვა][ჩვენება]
პროგრამული უზრუნველყოფის ბიბლიოთეკის ან ჩარჩოს არჩევისას, როგორც წესი, მხედველობაში მიიღება დეველოპერის გამოცდილება.
როდესაც ვახსენებ „დეველოპერთა გამოცდილებას“, მე ვგულისხმობ იმას, თუ როგორ ასრულებენ დეველოპერები რეალურად სამუშაოს. დეველოპერები ირჩევენ ბიბლიოთეკებს ან ჩარჩოებს, რომელთა გამოყენება სასიამოვნოა.
ეს არის ერთ-ერთი მთავარი მიზეზი, რის გამოც ახლა ჩვენ გვაქვს ყველაზე პოპულარული ბიბლიოთეკები და ჩარჩოები. როგორც დეველოპერებს, ჩვენ არ უნდა დავიწყოთ ნულიდან, როდესაც არსებობს არსებული ხელსაწყოები, რომლებიც დაგვეხმარება ამოცანების შესრულებაში.
Frameworks არის პროგრამული უზრუნველყოფის ნაწილები, რომლებიც იქმნება და გამოიყენება დეველოპერების მიერ აპლიკაციების შესაქმნელად, და NextJS არის ერთ-ერთი მათგანი.
ამ პოსტში განვიხილავთ Nextjs-ს, მის ძირითად მახასიათებლებს და როგორ გამოვიყენოთ იგი აპლიკაციის შესაქმნელად. მოდი პირდაპირ შევიხტეთ.
რა არის Next.js?
შემდეგი. Js არის JavaScript ჩარჩო სტატიკური ვებგვერდებისა და React-ზე დაფუძნებული ონლაინ აპლიკაციების სწრაფად და მარტივად შესაქმნელად. ის საშუალებას გაძლევთ შექმნათ შესანიშნავი ვებ აპლიკაციები სხვადასხვა პლატფორმისთვის, მათ შორის Windows, Linux და Mac.
თქვენ უნდა გაეცნოთ Next.js ჩარჩოს, თუ მინიმალური იცნობთ 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 აპლიკაცია?
მონტაჟი
შეგიძლიათ გამოიყენოთ node npx ბრძანება Next.js პროექტის ინსტალაციისა და ასაშენებლად.
ეს შექმნის საქაღალდეს და ყველა ფაილს, კონფიგურაციას და სხვა ელემენტებს, რომლებიც საჭიროა Next.js პროექტის გასაშვებად.
შეგიძლიათ აპლიკაციის გაშვება გენერირების შემდეგ.
გვერდები და მარშრუტიზაცია
Next.js-ით მარშრუტების დასამუშავებლად, ჩვენ არ გვჭირდება მარშრუტიზაციის ჩარჩოს გამოყენება. Next.js-ით მარშრუტიზაცია საკმაოდ რთულია. როდესაც იყენებთ create-next-app ბრძანებას ახალი Next.js აპის ასაშენებლად, აპი ნაგულისხმევად ქმნის საქაღალდეს სახელწოდებით „pages“.
ეს "გვერდები" საქაღალდე არის სადაც თქვენ ინახავთ თქვენს მარშრუტებს. შედეგად, თითოეული რეაგირების კომპონენტის ფაილი ქვედირექტორიაში განიხილება, როგორც ცალკე მარშრუტი.
მაგალითად, თუ საქაღალდე შეიცავს ამ ფაილებს:
- index.js
- შესახებ.js
- aricles.js
ეს ფაილი ავტომატურად გარდაიქმნება სამი გზით:
- ინდექსის გვერდი localhost/index
- გვერდის შესახებ localhost/about
- ბლოგის გვერდი localhost/სტატიები
about.js გვერდის მაგალითი ნაჩვენებია ქვემოთ. გვერდის შესახებ არაფერია მოწოდებული, როგორც ხედავთ. ეს უბრალოდ სტანდარტული React ფუნქციური კომპონენტია.
მარშრუტები
ჩადგმული მარშრუტების შესაქმნელად, ჯერ უნდა შექმნათ ქვესაქაღალდე. მაგალითად: გვერდები/სტატიები. შექმენით თქვენი 'contact.js' react კომპონენტი ამ საქაღალდეში და ის გამოიმუშავებს გვერდს localhost/articles/contact.
თუ თქვენ განათავსებთ ერთ ფაილს pages/articles.js-ში და მეორეს pages/articles/index.js-ში. ორივე ასახავს ერთსა და იმავე გზას localhost/blog. ამ სიტუაციაში, Next.js უბრალოდ გამოიტანს article.js ფაილს. რაც შეეხება დინამიურ მარშრუტებს, რომლებშიც თითოეულ ბლოგ პოსტს აქვს საკუთარი გზა:
- localhost/blog/first-სტატია
- ლოკალჰოსტი/ბლოგი/-მეორე-სტატია
ფრჩხილების აღნიშვნის გამოყენებით, შეგიძლიათ განსაზღვროთ დინამიური მარშრუტი Next.js-ში. მაგალითად: pages/article/[slug].js
მარშრუტების დაკავშირება
თქვენ ახლა დაასრულეთ თქვენი პირველი მარშრუტი. ვფიქრობ, თქვენ გეკითხებით, როგორ დააკავშიროთ გვერდები ამ მარშრუტებთან. ამისათვის დაგჭირდებათ „შემდეგი/ბმული“.
აქ მოცემულია მთავარი გვერდის მაგალითი, რომელიც შეიცავს ბმულს შესახებ გვერდზე:
თუ გსურთ ბმულის სტილი, გამოიყენეთ შემდეგი სინტაქსი:
მარშრუტების გადამისამართება
რა მოხდება, თუ საჭიროა იძულებით გადამისამართება გარკვეულ გვერდზე? მაგალითად, როდესაც დააჭირეთ ღილაკს? ამის გაკეთება შეგიძლიათ "router.push"-ის გამოყენებით:
SEO
ვებ აპლიკაციების გვერდებს ესაჭიროებათ მეტა (ხელმძღვანელი) ელემენტები HTML სხეულში არსებული მონაცემების გარდა. ეს საჭიროებს დამატებით მოთხოვნის დაყენებას, სახელად React Helmet, React აპლიკაციაში.
ჩვენ შეგვიძლია გამოვიყენოთ Head კომპონენტი შემდეგი/თავიდან შემდეგში, რათა ადვილად დავამატოთ მეტამონაცემები ჩვენს ვებგვერდებზე, რომლებიც ნაჩვენები იქნება ძიების შედეგებსა და ჩაშენებებში:
კომპონენტები
ხშირად დაგჭირდებათ კომპონენტების ან განლაგების ფაილის შემუშავება. მაგალითად, კომპონენტი, რომელიც ასახავს 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-ის აშენებაში.
- განვითარების მრავალი უპირატესობა
- საზოგადოების დიდი მხარდაჭერა
Cons
- ვებსაიტებს ან აპლიკაციებს აქვთ გარკვეული დრო, რათა შექმნან ან განავითარონ.
- გარკვეული ამოცანებისთვის Next.js არაადეკვატურია. დეველოპერებს უნდა შეეძლოთ დინამიური მარშრუტების შექმნა Node.js ინსტრუმენტების გამოყენებით.
დასკვნა
როგორც ხედავთ, Next.js ამარტივებს React აპლიკაციის განვითარებას და საშუალებას გაძლევთ ფოკუსირება მოახდინოთ იმაზე, რაც ყველაზე მნიშვნელოვანია - თქვენი აპლიკაციის ლოგიკა და ინტერფეისი. იგი მოიცავს ყველაფერს, რაც საჭიროა თანამედროვე, წინა პლანშეებით მდიდარი და API-ით აღჭურვილი აპლიკაციების შესაქმნელად.
ის ასევე შესაფერისია მხოლოდ შინაარსიანი პროექტებისთვის, როგორიცაა ბლოგები და ბიზნეს ვებსაიტები, სტატიკური HTML გვერდების შექმნის შესაძლებლობის გამო.
მიმდინარე გამოცემებით, Next.js არა მხოლოდ ინარჩუნებს დეველოპერის გამოცდილების მაღალ დონეს, არამედ იძლევა ინსტრუმენტებს ვიზუალური მუშაობისა და მომხმარებლის გამოცდილების გაზრდისთვის, რაც უზრუნველყოფს ამ ჩარჩოს ნათელ მომავალს.
დატოვე პასუხი