Linking နှင့် မြန်ဆန်သော Navigation

Website အတွင်းစာမျက်နှာပြောင်းတိုင်း browser တစ်ခုလုံး reload ဖြစ်နေရင် app က နှေးသလိုခံစားရပါတယ်။ Next.js Link က လိုအပ်တဲ့ route data ကို ကြိုယူနိုင်ပြီး shared layout မပျက်ဘဲ page ပဲပြောင်းပေးပါတယ်။

နားလည်ထားရမယ့် အချက်

Internal route အတွက် next/link ကိုသုံးပါ။ Viewport နားရောက်တဲ့ Link ကို production မှာ Next.js က ကြိုတင်ယူနိုင်တာကြောင့် နှိပ်တဲ့အချိန်တုံ့ပြန်မှုမြန်ပါတယ်။ External site၊ download သို့မဟုတ် mailto link အတွက် ပုံမှန် anchor သုံးနိုင်ပါတယ်။ Programmatic navigation လိုမှ useRouter သုံးပြီး Client Component နယ်နိမိတ်ကို မလိုအပ်ဘဲ မချဲ့ပါနဲ့။

အတူတူ စမ်းရေးကြည့်မယ်

import Link from "next/link";

const notes = [
  { id: "routing", title: "Routing ကိုလေ့လာခြင်း" },
  { id: "server-components", title: "Server Components" },
];

export default function NotesPage() {
  return (
    <ul>
      {notes.map((note) => (
        <li key={note.id}>
          <Link href={`/notes/${note.id}`}>{note.title}</Link>
        </li>
      ))}
    </ul>
  );
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Notes list ထဲက Link တစ်ခုစီက dynamic detail URL ကိုသွားပါတယ်။ Key က React list ကိုတည်ငြိမ်စေပြီး href က Next.js router အတွက် route ကိုပြောပါတယ်။

မှတ်စု link နှစ်ခုပေါ်လာပြီး full page reload မဖြစ်ဘဲ detail route သို့ သွားနိုင်မည်။

Next.js — Linking and Navigating — Next.js