Zamonaviy veb-ishlab chiqish yuqori mahsuldorlik va foydalanuvchi tajribasi standartlariga javob beradigan samarali vositalarni talab qiladi. Ushbu maqolada biz Vercel tomonidan yaratilgan kuchli JavaScript frameworku va React-ga asoslangan zamonaviy veb-ilovalarni yaratish uchun innovatsion yechim bo'lgan Nextjs-ni ko'rib chiqamiz. Bu ishlab chiquvchilarga yuqori samarali, kengaytiriladigan va SEO veb-ilovalarni yaratishda qanday yordam berishini bilib olamiz. Shuningdek, biz uning funksionalligiga chuqur sho'ng'iymiz, serverni ko'rsatish va statik saytlarni yaratish kabi xususiyatlarni ko'rib chiqamiz va foydalanish misollarini taqdim etamiz. Keling, Nextjs qanday qilib zamonaviy veb-ishlab chiqishda asosiy vositaga aylanib, turli xil xususiyatlar va optimal ishlash o'rtasidagi mukammal muvozanatni ta'minlaymiz.

Bitta praktikum kursda eng top Next.JS dasturchi bo'lmoqchi bo'lsangiz, ushbu kurs aynan siz uchun -> Praktikum.sammi.ac

Nextjs-ning asosiy xususiyatlari

Nextjs uni ishlab chiquvchilar uchun jozibador qiladigan ko'plab xususiyatlarga ega. Foydalanuvchi interfeyslarini yaratish uchun kutubxona sifatida Nextjs-ni Nodejs mavjudligi va bajarilgan mantiqning bir qismini server tomoniga autsorsing qilish qobiliyati tufayli backend vositasi deb hisoblash mumkin. Keling, Nextjs-ning asosiy xususiyatlarini ko'rib chiqaylik.

NextJS bepul to'liq kurs 29 soat material 4ta loyiha -> sammi.ac

1. Server tomonida ko'rsatish (SSR) va statik sayt yaratish (SSG)

Node js-da server qatlamini ishga tushirish bilan Nextjs server tomonidagi sahifalarni oldindan ko'rsatishda juda yaxshi ish qiladi, bu sizga HTML tarkibini to'g'ridan-to'g'ri brauzerga o'tkazish orqali tezroq yuklash va SEO-ni yaxshilashga imkon beradi. Ushbu uslub qidiruv tizimlarida foydalanuvchi tajribasi va ko'rinishini yaxshilashga imkon beradi.

2. Kodni avtomatik ajratish

Framework avtomatik ravishda kodni kichikroq, boshqariladigan qismlarga ajratadi. Bu sizga faqat kerakli komponentlarni yuklab olish imkonini beradi, sahifani yuklash vaqtini qisqartiradi va uning ish faoliyatini yaxshilaydi.

3. Ichki CSS-ni qo'llab-quvvatlash

Nextjs turli xil CSS-in-JS kutubxonalari bilan muammosiz birlashadi, bu esa uslubni soddalashtiradi va qo'shimcha Sozlamalar va vositalarga bo'lgan ehtiyojni yo'q qiladi.

4. Tez yangilash yokida HMR.

HMR ishlab chiquvchilarga sahifani yangilashni talab qilmasdan Real vaqt rejimida o'zgarishlarni ko'rish imkonini beradi, bu esa ishlab chiqish jarayonini yanada samarali va yoqimli qiladi.

5. Fayl tizimiga asoslangan yo'riqnoma

Nextjs ilovasida routlarni yaratish juda ko'p kuch talab qilmaydi. Papka va fayl tuzilishi mijoz qismining dastur tarkibiy qismlariga kirish yo'llarini belgilaydi. Shuningdek, Nextjs server va mijozning xatti-harakati va kontekstini ajratish uchun fayl tizimi nomlaridagi kalit so'zlarni qo'llab-quvvatlaydi. Xususan, " api " deb nomlangan papka ichidagi komponentlar API-lar tarkibiy qismlar emas, balki endpoints deb hisoblanadi va dasturning mijoz qismiga avtomatik ravishda kiritilmaydi. Ushbu xususiyat, shuningdek, dinamik ma'lumotlar tajribasini taqdim etish orqali backend funksiyasini frontend bilan birlashtirishni osonlashtiradi.

Tuzilish usullari: Page router va App router

Dastlab, Nextjs Page deb nomlangan dasturni yaratish tuzilishini qo'llab-quvvatladi va shu bilan birga intuitiv ravishda sodda App tuzilishi ustida ishladi. App router joriy yilning mart oyida beta-dan rasman chiqdi. Keling, har bir tuzilmaning asosiy tamoyillarini batafsil ko'rib chiqaylik.

