Mini Project — Link Stash (Part 3): Polish နှင့် Deploy

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

App တစ်ခု 'ပြီးသွားပြီ' လို့ ခေါ်နိုင်ဖို့ feature တွေချည်းမက UX polish လည်း လိုအပ်ပါတယ်။ ဒီအဆင့်မှာ loading.tsx နဲ့ Suspense boundary ကို network နှေးတဲ့အခါအတွက် ထည့်ပြီး၊ dynamic route ရဲ့ id မှားနေရင် not-found.tsx ကို ပြပါမယ်။ Social media မှာ share လုပ်တဲ့အခါ link preview လှလှပပ ပေါ်စေဖို့ generateMetadata နဲ့ Open Graph tags ကို ထည့်ပါမယ်။ နောက်ဆုံးမှာတော့ next build ကို local မှာစစ်ကြည့်ပြီး Vercel ပေါ် push လိုက်ရင် project တစ်ခုလုံးကို live URL အနေနဲ့ လူတိုင်းမြင်နိုင်အောင် ပြီးမြောက်သွားပါလိမ့်မယ်။

လက်တွေ့ ဆောက်ကြည့်မယ်

app/loading.tsx ကို skeleton UI နဲ့ ဖန်တီးပါ၊ app/bookmarks/[id]/not-found.tsx ကို id မတွေ့ရင် ပြဖို့ ထည့်ပါ (page.tsx ထဲက notFound() ကိုခေါ်ပြီး trigger လုပ်ပါ)။ app/layout.tsx ထဲမှာ metadata export နဲ့ title/description/openGraph ကို site-wide default အနေနဲ့ ထည့်ပြီး၊ bookmark detail page မှာ generateMetadata() function နဲ့ bookmark title ကို dynamic metadata အဖြစ် ပြန်ပေးပါ။ npm run build ကို local မှာ run ကြည့်ပြီး error/warning ရှိမရှိစစ်ပါ။ GitHub repo တစ်ခုဖန်တီးပြီး push လုပ်ကာ Vercel dashboard ကနေ import လုပ်ပြီး deploy လုပ်ပါ — environment variable မလိုသေးတဲ့ project ဖြစ်လို့ default settings နဲ့ deploy ပြီးနိုင်ပါတယ်။

• loading.tsx skeleton နဲ့ dynamic route ရဲ့ not-found.tsx က မှန်ကန်စွာ trigger ဖြစ်နေပြီ
• bookmark detail page တစ်ခုချင်းစီအတွက် generateMetadata() က title ကို dynamic ထုတ်ပေးနေပြီ
• next build local မှာအောင်မြင်ပြီး Vercel ပေါ်က live URL ဖြင့် app ကို ဖွင့်ကြည့်နိုင်ပြီ

Code နမူနာ

// app/bookmarks/[id]/page.tsx
import { notFound } from "next/navigation";
import { getBookmarks } from "@/lib/db";
import type { Metadata } from "next";

type Props = { params: { id: string } };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const bookmark = getBookmarks().find((b) => b.id === params.id);
  if (!bookmark) return { title: "Bookmark Not Found" };
  return {
    title: `${bookmark.title} — Link Stash`,
    openGraph: { title: bookmark.title, description: bookmark.url },
  };
}

export default function BookmarkDetail({ params }: Props) {
  const bookmark = getBookmarks().find((b) => b.id === params.id);
  if (!bookmark) notFound();

  return (
    <article>
      <h2>{bookmark.title}</h2>
      <a href={bookmark.url}>{bookmark.url}</a>
    </article>
  );
}

// app/bookmarks/[id]/not-found.tsx
export default function NotFound() {
  return <p>ဒီ bookmark ကို ရှာမတွေ့ပါ — id မှားနေတာ ဖြစ်နိုင်ပါတယ်။</p>;
}

Live Vercel URL ကို browser ထဲဖွင့်လိုက်ရင် Link Stash app တစ်ခုလုံး — add, delete, filter, detail pages, metadata preview အားလုံး production ပေါ်မှာ အလုပ်လုပ်နေပါလိမ့်မယ်။