Loyiha yaratish — create-next-app, tuzilishi, app va pages router farqi
create-next-app
Next.js loyihasini noldan qo'lda sozlash mumkin — webpack, babel, TypeScript, ESLint barchasini alohida o'rnatib, sozlab. Lekin hech kim shunday qilmaydi, chunki bu soatlab vaqt oladi.
Buning uchun rasmiy CLI asbob bor — create-next-app. U barcha sozlamalarni avtomatik qiladi:
npx create-next-app@latest mening-loyiham
Buyruqni ishga tushirganda bir nechta savol beradi:
Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind? → Yes
Would you like your code inside a `src/` directory? → No
Would you like to use App Router? → Yes
Would you like to use Turbopack? → No
Would you like to customize the import alias? → No
Tayyor. Loyiha yaratildi. Ishga tushirish:
cd mening-loyiham
npm run dev
http://localhost:3000 — Next.js ning boshlang'ich sahifasi.
Papkalar tuzilishi — har biri nima uchun
mening-loyiham/
├── app/ ← barcha sahifalar, layoutlar, API shu yerda
│ ├── layout.tsx ← umumiy qolip (navbar, footer)
│ ├── page.tsx ← bosh sahifa (/)
│ └── globals.css ← global CSS
├── public/ ← statik fayllar (rasm, favicon, PDF)
├── next.config.ts ← Next.js sozlamalari
├── package.json
└── tsconfig.json
app/ — loyihaning yuragi
app/ papkasi — routing, sahifalar, API hammasi shu yerda. Bu papkaning ishlash prinsipi oddiy: har bir papka — URL segment.
app/page.tsx → /
app/about/page.tsx → /about
app/blog/page.tsx → /blog
Papka yaratdingiz, ichiga page.tsx qo'ydingiz — route tayyor. Alohida router konfiguratsiya kerak emas.
public/ — statik fayllar
Rasmlar, favicon, PDF fayllar shu yerga qo'yiladi. Bu papkadagi fayllar to'g'ridan-to'g'ri URL orqali ochiladi:
public/logo.png → http://localhost:3000/logo.png
public/cv.pdf → http://localhost:3000/cv.pdf
⚠️
public/papkasiga maxfiy fayllar qo'ymang — hamma ochiq ko'ra oladi.
layout.tsx nima uchun kerak
Tasavvur qiling: 20 ta sahifangiz bor. Har birida Navbar va Footer bo'lishi kerak. Agar har bir page.tsx ga alohida yozsangiz — 20 ta joyda bir xil kod. Birini o'zgartirsangiz — 20 ta joyni o'zgartirish kerak.
layout.tsx bu muammoni hal qiladi. U sahifalarni o'rab turadigan qolip. Bir marta yoziladi, barcha sahifalarga avtomatik qo'llanadi.
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="uz">
<body>
<nav>Navbar</nav>
{children} {/* har bir sahifa shu yerga joylashadi */}
<footer>Footer</footer>
</body>
</html>
)
}
children — hozirgi sahifaning kontenti. /about ga kirsangiz, children o'rniga about/page.tsx ning kontenti ko'rinadi. /blog ga kirsangiz — blog/page.tsx ning kontenti.
⚠️ Root
layout.tsxda<html>va<body>teglari bo'lishi shart. Next.js bu faylni butun sahifaning asosi sifatida ishlatadi. Ichki layoutlarda bu teglar kerak emas.
page.tsx — sahifa fayl
// app/page.tsx — bosh sahifa (/)
export default function HomePage() {
return (
<main>
<h1>Salom, Next.js!</h1>
</main>
)
}
Oddiy React komponenti. Farqi — bu fayl app/ ichida bo'lgani uchun Next.js uni avtomatik route sifatida taniydi.
App Router va Pages Router — nima farqi va nima uchun bilish kerak
Eski Next.js loyihalarida (12-versiya va oldin) pages/ papkasini ko'rasiz. Bu — Pages Router. Next.js 13 da yangi tizim — App Router chiqdi. Hozir standart shu.
Eski loyihalarda ishlashingiz mumkin, shuning uchun ikkalasini bilish kerak.
Pages Router — eski usul
pages/
├── index.tsx → /
├── about.tsx → /about
└── blog/
└── [slug].tsx → /blog/:slug
Har bir fayl — route. about.tsx fayli yaratdingiz — /about route tayyor.
App Router — yangi usul
app/
├── page.tsx → /
├── about/
│ └── page.tsx → /about
└── blog/
└── [slug]/
└── page.tsx → /blog/:slug
Har bir papka — route segment. Sahifa bo'lishi uchun papka ichida page.tsx bo'lishi kerak.
Asosiy farq — ma'lumot olish usuli
Pages Router da ma'lumot olish uchun alohida funksiya yoziladi:
// Pages Router
export async function getServerSideProps() {
const data = await fetch('https://api.example.com/data').then(r => r.json())
return { props: { data } } // props orqali komponentga uzatiladi
}
export default function Page({ data }) {
return <div>{data.title}</div>
}
Ma'lumot olish va ko'rsatish — ikki alohida joy. Katta loyihalarda bu chalkash bo'ladi.
App Router da komponent o'zi async bo'ladi:
// App Router
export default async function Page() {
const data = await fetch('https://api.example.com/data').then(r => r.json())
return <div>{data.title}</div>
}
Ma'lumot olish va ko'rsatish — bir joyda. Ancha toza.
💡 Yangi loyiha boshlasangiz — App Router. Eski loyihada ishlasangiz — Pages Router ni ham bilish kerak. Biz kursda App Router o'rganamiz.
Tez-tez uchraydigan xatolar
1. page.tsx o'rniga index.tsx yozish
React da odatda index.tsx ishlatiladi. Next.js da bu ishlaydi, lekin route sifatida tanilmaydi.
app/about/index.tsx ← Next.js bu faylni ko'rmaydi
app/about/page.tsx ← to'g'ri
2. Root layoutda <html><body> yo'q
// ❌ — Next.js xato beradi
export default function RootLayout({ children }) {
return <div>{children}</div>
}
// ✅
export default function RootLayout({ children }) {
return (
<html lang="uz">
<body>{children}</body>
</html>
)
}
3. Port band — npm run dev ishlamaydi
# 3000-port band bo'lsa
npm run dev -- --port 3001
Xulosa
create-next-app — loyiha yaratishning standart usuli. Bir buyruq, barcha sozlamalar tayyor.
Asosiy papkalar:
app/— sahifalar, layoutlar, API. Har bir papka = URL segment.public/— statik fayllar, to'g'ridan-to'g'ri URL orqali ochiladi.
layout.tsx — sahifalarni o'rab turadigan qolip. Navbar, footer bir marta yoziladi.
App Router (yangi) — papka = route, page.tsx = sahifa.
Pages Router (eski) — fayl = route. Eski loyihalarda uchraydi.
Keyingi dars
3-dars: App Router — nima uchun yangi, Pages Router dan ustunligi
App Router ning asosiy kontseptsiyalarini — Server Components, nested layouts, maxsus fayllar — batafsil ko'ramiz.