Search Params ဖြင့် Filter နှင့် Pagination

Search keyword ကို component state ထဲပဲသိမ်းရင် page refresh လုပ်တာနဲ့ ပျောက်သွားပြီး filter result ကို သူငယ်ချင်းဆီ link ပို့လို့မရပါဘူး။ URL query string ထဲထည့်ထားရင် back/forward၊ bookmark နဲ့ share အားလုံး အလိုအလျောက်အလုပ်လုပ်ပါတယ်။

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

Page component ရဲ့ searchParams မှ q နဲ့ page ကို await လုပ်ယူနိုင်ပါတယ်။ User က URL ကိုလက်နဲ့ပြင်နိုင်တာကြောင့် page number ကို Number ပြောင်းပြီး အနည်းဆုံး 1 ဖြစ်အောင် validate လုပ်ပါ။ Input တစ်လုံးစီရိုက်တိုင်း server သွားမခေါ်ချင်ရင် Client Component မှာ debounce လုပ်ပြီး router.replace နဲ့ URL ပြောင်းနိုင်ပါတယ်။

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

export default async function NotesPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; page?: string }>;
}) {
  const params = await searchParams;
  const query = params.q?.trim() ?? "";
  const requestedPage = Number(params.page ?? "1");
  const page = Number.isFinite(requestedPage) && requestedPage > 0
    ? requestedPage
    : 1;
  const notes = await searchNotes({ query, page });

  return <NoteList notes={notes} />;
}

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

q မရှိရင် အလွတ် string၊ page မမှန်ရင် 1 သုံးပါတယ်။ Data function က normalized values သာလက်ခံလို့ မမျှော်လင့်တဲ့ query ကို တစ်နေရာတည်းမှာထိန်းနိုင်ပါတယ်။

/notes?q=next&page=2 ကိုဖွင့်လျှင် Next keyword ၏ ဒုတိယစာမျက်နှာ data ပြမည်။

Next.js — Fetching Data — Next.js