Next.js nima?

Next.js nima

Next.js — React ustiga qurilgan freymvork. React o‘zi faqat komponentlarni beradi — u sahifalaringiz qanday tuzilishini, URL manzillari kodga qanday bog‘lanishini, ma’lumotlar serverda qanday yuklanishini yoki ilova qanday qurilib joylashtirilishini hal qilmaydi. Next.js bularning barchasini to‘ldiradi. Siz baribir React komponentlari yozasiz; Next.js esa ular atrofidagi tuzilmani ta’minlaydi.

Buni shunday tasavvur qiling: React — dvigatel, Next.js esa butun mashina.

Freymvork sizga nima beradi

Qutidan chiqishi bilanoq, Next.js siz aks holda qo‘lda ulashingizga to‘g‘ri keladigan narsalarni o‘z zimmasiga oladi:

• Routing — loyihangizdagi papkalar saytingiz URL manzillariga aylanadi. Sozlanadigan router kutubxonasi kerak emas.
• Server rendering — sahifalar serverda render qilinishi mumkin, shunda foydalanuvchi HTML’ni darhol oladi (tezlik uchun ham, qidiruv tizimlari uchun ham yaxshiroq).
• Bundling va optimallashtirish — kodingiz kichik bo‘laklarga bo‘linadi, rasm va shriftlar optimallashtiriladi, va sahifaga faqat kerakli JavaScript yuboriladi.
• Build tizimi — bitta buyruq (next build) ishlab chiqarishga tayyor ilovani hosil qiladi.

Bularning barchasini bir dasta alohida vositalarni o‘rnatib sozlamasdan qo‘lga kiritasiz.

App Router

Zamonaviy Next.js App Router’dan foydalanadi: barcha route’laringiz app/ deb nomlangan papka ichida yashaydi. Bu Next.js ilovalarini qurishning hozirgi, tavsiya etilgan usuli (eskiroq "Pages Router" ham mavjud, ammo yangi loyihalar app/ dan foydalanadi).

Kichkina loyiha shunday ko‘rinadi:

my-app/
  app/
    layout.tsx    # wraps every page (shared shell)
    page.tsx      # the homepage, shown at "/"
  public/         # static files (images, etc.)
  package.json

Boshida ikkita maxsus fayl eng muhim:

• page.tsx — route’ning haqiqiy mazmuni. app/ ichidagi page.tsx sizning bosh sahifangiz.
• layout.tsx — sahifalarni o‘rab turadigan umumiy UI (masalan, sarlavha yoki navigatsiya), shunda u har bir navigatsiyada qayta render qilinmaydi.

Sizning birinchi sahifangiz

Sahifa — bu shunchaki page.tsx faylining default export’i bo‘lgan React komponenti:

// app/page.tsx
export default function HomePage() {
  return <h1>Hello, Next.js</h1>;
}

next dev bilan dev serverni ishga tushiring, brauzerni oching, va o‘sha sarlavha / manzilida jonli ishlaydi. About sahifasini qo‘shish uchun app/about/page.tsx yaratasiz — va u darhol /about manzilida mavjud bo‘ladi. Bu fayl asosidagi routing’ning asosiy g‘oyasi bo‘lib, keyingi mavzu buni yoritadi.

Asosiy fikrlar

• Next.js — React ustiga qurilgan freymvork — siz React yozasiz, u esa routing, rendering, bundling va build’ni o‘z zimmasiga oladi.
• Zamonaviy Next.js App Router’dan foydalanadi: route’lar app/ papkasida yashaydi.
• page.tsx route’ning mazmunini belgilaydi; layout.tsx sahifalar atrofidagi umumiy UI’ni belgilaydi.
• Sahifa — page.tsx faylining default export’i sifatida eksport qilingan React komponenti.