Next.js — React asosida veb-ilovalar yaratishga mo‘ljallangan ochiq kodli framework. U route, server rendering, static generation, server va client componentlar, build optimizatsiyasi hamda server endpointlari kabi imkoniyatlarni bitta loyiha tuzilmasida birlashtiradi. Next.js React kutubxonasini almashtirmaydi; React komponent modelini to‘liq web framework darajasiga olib chiqadi.
Route tizimi
Zamonaviy Next.js loyihalarida App Router katalog va fayl nomlari asosida URL tuzadi. app/articles/page.tsx /articles sahifasiga, app/articles/[id]/page.tsx esa dinamik parametrli routega mos keladi. layout bir nechta ichki sahifa uchun umumiy UI’ni saqlaydi, loading va error fayllari segmentning kutish hamda xato holatini ifodalaydi.
Pages Router eski va mavjud loyihalarda ishlatiladigan boshqa routing modelidir. Ikki routerning data fetching va lifecycle qoidalari bir xil emas, shu sababli loyiha ishlatayotgan router hujjati bilan ishlanadi.
Server va client component
App Router’da componentlar default bo‘yicha serverda bajarilishi mumkin. Server component database yoki server secretga yaqin ishlaydi va uning kodi browser bundle’iga to‘liq yuborilmaydi. Event handler, browser API yoki local interactive state kerak bo‘lsa component use client chegarasi bilan client componentga aylantiriladi.
Server component client componentni render qilishi va unga serializable props uzatishi mumkin. Client boundary’ni juda yuqoriga qo‘yish katta daraxtni browser JavaScriptiga aylantiradi. Maxfiy qiymat prop orqali clientga berilsa, serverda o‘qilgani uni himoyalangan qilmaydi.
Rendering usullari
Static rendering sahifani build yoki revalidation vaqtida yaratadi. Dynamic rendering har request kontekstiga bog‘liq sahifani serverda hisoblaydi. Streaming tayyor bo‘lgan UI qismlarini bosqichma-bosqich yuboradi. Client-side navigation oldindan yuklangan route ma’lumotidan foydalanishi mumkin.
Cache va revalidation qoidalari Next.js versiyasi hamda ishlatilgan APIga bog‘liq. Ma’lumotning source of truth, freshness va foydalanuvchiga xosligi aniq belgilanadi. Shaxsiy session natijasini umumiy cachega joylash ma’lumot sizishiga olib keladi.
Data mutation
Route Handler HTTP endpoint yaratishi, Server Action esa serverda bajariladigan mutationni component oqimi bilan bog‘lashi mumkin. Har ikkala holatda kiritma runtime’da tekshiriladi va authorization serverda bajariladi. Funksiya faqat UI ichidan chaqirilishi uni ishonchli qilmaydi.
Mutationdan keyin tegishli cache path yoki tag bo‘yicha revalidate qilinadi. Optimistic UI server xatosida holatni qaytarish mexanizmiga ega bo‘ladi.
Build va deploy
Next.js Node.js server, container, serverless yoki platforma adapteri orqali deploy qilinishi mumkin. Static export server imkoniyatlarini cheklaydi. Image optimizatsiyasi, middleware, edge runtime va filesystemga yozish qo‘llovi deploy muhitiga qarab farq qiladi.
Environment variable server va public turlarga ajratiladi. Client bundle’ga qo‘shilgan public qiymat maxfiy hisoblanmaydi. Build artefakti, runtime versiyasi va cache storage bir nechta instansda izchil boshqariladi.
Keshlash chegaralari
Next.js keshlashni bir necha qatlamda qo‘llashi mumkin: fetch natijasi, serverda render qilingan route va brauzerga uzatilgan client-side navigatsiya keshi bir xil narsa emas. Ma’lumot qanchalik tez o‘zgarishiga qarab statik natija saqlanadi, ma’lum muddatdan keyin qayta yaratiladi yoki har so‘rovda yangidan olinadi. Noto‘g‘ri tanlangan uzoq cache muddati foydalanuvchiga eskirgan ma’lumot ko‘rsatadi. Cookie yoki so‘rov sarlavhasiga bog‘liq shaxsiy sahifani umumiy keshga joylash esa ma’lumot sizishiga olib kelishi mumkin. Shu sababli render usuli bilan cache siyosati birgalikda belgilanadi va CDN, Next.js serveri hamda ma’lumot manbasidagi muddatlar alohida tekshiriladi.
Bog‘liq tushunchalar
React, server-side rendering, static generation, Server Component, routing, hydration, Vercel