Mündəricat[Gizlət][Göstər]
Proqram kitabxanası və ya çərçivə seçərkən adətən tərtibatçının təcrübəsi nəzərə alınır.
“Tərtibatçı təcrübəsi” dedikdə, tərtibatçıların əslində işi necə yerinə yetirdiyini nəzərdə tuturam. Tərtibatçılar istifadə etmək üçün xoş olan kitabxanaları və ya çərçivələri seçirlər.
Bu, indi ən populyar kitabxanalara və çərçivələrə sahib olmağımızın əsas səbəblərindən biridir. Tərtibatçılar olaraq, tapşırıqlarımızı yerinə yetirmək üçün bizə kömək etmək üçün yaradılmış mövcud alətlər olduqda sıfırdan başlamaq məcburiyyətində deyilik.
Çərçivələr proqramlar yaratmaq üçün tərtibatçılar tərəfindən yaradılan və istifadə olunan proqram parçalarıdır və NextJS onlardan biridir.
Bu yazıda biz Nextjs-ə, onun əsas xüsusiyyətlərinə və proqram yaratmaq üçün ondan necə istifadə edə biləcəyimizə baxacağıq. Gəlin içəri girək.
Next.js nədir?
Sonrakı.js statik veb-səhifələri və React əsaslı onlayn proqramları tez və asanlıqla qurmaq üçün JavaScript çərçivəsidir. Bu, Windows, Linux və Mac daxil olmaqla, müxtəlif platformalar üçün əla Veb proqramlar hazırlamağa imkan verir.
Əgər reaksiya ilə minimal tanışlığınız varsa və reaksiya ekosistemi haqqında daha çox öyrənmək istəyirsinizsə, Next.js çərçivəsi ilə tanış olmalısınız.
Next.js işə başlamaq üçün lazım olan hər şeylə birlikdə gəlsə də, siz NPM və Yarn, JavaScript və TypeScript, CSS və SCSS, statik ixrac və serversiz yerləşdirmə arasında seçim edə bilərsiniz.
Xüsusiyyətləri
- Marşrutlaşdırma avtomatik həyata keçirilir – Siz heç nəyi konfiqurasiya etməyinizə ehtiyac yoxdur, çünki hər hansı URL fayl sisteminə, səhifələr qovluğundakı fayllara uyğunlaşdırılıb (əlbəttə ki, fərdiləşdirmə seçimləriniz var).
- Tək Faylın Komponentləri – Tamamilə inteqrasiya olunmuş və eyni komanda tərəfindən istehsal olunan styled-jsx-dən istifadə edərək komponentə əhatə olunmuş üslubları əlavə etmək asandır.
- Qaynar Kodun Yenidən Yüklənməsi – Next.js diskdə saxlanmış modifikasiyanı aşkar etdikdə səhifəni yenidən yükləyir.
- Dinamik Komponentlər – Siz JavaScript modullarını və Reaksiya Komponentlərini dinamik şəkildə yükləyə bilərsiniz.
- Statik ixraclar – Next.js sizə növbəti ixrac əmri ilə tətbiqinizdən tamamilə statik saytı ixrac etməyə imkan verir.
- Ətraf Mühitlə Uyğunluq – Next.js JavaScript, Node və React ekosistemləri ilə mükəmməl inteqrasiya edir.
- Kodların avtomatik bölünməsi – Səhifələri göstərmək üçün yalnız tələb olunan kitabxanalar və JavaScript istifadə olunur. Proqramın bütün kodunu ehtiva edən tək JavaScript faylı yaratmaq əvəzinə Next.js proqramı ağıllı şəkildə bir çox resurslara bölür.
Next.js tətbiqini necə yaratmaq olar?
quraşdırma
Next.js layihəsini quraşdırmaq və qurmaq üçün node npx əmrindən istifadə edə bilərsiniz.
Bu, Next.js layihəsini icra etmək üçün tələb olunan qovluq və bütün faylları, konfiqurasiyaları və digər elementləri yaradacaq.
Proqram yaradıldıqdan sonra onu işə sala bilərsiniz.
Səhifələr və Yönləndirmə
Next.js ilə marşrutları idarə etmək üçün marşrutlaşdırma çərçivəsini istifadə etməyimizə ehtiyac yoxdur. Next.js ilə marşrutlaşdırma qurmaq üçün sadədir. Yeni Next.js tətbiqini yaratmaq üçün Create-next-app əmrindən istifadə etdiyiniz zaman proqram defolt olaraq "səhifələr" adlı qovluq yaradır.
Bu "səhifələr" qovluğu sizin marşrutlarınızı saxladığınız yerdir. Nəticədə, alt qovluqdakı hər reaksiya komponentləri faylı ayrıca marşrut kimi idarə olunacaq.
Məsələn, qovluqda həmin fayllar varsa:
- indeks.js
- about.js
- aricles.js
Bu fayl avtomatik olaraq üç yolla çevriləcək:
- İndeks səhifəsi localhost/index
- Haqqında səhifə localhost/haqqında
- Localhost/məqalələr blog səhifəsi
about.js səhifəsinin nümunəsi aşağıda göstərilmişdir. Gördüyünüz kimi səhifə haqqında heç nə verilmir. Bu, sadəcə olaraq standart React funksional komponentidir.
Marşrutlar
İç-içə marşrutlar yaratmaq üçün əvvəlcə alt qovluq yaratmalısınız. Məsələn: səhifələr/məqalələr. Həmin qovluqda 'contact.js' reaksiya komponentinizi yaradın və o, localhost/articles/contact səhifəsini yaradacaq.
Bir faylı pages/articles.js-ə, digərini isə pages/articles/index.js-ə yerləşdirsəniz. Hər ikisi eyni yolu əks etdirir localhost/blog. Bu vəziyyətdə Next.js sadəcə article.js faylını göstərəcək. Hər bir blog yazısının öz yolu olan dinamik marşrutlar haqqında nə demək olar:
- localhost/blog/birinci məqalə
- localhost/blog/-ikinci məqalə
Mötərizədə qeydlərdən istifadə edərək Next.js-də dinamik marşrut təyin edə bilərsiniz. Məsələn: pages/article/[slug].js
Bağlantı marşrutları
Artıq ilk marşrutunuzu tamamladınız. Güman edirəm ki, siz səhifələri bu marşrutlara necə qoşmağı soruşursunuz. Bunu etmək üçün sizə "növbəti/link" lazımdır.
Haqqında səhifəsinə keçidi ehtiva edən ana səhifənin nümunəsi:
Əgər linkə stil vermək istəyirsinizsə, aşağıdakı sintaksisdən istifadə edin:
İstiqamətləndirmə marşrutları
Müəyyən bir səhifəyə yönləndirməni məcbur etmək lazımdırsa nə etməli? Məsələn, bir düyməyə basıldığında? Bunu 'router.push' istifadə edərək həyata keçirə bilərsiniz:
SEO
Veb proqramlarındakı səhifələr HTML gövdəsindəki məlumatlara əlavə olaraq meta (baş) elementləri tələb edir. Bu, React Tətbiqində React Helmet adlı əlavə tələbin quraşdırılmasını tələb edəcək.
Axtarış nəticələrində və yerləşdirmələrdə görünəcək veb səhifələrimizə asanlıqla metadata əlavə etmək üçün Next/head-dən Next komponentindən istifadə edə bilərik:
Components
Siz tez-tez komponentlər və ya tərtibat faylı hazırlamalı olacaqsınız. Məsələn, navbarı göstərən komponent. Biz indiyə qədər yalnız səhifələr qovluğundan istifadə etmişik. Əgər komponentiniz marşrut səhifəsi olmaq üçün nəzərdə tutulmayıbsa nə olacaq?
Siz istifadəçinin localhost/navbar kimi səhifəyə keçməsini istəmirsiniz. Navbar.js komponentini səhifələr qovluğuna yerləşdirsəniz, belə olacaq. Vəziyyətdə nə etməlisən?
Sadəcə olaraq bütün "səhifə deyil" komponentlərinizi ayrıca qovluqda saxlayın. Əksər Next.js layihələri 'komponentlər' ləqəbindən istifadə edir və bu qovluq layihənizin kök qovluğunda yaradılır.
Baş komponenti
İlkin səhifə yüklənməsi server tərəfində Next.js tərəfindən həyata keçirilir. Bunu səhifənizin HTML-ni dəyişdirərək edir. Başlıq bölməsi daxildir.
Next.js Head komponenti başlıq və meta kimi başlıq bölməsi teqlərini vermək üçün istifadə olunur. Baş komponenti Layout komponentinin bu nümunəsində istifadə olunur.
Yarat 404 səhifə tapılmadı
Öz 404 səhv səhifənizi yaratmaq mümkündür. Mesajı fərdiləşdirmək və ya öz səhifə dizaynınızı əlavə etmək istəyə bilərsiniz. Səhifələr qovluğunda 404.js faylını yaradın.
404 xətası baş verdikdə Next.js avtomatik olaraq bu səhifəyə yönləndiriləcək. Budur fərdiləşdirilmiş 404 səhifəsinin nümunəsi:
Server tərəfdən məlumatların alınması
Müştəri tərəfində verilənləri yükləmək əvəzinə Next.js sizə ilkin məlumat toplusunu aparmağa imkan verir ki, bu da serverdən artıq doldurulmuş verilənlərlə səhifənin göndərilməsini nəzərdə tutur.
Server tərəfdən məlumatların alınmasını həyata keçirmək üçün iki seçiminiz var:
- Hər sorğu üzrə məlumat alınmalıdır.
- Tikinti prosesində yalnız bir dəfə məlumat əldə edin (statik sayt)
Hər sorğu üzrə məlumat əldə edin
GetServerSideProps metodu hər sorğunu server tərəfində göstərmək üçün istifadə olunur. Bu funksiya komponent faylınızın sonuna daxil edilə bilər. Next.js, komponent faylınızda bu funksiya varsa, avtomatik olaraq getServerSideProps obyekti ilə komponent rekvizitlərinizi dolduracaq.
Quraşdırma zamanı məlumat əldə edin
GetStaticProps metodu quraşdırma zamanı server tərəfini göstərmək üçün istifadə olunur. Bu funksiya komponent faylınızın sonuna daxil edilə bilər. Bu üsul server kodunu işlədir və serverə GET sorğusu göndərir, lakin layihəmiz başa çatdıqdan sonra yalnız bir dəfə.
Niyə Next.js öyrənməlisiniz?
Bunun səbəblərindən biri Next.js-nin React üçün qabaqcıl inkişaf alətləri dəsti üzərində qurulmasıdır. istifadəçi interfeyslərinin yaradılması bunlar veb proqramların dizaynı üçün mənim sevimli seçimimdir.
Ancaq Next.js öz işində yaxşı olmasaydı, bu kifayət etməzdi... düzdür?
Yaxşı, o, tam olaraq nə edir?
Onu dərk etmək üçün əvvəlcə bir neçə anlayışı müəyyənləşdirməliyik. Next.js populyarlıq qazandı, çünki o, bir çox veb tərtibatçısının müştəri tərəfi veb proqramları ilə (brauzerdə) qarşılaşdığı problemi həll etdi. Bu Tək Səhifəli Tətbiqlər (SPA) daha yaxşı təcrübəyə malik idi, çünki onlar istifadəçinin səhifəni yenidən yükləməsinə ehtiyac duymur və daha çox interaktivliyə imkan verirdi.
Bununla belə, bu kimi bir proqramdakı materialın böyük hissəsi yalnız brauzerdə yerinə yetirildikdə göründüyü üçün veb brauzerlər belə bir tətbiqin mətn məzmununu başa düşməkdə çətinlik çəkirlər.
Nəticədə, populyarlıqlarına baxmayaraq, bir çox SPA Google kimi böyük axtarış motorları üçün anonim olaraq qaldı. Next.js indi React komponentlərinin server tərəfində göstərilməsi (SSR) üçün daha möhkəm daxili mexanizmdən ibarətdir.
Next.js tərtibatçılara qurma prosesi zamanı serverdə JavaScript kodu qurmağa və istifadəçiyə əsas, indeksləşdirilə bilən HTML təqdim etməyə imkan verir.
Pros
- İstifadəçi təcrübəsi üçün əladır
- SEO üçün əladır
- Dinamik kimi davranan super sürətli statik veb sayt yaradın
- UI və UX qurmaqda çeviklik.
- Bir çox inkişaf üstünlükləri
- Böyük icma dəstəyi
Eksiler
- Veb saytların və ya proqramların qurulması və ya inkişafı üçün müəyyən vaxt var.
- Müəyyən tapşırıqlar üçün Next.js qeyri-adekvatdır. Tərtibatçılar Node.js alətlərindən istifadə edərək dinamik marşrutlar qura bilməlidirlər.
Nəticə
Gördüyünüz kimi, Next.js React tətbiqinin işlənməsini asanlaşdırır və diqqətinizi ən vacib olana – proqram məntiqinizə və UI-yə yönəltməyə imkan verir. Bura müasir, qabaqcıl zəngin və API ilə işləyən proqramlar yaratmaq üçün lazım olan hər şey daxildir.
Statik HTML səhifələri yaratmaq qabiliyyətinə görə, bloqlar və biznes saytları kimi yalnız məzmunlu layihələr üçün də uyğundur.
Cari nəşrlərlə Next.js nəinki yüksək səviyyəli tərtibatçı təcrübəsini saxlayır, həm də vizual performansı və istifadəçi təcrübəsini artırmaq üçün alətlər təqdim edir və bu çərçivə üçün parlaq gələcək təmin edir.
Cavab yaz