Production Performance

Next.js অনেক optimization automatic করে, তবে কিছু বিষয় নিজেও নিয়ন্ত্রণ করা যায়।

১. Automatic Code Splitting

প্রতিটি route-এর জন্য আলাদা JavaScript bundle — ব্যবহারকারী শুধু current page-এর code load করে।

২. Use Client Components Carefully

"use client"-যত কম, browser-এ তত কম JavaScript। ধাপে ধাপে কেবল interactive অংশ client করুন।

৩. Image Optimization

• next/image — WebP, lazy, sizes
• priority prop — LCP image-এ true
• যতটা সম্ভব remote image-এ sizes দিন

৪. Font Optimization

next/font — self-hosted font, display: swap behavior দিয়ে CLS কমায়।

৫. Caching

use cache + cacheLife দিয়ে repeat data fetch এড়ানো যায়।

৬. Lazy Loading

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("../components/heavy"), {
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return <HeavyComponent />;
}