Page Router

Nextjs-ning barqaror va vaqt sinovidan o'tgan paradigmasi

1. Routingning fayl tuzilishi

Yuqorida aytib o'tilganidek, Page tuzilishi dasturning fayl tizimi orqali yo'riqnoma yaratadi. Malumot nuqtasi pages deb nomlangan maxsus papka bo'lib, uning ichida sahifalar katalogidagi har bir jsx yoki tsx fayli ilova navigatsiyasidagi marshrutni ifodalaydi. Masalan, sahifalar papkasida about.tsx nomli fayl sizning ilovangizda /about marshrutini yaratadi. Xuddi shu tarzda, tarkibiy qismlarni roli va yo'nalishi bo'yicha guruhlash uchun kerak bo'lganda sahifalar ichida boshqa papkalarni yaratish mumkin – pages/help/contact-us.tsx [ages/help/contact-us.tsx fayl yo'li, brauzerda /help/contact-us yo'li orqali komponentga kirish huquqini beradi. Routlarni tashkil etishga bunday yondashuv ishlab chiquvchilarning mehnat unumdorligini oshiradi, chunki odatdagi React-ishlab chiqish bilan taqqoslaganda, yo'riqnomani tarkibiy qismlarga qo'lda yaratish va ro'yxatdan o'tkazish zarurati yo'qoladi, bu esa kodning o'qilishini yaxshilaydi.

2. Dinamik routing

Nextjs fayl nomidagi qavslardan [] foydalanish orqali dinamik marshrutlashni ta'minlaydi. Masalan, user papkasidagi [id].tsx nomli fayl /user/1, /user/2 va boshqalar kabi routerlarga mos kelishi mumkin. Dinamik marshrutlar moslashuvchan va parametrlangan veb-manzillarni yaratishga imkon beradi, bu esa foydalanuvchilarga individual tarkib ko'rinishini beradi.

To'liq yo'riqnoma tizimini quyidagi sxema bilan tavsiflash mumkin:

3. Zahiralangan ismlar

Ilovani ishlab chiqishni soddalashtirish uchun, fayl tuzilishiga nisbatan yo'riqnoma bilan bir qatorda, Page router bir qator skriptlarni avtomatik ravishda qo'llab-quvvatlash uchun ajratilgan nomlarga ega komponentlar bilan ishlaydi. Bunday asosiy komponent _app.jsx/tsx – to'g'ridan-to'g'ri sahifalar papkasida joylashgan ildiz komponenti. Standart React dasturlarida bo'lgani kabi, uning roli umumiy layoutlarni ishga tushirishni ta'minlashdir (UI elementlari masalan, header yoki footer) va Global miqyosda ishlatiladigan har qanday mantiq, masalan, React kontekstlari yoki global holatni boshqarish. Hamma joyda ishlatiladigan boshqa zaxira nomi index. Ushbu nomdagi komponentlar dastur tomonidan asosiy routlarda ko'rsatiladi, ya'ni. pages/index.tsx/ manzilida mavjud, xuddi shunday, har bir sahifalar pastki papkasidagi indeks komponenti tegishli manzilning asosiy routeriga muvofiq qayta ishlanadi.

Yana bir nechta zaxira nomlari (fayllar to'g'ridan-to'g'ri pagesda bo'lishi kerak):

• _document.jsx/tsx - kamdan kam ishlatiladigan komponent, hujjatning Nextjs standart HTML tuzilishini qayta yozish uchun mo'ljallangan;
• 404.jsx/tsx - Nextjs serverining 404 xatosini sozlash uchun komponent (masalan, mavjud bo'lmagan rootni URLga kiritishga urinish). Maxsus komponent bo'lmasa, nextjs statik dastur tuzilishi paytida standartni yaratadi;
• 500.jsx/tsx – 500 server xato uchun;
• _error.jsx/tsx  – standart 404/500 komponentlarini almashtiradigan server xatolariga javobni sozlash komponenti.

4. Kodni avtomatik ajratish

Nextjs kodni avtomatik ravishda qismlarga ajratadi, faqat joriy sahifa uchun zarur bo'lgan JavaScript qismlarini yuklaydi. Bu sizga sahifani yuklash vaqtini qisqartirish va ilovaning umumiy ish faoliyatini yaxshilash imkonini beradi. Kodni ajratish foydalanuvchilarning o'ziga xos o'zaro ta'siriga moslashtirilgan optimallashtirilgan va engil bloklarga ega bo'lishini ta'minlaydi.

5. Ma'lumotlarni olish

Page routerida getStaticProps va getServerSideProps kabi ma'lumotlarni olish usullari amalga oshiriladi. Ushbu usullar ma'lumotlarni server tomonida yoki qurilish vaqtida olish imkonini beradi, bu esa dinamik tarkibga ega sahifalarni oldindan ko'rsatish imkonini beradi. Ushbu imkoniyat veb-ilovaning foydalanuvchilarga unumdorlikni buzmasdan tegishli ma'lumotlarni taqdim etishini ta'minlaydi. Keling, ularni batafsil ko'rib chiqaylik.

getStaticProps-bu Next komponentiga ichki mantiqni bajarishni va keyin olingan ma'lumotlarni (proplarni) uzatishni va dasturni yig'ish jarayonida o'zini ko'rsatishni ko'rsatadigan usul. GetStaticProps() bilan qurish bosqichida ko'rsatish keyingi komponentni joylashtirishdan oldin degan ma'noni anglatadi.js React-ni standart HTML-sahifalarga aylantiradi va shundan keyingina ular xostingga joylashtiriladi va mijozga taqdim etiladi. HTML-sahifalarni to'g'ridan-to'g'ri yuborish SEO va tez yuklash uchun maqbuldir. Ushbu usul statik sayt yaratish yoki SSG deb nomlanadi.

Komponentga misol:

import type { InferGetStaticPropsType, GetStaticProps } from "next";

type Product = {
  id: number;
  name: string;
  price: number;
  isAvailable: boolean;
};

export const getStaticProps = (async (context) => {
  const res = await fetch("https://...");
  const product = await res.json();
  if (!product) {
    return {
      notFound: true,
    };
  } else if (!product.isAvailable) {
    return {
      redirect: {
        destination: "/products",
        permanent: false,
      },
    };
  }
  return { props: { product } };
}) satisfies GetStaticProps<{
  product: Product;
}>;

export default function Page({
  product,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return product.name;
}

getStaticProps()-bu context obyektiga kirish imkoniyatiga ega bo'lgan asenkron funksiya bo'lib, u dinamik rout, lokal va boshqa parametrlarni saqlashi mumkin. usul 3 ta qaytish variantiga ega:

• notFound - 404 sahifali qayta yo'naltirishni amalga oshiradi. Ushbu misolda, agar biron bir mahsulot ob'ektini olishga harakat qilsangiz, API bo'sh ma'lumotlarni qaytarsa, ushbu skript ishlaydi

• redirect - joriy routni ko'rsatilgan routga o'zgartiradi. Agar mahsulot topilsa, mahsulot sahifasiga shartli ravishda misol keltirilgan, ammo uning parametri isAvailabe:false ushbu mahsulot mavjud emasligini ko'rsatadi.

• props-komponentni keyinchalik ko'rsatish uchun zarur bo'lgan to'g'ridan-to'g'ri ma'lumotlar

GetServerSideProps - bu NextJS komponentini ichki mantiqni bajarishga va olingan ma'lumotlarni (prop) orqali komponent qabul qiladi. HTML faqat bir marta yaratilgan va keyingi so'rovlar uchun saqlanadigan getStaticProps() orqali statik avloddan farqli o'laroq, getServerSideProps() har bir sahifa so'rovi uchun server qatlamini yaratishni ta'minlaydi. Bunday holda, usul ichidagi mantiq, tarqatish va komponentning qisman ko'rsatilishi mijoz tomonidan har bir so'rov uchun server tomonida sodir bo'ladi. Serverda ishlov berilgandan so'ng, mijoz asosiy interaktiv bo'lmagan HTML-ni oladi, shuningdek komponentga interaktivlikni qo'shish uchun JSON-propov ob'ekti va JavaScript ko'rsatmalarini oladi. Shundan so'ng, "gidratsiya" deb ataladigan jarayon sodir bo'ladi – to'liq interaktiv komponentni olish uchun mijoz qismida minimal ko'rsatmalar to'plamini bajarish.

Komponentga misol:

import type { InferGetServerSidePropsType, GetServerSideProps } from "next";

type Product = {
  id: number;
  name: string;
  price: number;
  isAvailable: boolean;
};

export const getServerSideProps = (async (context) => {
  const res = await fetch("https://...");
  const product = await res.json();
  return { props: { product } };
}) satisfies GetServerSideProps<{
  product: Product;
}>;

export default function Page({
  product,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return product.name;
}

Ko'rib turganimizdek, foydalanish usuli getStaticProps() dan unchalik farq qilmaydi, ammo har bir usul uchun holatlarni aniq tanib olish muhimdir. Asosan, getStaticProps() bilan komponentlar ilova qurilishi paytida bir marta ko'rsatiladi va ular kamdan-kam o'zgartiriladigan tashqi ma'lumotlarga bog'liq bo'lsa, ishlashni yaxshilash va SEO uchun juda yaxshi. Yaxshi misol-bu blog sahifasi, chunki ma'lumotlar bazasida bunday ma'lumotlar kamdan-kam hollarda o'zgaradi. Bizning misolimizda ma'lum bir mahsulot sahifasi getServerSideProps () dan foydalanish yanada mos keladi, chunki ba'zi bir mahsulot yoki mahsulot (narx, mavjudlik va shunga o'xshash narsalar) haqidagi ma'lumotlar nisbatan tez-tez o'zgarib turadi va har doim tegishli bo'lishi kerak. Shu munosabat bilan, har bir sahifa so'rovi uchun yangilangan ma'lumotlarni olish server tomonida ko'rsatish (SSR) paytida mantiqning maksimal darajada bajarilishi bilan samarali ta'minlanadi. Albatta, mijoz qismi tomonidan tarkibni olish tezligi va SEO sifati nuqtai nazaridan, bu statik avloddan past. Biroq, bu [VD1] React yoki boshqa front end frameworklarda yozilgan standart SPA-larda bo'lgani kabi, butun jarayonni mijoz tomonidan bajarishdan ko'ra ancha yaxshi.

6. API Routes

Nextjs har qanday holatda Nodejs serveriga ega bo'lgani uchun, yuqorida aytib o'tganimizdek, Page router sizning ilovangizda endpoints API-ni yaratishni osonlashtiradi. Fayllarni pages/api papkasiga joylashtirish orqali http so'rovlarini qayta ishlaydigan serversiz funktsiyalarni aniqlash mumkin. Endroint chaqiruvi, shuningdek, fayl tizimi qoidasiga bo'ysunadi, bu erda manzil API mantig'iga ega papkalar va fayllar nomlari bilan belgilanadi. Ushbu mantiq faqat server tomonida mavjud bo'ladi va mijoz dasturining hajmini oshirmaydi. Ushbu imkoniyat orqa tomonni ishlab chiqishni osonlashtiradi va interaktiv veb-ilovalarni yaratishga imkon beradigan mijoz va server o'rtasida uzluksiz aloqani ta'minlaydi. Buni MERN Stack bilan taqqoslash mumkin, bu erda aloqani soddalashtirish uchun backend JavaScript-da yozilgan.

Oddiy misol:

import type { NextApiRequest, NextApiResponse } from 'next'
 
type ResponseData = {
  message: string
}
 
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ message: 'Привет всем!' })
}

Endpoint JSON ob'ektini 200 holatiga qaytaradi.

App router

Vercel jamoasining so'zlariga ko'ra-nextjs-da rivojlanishning "evolyutsiyasi". Rasmiy veb-sayt nafaqat App routerni yangi loyihalar uchun echim sifatida tavsiya qiladi, balki mavjud loyihalarni yo'riqnoma Pages routesdan o'tkazishni maslahat beradi, bu ikkala modelni birlashtirishga imkon beradi va shu bilan qayta ishlash jarayonini soddalashtiradi. Asosiy o'zgarishlar va tamoyillarni ko'rib chiqing.

1. Routingning fayl tuzilishi

App routerda komponent fayllari marshrutni aniqlashda ishtirok etishni to'xtatadi, chunki har bir sahifa komponenti endi zahiralangan sahifa so'zi deb nomlanishi kerak. Shuning uchun, papkalar butun rolni o'z ichiga oladi – shuning uchun app/about/page yo'lidagi komponent.tsx brauzerda /about manzilida mavjud bo'ladi. Xuddi shunday, dinamik rout sintaksisi endi faqat papkalarga qo'llaniladi-app/users/[id]/page.tsx kabi har qanday narsa, masalan, /users/683 kabi mavjud. Jild nomining boshida " _ " belgisini qo'shish marshrutizatsiyadan loyihaning butun filialini chiqarib tashlaydi.

2. Saqlangan ismlar va sahifalarni shakllantirishdagi roli

Hech kimga sir emaski, ko'plab veb-ilovalarda ko'plab sahifalarda global UI elementlari mavjud yoki bir qator sahifalarda global kontekst yoki holatni boshlash kerak. Standart reaktsiyada va natijada Page routerida bunga zarur umumiy UI elementlari bilan alohida komponentlarni yaratish yoki kontekstlarni ishga tushirish va keyinchalik boshqa komponentlarni "o'rash" orqali erishildi. App router ushbu jarayonni sezilarli darajada soddalashtiradi va sahifalarni ko'rsatganda, ishlab chiquvchi tomonidan qo'shimcha ro'yxatdan o'tmasdan kerakli sahifa ierarxiyasini shakllantirish uchun avtomatik ravishda tan olinadigan komponentlar uchun bir qator ajratilgan nomlarni taqdim etadi.

Bunday asosiy komponent layout hisoblanadi. Uning roli fayl tizimi segmenti uchun umumiy UI va kontekstni taqdim etishdir. Root layout to'g'ridan-to'g'ri app papkasida joylashgan bo'lib, mutlaqo har bir sahifaning "umurtqa pog'onasi" ni tashkil qiladi.

Asosiy misol:

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Layout komponentlarining o'ziga xos xususiyati shundaki, ularni ko'rsatish ilovaning butun hayot aylanish jarayonida bir marta sodir bo'ladi va" eslab qoladi " va shu bilan ilovaning ish faoliyatini yaxshilaydi. Masalan, root layout shu tarzda Redux, Recoil va Zustand kabi mashhur echimlar bilan global holatni boshlash uchun ideal joyga aylanadi. Xuddi shunday, root layout ko'pincha UI-dagi har bir sahifaga bosh va pastki qismni kiritish uchun ishlatiladi.

Boshqa ajratilgan komponentlar va ularning rollari:

• template – layout bilan o'xshash rol, ammo har bir segment sahifasi so'rovida renderlash amalga oshiriladi;

• loading – so'ralgan segment sahifasini ko'rsatish tugaguniga qadar ko'rsatiladigan bootable UI;

• error – UI joriy segmentning so'ralgan sahifasini qayta ishlashda xatolik yuz berganda, ErrorBoundary maxsus React komponentidan foydalanadi;

• not-found – Error bilan o'xshash rol, ayniqsa so'ralgan manzilni tanimagan taqdirda, xuddi shunday ErrorBoundary komponentidan foydalanadi;

• page – so'raladigan sahifaning noyob UI.

Aniqroq bo'lish uchun biz rasmiy Next-dan ierarxiya sxemalarini olamiz.JS hujjatlari:

Fayl tizimi segmentining pastki qatlamlaridagi sahifalar ierarxiyasi barcha yuqori darajadagi komponentlar ichida shakllana boshlaydi (noyob pagelardan tashqari):

3. Komponentlarni rollarga bo'lish. Komponentlarni ko'rsatish

Page routerining muammolaridan biri serverda bajarilishi mumkin bo'lgan narsalarni birlashtirish va faqat mijoz mantig'i o'rtasidagi har doim ham aniq chiziq emas edi. App router tarkibiy qismlarni server va mijozga aniq ajratadi. Sukut bo'yicha, barcha komponentlar ishlab chiqish uslubini rag'batlantirish uchun serverdir, bunda mantiqning maksimal miqdori SSG yoki SSR tamoyillari asosida amalga oshiriladi. Nextjs-ga komponentni mijoz tomonidan qayta ishlash kerakligini bildirish uchun "use client" faylining boshida maxsus ko'rsatma ishlatiladi. Hisoblagich mijoz komponentining oddiy namunasi:

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p> Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажмите меня</button>
    </div>
  )
}

Ko'rib turganingizdek, bu useState hook foydalanadigan oddiy React komponentidan farq qilmaydi. Ammo hooklar React API-ning orqa qismida mavjud bo'lmagan qismidir, bu komponentni mijozga aylantirishni talab qiladi. Muayyan turdagi komponentlardan foydalanishning taxminiy talablari quyidagi jadvalda ifodalanishi mumkin:

Xulosa

Nextjs yuqori darajadagi veb-ilovalarni yaratish uchun barqaror, moslashuvchan va ishlab chiquvchilar uchun qulay ramkaga aylandi. Uning o'ziga xos xususiyatlari, unumdorlikni oson optimallashtirish va zamonaviy texnologiyalar bilan oson integratsiyalashuvi uni optimal ishlash standartlariga rioya qilgan holda ajoyib foydalanuvchi tajribasini taqdim etishga intilayotgan ishlab chiquvchilar uchun ajoyib imkoniyatga aylantiradi. Siz yangi loyihani boshlayapsizmi yoki mavjud loyihani takomillashtirishni xohlaysizmi, Nextjs veb – ishlab chiqish sohasida sizning e'tiboringizni jalb qilishi kerak bo'lgan kuchli vositadir.