Next.jsIntermediate
Images ও Fonts Optimization
next/image ও next/font দিয়ে image ও font optimization — বাংলা গাইড।
11টি অংশবাংলা ভাষায়
Next.js-এ `next/image` ও `next/font` দিয়ে ছবি ও font স্বয়ংক্রিয়ভাবে optimize হয় — এতে performance অনেক বাড়ে।
next/image
<Image> component চিত্রকে WebP/AVIF-তে convert, lazy-load ও আকার অনুযায়ী resize করে।
app/page.tsxtsx
tsx
import Image from "next/image";
export default function Page() {
return (
<Image
src="/profile.png"
alt="Profile picture"
width={500}
height={500}
priority={false}
/>
);
}- WebP/AVIF — automatic format conversion
- Lazy loading — viewport-এর কাছে এলে load হয়
- Responsive sizes — ডিভাইস অনুযায়ী size
- CSP/remote patterns — external image-এর config
next/font
next/font font-কে self-host করে — বাইরের network request ছাড়া fast load। এমনকি Google Fonts-ও build-এর সময় bundle-এ আনা হয়।
app/layout.tsxtsx
tsx
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="bn">
<body className={inter.className}>{children}</body>
</html>
);
}Local Font
app/layout.tsxtsx
tsx
import localFont from "next/font/local";
const myFont = localFont({
src: "./fonts/my-font.woff2",
});
export default function Layout({ children }: { children: React.ReactNode }) {
return <html className={myFont.className}>{children}</html>;
}Layout Shift prevention
FakeImage ও next/font দুইটিই layout shift (CLS) কমায় — font-এর space আগেই reserve থাকে। এগুলো Core Web Vitals-এ ভালো score এনে দেয়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।