next/font কীভাবে ফন্টগুলি অপ্টিমাইজ করে?

Question

Accepted Answer

`next/font` স্বয়ংক্রিয়ভাবে ওয়েব ফন্টগুলি অপ্টিমাইজ করে পারফরম্যান্স উন্নত করতে এবং লেআউট শিফট নির্মূল করতে — বিল্ড সময়ে ফন্টগুলি স্ব-হোস্ট করে এবং আপনার জন্য লোডিং বিবরণ পরিচালনা করে। ## Google ফন্ট ব্যবহার করা ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## এটি স্বয়ংক্রিয়ভাবে কী করে - **স্ব-হোস্টিং** — বিল্ড সময়ে, Next Google ফন্ট ডাউনলোড করে এবং আপনার **ডোমেইন** থেকে পরিবেশন করে। রানটাইমে Google সার্ভারে কোন অনুরোধ নেই → দ্রুত এবং গোপনীয়তার জন্য ভাল (তৃতীয় পক্ষের ট্র্যাকিং নেই)। - **শূন্য লেআউট শিফট** — ফলব্যাক ফন্টের মেট্রিক্স গণনা করে ওয়েব ফন্টের সাথে মিলাতে, তাই যখন প্রকৃত ফন্ট স্যুইচ হয়, পাঠ্য লাফ দেয় না (CLS সুরক্ষা দেয়)। - **প্রিলোডিং এবং সাবসেটিং** — ফন্ট প্রিলোড করে এবং শুধুমাত্র নির্দিষ্ট অক্ষর সাবসেট অন্তর্ভুক্ত করে, ডাউনলোড হ্রাস করে। - **কোন রেন্ডার-ব্লকিং অনুরোধ নেই** — ফন্টগুলি আপনার বিল্ডের অংশ, একটি ব্লকিং বাহ্যিক ফেচ নয়। ## স্থানীয় ফন্টগুলি ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## কেন ফন্ট অপ্টিমাইজেশন গুরুত্বপূর্ণ ফন্টগুলি একটি ক্লাসিক পারফরম্যান্স এবং CLS সমস্যা: একটি তৃতীয় পক্ষের ফেচ যা পাঠ্য রেন্ডারিং ব্লক করে, তারপর ফন্ট লোড হলে একটি লেআউট জাম্প সৃষ্টি করে (FOUT/FOIT)। এটি ম্যানুয়ালি সঠিকভাবে করতে `@font-face`, `font-display`, প্রিলোডিং, এবং ফলব্যাক-মেট্রিক মিলানো প্রয়োজন। ## কেন এটি গুরুত্বপূর্ণ `next/font` সম্পূর্ণ ফন্ট-পারফরম্যান্স চেকলিস্ট স্বয়ংক্রিয় করে — স্ব-হোস্টিং (গতি + গোপনীয়তা), সাবসেটিং এবং প্রিলোডিং (ছোট, দ্রুত), এবং ফলব্যাক মেট্রিক মিলানো (কোন লেআউট শিফট নেই) — একটি ইম্পোর্টের পিছনে। এটি একটি জটিল, ভুল হওয়া সহজ অপ্টিমাইজেশন সরিয়ে দেয় এবং Next.js এ Google এবং স্থানীয় উভয় ফন্ট ব্যবহার করার প্রস্তাবিত উপায়।