Practice Set 1 — Routing, Layout နှင့် Component အခြေခံ လေ့ကျင့်ခန်းများ

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ practice set က tutorial ရဲ့ အစောပိုင်း chapter တွေမှာ သင်ခဲ့တဲ့ routing၊ layout၊ component boundary skill တွေကို အသစ်ဘာမှမသင်ဘဲ ကိုယ်တိုင်ပြန်လက်တွေ့လုပ်ကြည့်ဖို့ ရည်ရွယ်ပါတယ်။ Task တစ်ခုစီက ခဏတိုလေးအတွင်း ပြီးနိုင်တဲ့ scope သေးငယ်ပါတယ်။ Solution တစ်ခုတည်းရှိတာမဟုတ်ပါဘူး — အရေးကြီးတာက concept ကို ကိုယ်ပိုင် code နဲ့ ပြန်ရေးနိုင်ဖို့ပါ။

လေ့ကျင့်ခန်းများ

(1) app/about/page.tsx static route တစ်ခု ဖန်တီးပြီး root layout ထဲက nav မှာ Link ထည့်ပါ။ (2) app/products/[slug]/page.tsx dynamic route ဖန်တီးပြီး params.slug ကို heading အဖြစ်ပြပါ။ (3) app/(marketing)/ route group တစ်ခုဖန်တီးပြီး ၎င်းအောက်မှာ layout သီးခြားတစ်ခု (background color ကွဲတဲ့) ထည့်ပါ — URL path ပေါ်မှာ group folder အမည်မပါဘဲ ကျန်ရစ်ကြောင်း confirm လုပ်ပါ။ (4) button click count ပြထားတဲ့ Counter component တစ်ခုကို "use client" directive နဲ့ ဖန်တီးပြီး Server Component ဖြစ်တဲ့ page ထဲမှာ import လုပ်ကြည့်ပါ.

• static route တစ်ခုနဲ့ dynamic route [slug] တစ်ခု အလုပ်လုပ်အောင် ဖန်တီးပြီးပြီ
• route group (folder) ကို URL path ထဲမှာ မပေါ်ကြောင်း confirm လုပ်ပြီး layout ကွဲအောင် စမ်းပြီးပြီ
• "use client" component တစ်ခုကို Server Component ထဲမှာ ချိတ်ပြီး interactive state အလုပ်လုပ်နေပြီ

Code နမူနာ

// Task 4 starter skeleton — components/Counter.tsx
"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

// app/products/[slug]/page.tsx skeleton
export default function ProductPage({ params }: { params: { slug: string } }) {
  return <h2>Product: {params.slug}</h2>;
}

Task လေးခုစလုံးပြီးရင် app ထဲမှာ route အသစ် 3 ခုနဲ့ interactive client component တစ်ခု ပေါင်းစပ်အလုပ်လုပ်နေတာ တွေ့ရပါလိမ့်မယ်။