Dynamic Routes နှင့် Params

Note တစ်ခုချင်းစီအတွက် page file သီးခြားရေးမယ်ဆိုရင် note တစ်ထောင်ရှိရင် file တစ်ထောင်လိုပါမယ်။ Dynamic route က URL ထဲက id ကိုဖတ်ပြီး page template တစ်ခုတည်းနဲ့ data အမျိုးမျိုးပြနိုင်စေပါတယ်။

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

app/notes/[id]/page.tsx က /notes/routing လို URL ကို match လုပ်ပါတယ်။ လက်ရှိ App Router မှာ params ဟာ Promise ဖြစ်လို့ await လုပ်ပြီး id ကိုယူပါတယ်။ Data မတွေ့ရင် အလွတ် page ပြမထားဘဲ notFound() ကိုခေါ်ပြီး အနီးဆုံး not-found.tsx UI ကိုပြသင့်ပါတယ်။ Build time မှာ route အချို့ကို ကြိုဖန်တီးချင်ရင် generateStaticParams သုံးနိုင်ပါတယ်။

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

import { notFound } from "next/navigation";
import { getNote } from "@/lib/notes";

export default async function NotePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const note = await getNote(id);

  if (!note) notFound();

  return (
    <article>
      <h1>{note.title}</h1>
      <p>{note.content}</p>
    </article>
  );
}

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

getNote က data layer ကိုကိုယ်စားပြုပါတယ်။ params ကို await လုပ်ပြီး id နဲ့ record ရှာတယ်။ Record မရှိရင် 404 flow ဝင်ပြီး ရှိရင် title နဲ့ content ကို render လုပ်ပါတယ်။

ရှိသော id အတွက် note detail ပေါ်ပြီး မရှိသော id အတွက် 404 UI ပေါ်မည်။

Next.js — Layouts and Pages — Next.js