Bu modulda Next’ning asl kuchi ochildi: ma’lumotni serverda tayyorlash (SSG) va SEO vositalari.

API bilan ishlash — SSG

React’da fetch brauzerda (useEffect ichida) ishlar edi. Next’da uni build paytida serverda bajarish mumkin — bunga SSG (Static Site Generation) deyiladi:

export async function getStaticProps() {
  const res = await fetch("https://api.misol.uz/courses");
  const courses = await res.json();
  return { props: { courses } };
}

export default function Kurslar({ courses }) {
  return <ul>{courses.map((c) => <li key={c.id}>{c.name}</li>)}</ul>;
}

Natija: sahifa tayyor ro’yxat bilan HTML bo’lib keladi — foydalanuvchi "Yuklanmoqda..." ko’rmaydi, qidiruv roboti to’liq kontentni o’qiydi.

getStaticProps faqat serverda ishlaydi (brauzerga tushmaydi) va qaytargan props sahifa komponentiga keladi. Dinamik sahifalar uchun sherigi bor — getStaticPaths: qaysi id’lar uchun sahifa yasashni aytadi.

Tipik xato. getStaticProps ichida brauzer narsalarini (window, localStorage) ishlatish — bu kod serverda yuradi, u yerda window yo’q: "window is not defined" xatosi aynan shundan.

Lokal JSON data

Ma’lumot tashqi API’dan emas, loyihaning o’z faylidan ham kelishi mumkin — kichik saytlar uchun qulay:

import courses from "../data/courses.json";

yoki getStaticProps ichida o’qiladi. Kontent o’zgarganda faylni yangilab, qayta build qilasiz — blog va portfolio uchun yetarli.

Google Analytics

Tashrif statistikasi uchun GA skripti _app.js (yoki maxsus _document.js) orqali barcha sahifalarga ulanadi; Next’ning Script komponenti yuklashni optimallashtiradi (strategy="afterInteractive"). Muhimi: skript har sahifada emas, bitta joyda ulanadi.

Next SEO plagini

Har sahifaga title/description’ni qo’lda yozish o’rniga next-seo paketi ishlatiladi:

import { NextSeo } from "next-seo";

<NextSeo
  title="Kurslar — Mening saytim"
  description="Bepul video kurslar ro'yxati"
/>

Natija: sahifa head’ida to’g’ri title, description va OG teglar — ijtimoiy tarmoqda ulashganda ham chiroyli karta chiqadi. Umumiy sozlama _app.jsda DefaultSeo bilan, sahifadagisi uni ustidan yozadi.

Google va GitHub autentifikatsiya

next-auth paketi tayyor OAuth oqimini beradi: Google/GitHub’da ilova ro’yxatdan o’tkaziladi (client id + secret), provider sozlanadi — va saytda "Google bilan kirish" tugmasi ishlaydi. Sessiyani o’qish: useSession() hook’i. Parollar saqlash, token almashinuvi kabi xavfli ishlarning hammasi kutubxona ichida.

Amaliyot

1. Kurslar sahifasini getStaticProps bilan yig’ing (json-api.uz yoki lokal JSON’dan).
2. View Source’da kontent HTML ichida kelganini tekshiring — SSG’ning isboti shu.
3. Sahifalarga next-seo qo’shib, title/description’larni har sahifada boshqa qiling.
4. next-auth bilan GitHub orqali kirishni sozlang va foydalanuvchi ismini header’da ko’rsating.

Modul testini ishlang — yakuniy modulda sayt internetga chiqadi.