Bu modulda Next’ning fayl asosidagi routing’i va uslub berish usullari o’rganildi.

Pages va Routing

Yangi sahifa = yangi fayl. pages/kurslar.js yaratildi — /kurslar tayyor; hech qanday Route yozilmaydi. Papka ichidagi index.js shu papka manzilining o’zi: pages/blog/index.js → /blog.

Link va Image

Sahifalararo o’tish React Router’dagi kabi maxsus komponent bilan — brauzer qayta yuklamaydi:

import Link from "next/link";

<Link href="/kurslar">Kurslar</Link>

Rasm uchun esa Next’ning kuchli tomoni — next/image:

import Image from "next/image";

<Image src="/hero.png" width={800} height={400} alt="Bosh rasm" />

Natija: rasm avtomatik siqiladi, ekranga mos o’lchamda beriladi va faqat ko’ringanda yuklanadi (lazy loading).

Tipik xato. next/imagega width/height bermaslik — oddiy <img>dan farqli, Image o’lchamlarni talab qiladi (layout siljishining oldini olish uchun). Xato matni ham aynan shuni aytadi.

Dynamic Routing

Fayl nomidagi kvadrat qavs — URL parametri:

// pages/blog/[id].js
import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>Maqola: {id}</h1>;
}

Natija: /blog/5 ochilsa sahifada "Maqola: 5" — React Router’dagi useParams o’rnini bu yerda router.query bosadi.

404 sahifa

pages/404.js fayli yaratilsa — topilmagan barcha manzillar uchun o’sha sahifa chiqadi. Router sozlamasi yo’q, shunchaki fayl nomi kelishuvi.

Style turlari va Styled Components

React kursidagi usullar shu yerda ham ishlaydi: global CSS (_app.jsda import), module CSS (Nomi.module.css) va inline. Yangi tanishuv — styled-components: CSS to’g’ridan-to’g’ri JS ichida, komponent sifatida yoziladi:

import styled from "styled-components";

const Tugma = styled.button`
  background: #10b981;
  color: white;
  padding: 10px 20px;
`;

<Tugma>Saqlash</Tugma>

Natija: uslubi o’zi bilan birga yuradigan Tugma komponenti — class nomi umuman yo’q, to’qnashuv ham yo’q.

Bu "CSS-in-JS" yondashuvi: uslub props’ga qarab dinamik o’zgara oladi. Tanlov didga bog’liq — module CSS ham, styled-components ham katta loyihalarda ishlatiladi.

Amaliyot

1. Uch sahifali sayt yig’ing (bosh, blog, aloqa) — menyu Link’lar bilan.
2. pages/blog/[id].js yaratib, ro’yxatdan detail sahifaga o’tishni qo’shing.
3. Rasmlarni oddiy img’dan next/imagega ko’chiring; Network bo’limida hajm farqini ko’ring.
4. O’z 404 sahifangizni yasang — "Bosh sahifaga qaytish" Link’i bilan.
5. Bitta komponentni styled-components bilan uslublang.

Modul testini ishlang — keyingi modul serverdan ma’lumot olish va SEO.