সমস্যা: “ফিনটেক সলিউশনস” নামে একটি ফিনান্সিয়াল সার্ভিস প্রোভাইডার কোম্পানির Next.js ওয়েবসাইটে Google Fonts থেকে ‘Roboto’ ফন্ট ব্যবহার করা হয়েছে। কিন্তু কোম্পানির সিকিউরিটি টিম থার্ড-পার্টি রিসোর্স ব্যবহার করতে চায় না, কারণ এতে ডাটা প্রাইভেসি ইস্যু থাকতে পারে। এছাড়া, থার্ড-পার্টি ডিপেন্ডেন্সি কমাতে চায় যাতে ওয়েবসাইটের পারফরম্যান্স এবং রিলায়েবিলিটি বাড়ে।
বর্তমান কোড:
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
{/* Google Fonts থেকে Roboto ফন্ট লোড করা */}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
</head>
<body>
{children}
</body>
</html>
)
}/* globals.css */
body {
font-family: 'Roboto', sans-serif;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}সমাধান: লোকাল ফন্ট ব্যবহার
Next.js এর বিল্ট-ইন ফন্ট সিস্টেম ব্যবহার করে লোকাল ফন্ট লোড করা যায়, যা থার্ড-পার্টি ডিপেন্ডেন্সি দূর করে।
ধাপ ১: লোকাল ফন্ট ফাইল ডাউনলোড করা
প্রথমে, আপনাকে Roboto ফন্ট ফাইল ডাউনলোড করতে হবে। আপনি Google Fonts থেকে ডাউনলোড করতে পারেন বা অন্য কোন সোর্স থেকে ডাউনলোড করতে পারেন।
ডাউনলোড করা ফন্ট ফাইল /public/fonts/ ডিরেক্টরিতে রাখুন:
/public/fonts/roboto-regular.woff2
/public/fonts/roboto-medium.woff2
/public/fonts/roboto-bold.woff2ধাপ ২: next/font/local ইম্পোর্ট করা
// app/layout.tsx
import localFont from 'next/font/local'
import './globals.css'ধাপ ৩: লোকাল ফন্ট কনফিগার করা
// app/layout.tsx
import localFont from 'next/font/local'
import './globals.css'
// লোকাল ফন্ট কনফিগারেশন
const roboto = localFont({
src: [
{
path: '../public/fonts/roboto-regular.woff2',
weight: '400',
style: 'normal',
},
{
path: '../public/fonts/roboto-medium.woff2',
weight: '500',
style: 'normal',
},
{
path: '../public/fonts/roboto-bold.woff2',
weight: '700',
style: 'normal',
},
],
variable: '--font-roboto',
display: 'swap',
})ধাপ ৪: ফন্ট ব্যবহার করা
// app/layout.tsx
import localFont from 'next/font/local'
import './globals.css'
// লোকাল ফন্ট কনফিগারেশন
const roboto = localFont({
src: [
{
path: '../public/fonts/roboto-regular.woff2',
weight: '400',
style: 'normal',
},
{
path: '../public/fonts/roboto-medium.woff2',
weight: '500',
style: 'normal',
},
{
path: '../public/fonts/roboto-bold.woff2',
weight: '700',
style: 'normal',
},
],
variable: '--font-roboto',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={roboto.variable}>
<body>
{children}
</body>
</html>
)
}ধাপ ৫: CSS ভেরিয়েবল ব্যবহার করা
/* globals.css */
:root {
--font-roboto: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
font-family: var(--font-roboto);
}
h1, h2, h3 {
font-family: var(--font-roboto);
font-weight: 700;
}প্রতিটি সেটিং এর ব্যাখ্যা:
localFontইম্পোর্ট: Next.js এরnext/font/localথেকেlocalFontইম্পোর্ট করা হয়েছে। এটি লোকাল ফন্ট ফাইল লোড করতে ব্যবহার করা হয়।srcঅ্যারে: এই সেটিং লোকাল ফন্ট ফাইলের পাথ, ওয়েট, এবং স্টাইল নির্দিষ্ট করে। আমরা তিনটি ফন্ট ফাইল লোড করছি: regular (400), medium (500), এবং bold (700)।variable: '--font-roboto': এই সেটিং CSS ভেরিয়েবল তৈরি করে, যা ফন্ট ব্যবহার সহজ করে। এটিclassNameহিসেবে ব্যবহার করা হয় এবং CSS এvar(--font-roboto)হিসেবে ব্যবহার করা যায়।display: 'swap': এই সেটিং ফন্ট লোড হওয়ার আগে ফলব্যাক ফন্ট দেখায়, যা FOIT (Flash of Invisible Text) দূর করে। ফন্ট লোড হলে ফলব্যাক ফন্ট থেকে কাস্টম ফন্টে স্উইচ করে।
ফলাফল:
“ফিনটেক সলিউশনস” ওয়েবসাইটে এই অপটিমাইজেশন প্রয়োগ করার পর:
- থার্ড-পার্টি ডিপেন্ডেন্সি দূর হয়েছে
- ফন