Link va navigatsiya

Oddiy anchor emas, Link ishlating

Next.js’da sahifalar orasida o‘tish uchun oddiy <a> teg o‘rniga o‘rnatilgan Link komponentidan foydalaning:

import Link from "next/link";
 
export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

Link ostida haqiqiy <a> render qiladi, shuning uchun u accessible bo‘ladi va oddiy havola kabi ishlaydi — lekin uning ustiga Next.js super-qobiliyatlarini qo‘shadi.

Nima uchun Link tezroq: client-side navigation

Oddiy <a> brauzerga joriy sahifani tashlab yuborib, butunlay yangi sahifani noldan yuklashni buyuradi. Bu to‘liq qayta yuklash — sekin, va ekran miltillaydi.

Link esa uning o‘rniga client-side navigation amalga oshiradi: Next.js faqat yangi sahifaning kontentini yuklab oladi va uni to‘liq qayta yuklashsiz almashtiradi. Umumiy UI (masalan, layout va nav paneli) ekranda qoladi va qaytadan render bo‘lmaydi. Bu bir zumda bo‘layotgandek his qilinadi.

Next.js shuningdek ekranda ko‘rinib turgan havola qilingan sahifalarni prefetch qiladi, shuning uchun foydalanuvchi bosgan paytga kelib keyingi sahifa ko‘pincha allaqachon yuklab bo‘lingan bo‘ladi.

Qaysi havola faol ekanini bilish

Nav’da joriy sahifani ajratib ko‘rsatish uchun joriy yo‘lni usePathname hooki bilan o‘qing. U faqat Client Component ichida ishlaydi, shuning uchun "use client" qo‘shing:

"use client";
 
import Link from "next/link";
import { usePathname } from "next/navigation";
 
export default function Nav() {
  const pathname = usePathname();
  return (
    <nav>
      <Link href="/about" className={pathname === "/about" ? "active"

Koddan navigatsiya qilish

Ba’zan sizga biror narsa sodir bo‘lgandan keyin navigatsiya qilish kerak bo‘ladi — masalan, forma yuborilgandan so‘ng qayta yo‘naltirish. useRouter hookidan foydalaning (u ham faqat client uchun):

"use client";
 
import { useRouter } from "next/navigation";
 
export default function SaveButton() {
  const router = useRouter();
  return (
    <button onClick={() => router.push("/dashboard")}>
      Save and continue
    </button>
  );
}

Keng tarqalgan router metodlari: router.push("/path") yangi sahifaga o‘tadi, router.back() esa oldingi sahifaga qaytadi.

Import’ga e’tibor bering: bu navigatsiya hooklari App Router’da next/navigation dan keladi (eskiroq next/router dan emas).

Asosiy nuqtalar

• Navigatsiya uchun next/link dan Link ishlating — u tezkor client-side o‘tishlar va prefetching’ni yoqadi.
• Client-side navigation sahifa kontentini to‘liq qayta yuklashsiz almashtiradi; umumiy layout’lar mount holatida qoladi.
• usePathname sizga joriy URL’ni aytadi (faol havolalarni ajratib ko‘rsatish uchun juda qulay).
• useRouter koddan navigatsiya qilish imkonini beradi (router.push, router.back); navigatsiya hooklarini next/navigation dan import qiling.