Bu modulda Next.js bilan tanishildi: u React’dan nimasi bilan farq qiladi va loyiha qanday tuziladi.

Next.js nima

Next.js — React ustiga qurilgan freymvork. React "qanday chizish"ni beradi, Next esa uning atrofidagi hamma narsani: routing (fayl asosida), server tomonda render (SSR/SSG), rasm optimizatsiyasi, SEO imkoniyatlari va deploy tayyorligi.

Asosiy farq — render joyi. Oddiy React (SPA) brauzerga deyarli bo’sh HTML yuborib, hammasini JS bilan chizadi: qidiruv robotiga bo’sh sahifa ko’rinishi mumkin. Next sahifani serverda yasab, tayyor HTML yuboradi — sahifa tez ochiladi va qidiruvga to’liq ko’rinadi. Shu sabab kontentli saytlar (blog, do’kon, portfolio) uchun Next standart tanlovga aylangan.

Loyiha ochish va fayl strukturasi

npx create-next-app@latest mening-saytim
npm run dev

Natija: http://localhost:3000 da tayyor loyiha.

Muhim tushuncha — fayl asosidagi routing: React Router’dagidek marshrutlarni kod bilan yozmaysiz, pages papkasidagi har fayl avtomatik sahifa bo’ladi:

_app.js — barcha sahifalarni o’raydigan umumiy komponent (layout, global CSS shu yerda); public/ — rasm va statik fayllar.

Next.js 13 — yangi o’zgarishlar

13-versiya katta burilish qildi: pages yoniga yangi app papkasi keldi — unda routing papkalar bilan (app/blog/page.js), umumiy qism layout.js bilan beriladi, komponentlar esa standart holda server komponentlar. Kurs asosan barqaror pages yondashuvini ko’rsatadi; app router hujjatlashda "yangi standart" bo’lib bormoqda — ikkala yozuvni ham tanib turish kerak: eski loyihalarda pages, yangilarida app uchraydi.

Tipik xato. Ikkala routerni chalkashtirish: pages/about.js ishlayotgan loyihada app/about/page.js qidirish (yoki aksincha). Avval loyihada qaysi papka borligini qarang — routing qoidalari shunga bog’liq.

Amaliyot

1. create-next-app bilan loyiha oching va ishga tushiring.
2. pagesga about.js qo’shib, /about avtomatik ochilishini tekshiring.
3. Loyihani React (Vite) loyihasi bilan solishtiring: View Source’da HTML farqini ko’ring — Next’da kontent tayyor keladi.
4. Hujjatlashdan app router bo’limini ochib, ikki yondashuv yozuvini yonma-yon solishtiring.

Modul testini ishlang — keyingi modul routing va uslublarni chuqurlashtiradi.