App router fundamentals

Lean into the app/ directory for automatic code-splitting, streaming layouts, and the new metadata APIs. Wrap fonts with next/font to inline critical subsets without blocking render.

স্বয়ংক্রিয় কোড স্প্লিটিং, স্ট্রিমিং লেআউট ও মেটাডাটা এপিআই পেতে app/ ডিরেক্টরি ব্যবহার করুন। রেন্ডার ব্লক ছাড়া ক্রিটিকাল ফন্ট ইনলাইন করতে next/font ব্যবহার করুন।

  • Enable experimental.optimizePackageImports to trim unused library code before bundling.
  • বান্ডল তৈরির আগে অব্যবহৃত লাইব্রেরি কোড কমাতে experimental.optimizePackageImports চালু করুন।
  • Leverage the dynamic = "force-static" export for marketing pages that rarely change.
  • কম পরিবর্তনশীল মার্কেটিং পেইজের জন্য dynamic = "force-static" ব্যবহার করুন।

Measure Core Web Vitals

Hook into reportWebVitals to stream vital metrics into your analytics provider. Pair field data with lab runs from Lighthouse to catch regressions before shipping.

reportWebVitals ব্যবহার করে গুরুত্বপূর্ণ মেট্রিক আপনার অ্যানালিটিক্সে পাঠান। শিপ করার আগে লাইটহাউসের ল্যাব ডেটার সাথে ফিল্ড ডেটা মিলিয়ে রিগ্রেশন ধরুন। 

export function reportWebVitals(metric) {
  if (metric.name === "LCP" || metric.name === "FID") {
    fetch("/api/vitals", {
      method: "POST",
      body: JSON.stringify(metric),
    });
  }
}
Set baseline goals: LCP < 2.5 s, CLS < 0.1, TBT < 200 ms. Track them per route, not just globally.
বেসলাইন লক্ষ্য নির্ধারণ করুন: LCP < ২.৫ সেকেন্ড, CLS < ০.১, TBT < ২০০ মিলিসেকেন্ড। প্রতিটি রুট অনুযায়ী অগ্রগতি দেখুন।

Ship with budgets

Automate Lighthouse CI in your pipeline with thresholds that fail builds when metrics regress. Include mobile-first screenshots to validate layout shifts and ensure translation fallback paths stay intact.

মেট্রিক খারাপ হলে বিল্ড ব্যর্থ করার জন্য পাইপলাইনে লাইটহাউস সিআই স্বয়ংক্রিয় করুন। মোবাইল স্ক্রিনশট যুক্ত করুন যাতে লেআউট শিফট ও অনুবাদ ফallback দেখা যায়।

  • Test image-heavy routes with next/image placeholders to protect CLS.
  • CLS নিয়ন্ত্রণে রাখতে ইমেজ-নির্ভর রুটে next/image প্লেসহোল্ডার ব্যবহার করুন।
  • Cache fonts and data fetches with revalidate hints tuned to content freshness.
  • কনটেন্টের সতেজতার সাথে মিল রেখে revalidate হিন্ট দিয়ে ফন্ট ও ডেটা ক্যাশ করুন।