Next.js একটি আধুনিক ফ্রেমওয়ার্ক যা React এর উপরে তৈরি এবং এটি স্টাইলিং এবং ইমেজ হ্যান্ডলিংয়ের জন্য উন্নত সুবিধা প্রদান করে। Next.js এর CSS এবং ইমেজ হ্যান্ডলিং সিস্টেমটি খুবই সহজ এবং কার্যকরী। এখানে আমরা আলোচনা করবো Next.js-এ CSS এবং ইমেজ হ্যান্ডলিং এর মূল বিষয়গুলো।
১. CSS হ্যান্ডলিং Next.js-এ
Next.js CSS ফাইল ব্যবহারে অনেক সুবিধা প্রদান করে এবং এটি CSS মডিউল (CSS Modules), গ্লোবাল CSS এবং স্টাইলড কম্পোনেন্টস সমর্থন করে।
গ্লোবাল CSS ফাইল
Next.js আপনাকে অ্যাপ্লিকেশনের জন্য গ্লোবাল স্টাইলস ব্যবহার করার সুযোগ দেয়। সাধারণত pages/_app.js ফাইলে গ্লোবাল CSS ফাইল অন্তর্ভুক্ত করা হয়।
globals.cssফাইলটি সাধারণতstyles/ফোল্ডারে রাখা হয়।- এই ফাইলটি গ্লোবাল স্টাইল প্রযোজ্য করার জন্য
_app.jsফাইলে ইমপোর্ট করা হয়।
globals.css উদাহরণ:
/* styles/globals.css */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
_app.js ফাইলে গ্লোবাল CSS ইমপোর্ট করা:
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp;
এখন, আপনি globals.css ফাইলের স্টাইল পুরো অ্যাপ্লিকেশনে ব্যবহার করতে পারবেন।
CSS মডিউল
Next.js CSS মডিউল ব্যবহার করে কম্পোনেন্ট স্পেসিফিক স্টাইলিং করতে সহায়তা করে। CSS মডিউল ব্যবহার করার মাধ্যমে আপনি একটি কম্পোনেন্টে প্রযোজ্য CSS আলাদা রাখতে পারবেন এবং স্টাইল কনফ্লিক্টের সমস্যা থেকে মুক্তি পাবেন।
CSS মডিউল ফাইল তৈরি:
আপনি যদি কোনো কম্পোনেন্টের জন্য CSS মডিউল ব্যবহার করতে চান, তাহলে .module.css এক্সটেনশন দিয়ে CSS ফাইল তৈরি করতে হবে।
Home.module.css উদাহরণ:
/* styles/Home.module.css */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.title {
color: #333;
font-size: 36px;
}
এখন, এই CSS মডিউল ফাইলটি Home.js কম্পোনেন্টে ইমপোর্ট করতে হবে:
Home.js কম্পোনেন্ট:
import styles from '../styles/Home.module.css'
function Home() {
return (
<div className={styles.container}>
<h1 className={styles.title}>Welcome to Next.js!</h1>
</div>
)
}
export default Home;
এভাবে আপনি styles.container এবং styles.title এর মাধ্যমে CSS স্টাইল প্রয়োগ করবেন, যা শুধু এই কম্পোনেন্টে প্রযোজ্য হবে।
২. Image হ্যান্ডলিং Next.js-এ
Next.js ইমেজ অপটিমাইজেশনের জন্য একটি বিল্ট-ইন Image কম্পোনেন্ট প্রদান করে, যা স্বয়ংক্রিয়ভাবে ইমেজ রিসাইজ, ফরম্যাট কনভার্সন এবং ল্যাজি লোডিং (lazy loading) এর সুবিধা দেয়। Next.js এর next/image কম্পোনেন্ট ব্যবহার করে ইমেজ ফাইল গুলি আরো দ্রুত এবং অপটিমাইজডভাবে লোড করা যায়।
next/image কম্পোনেন্ট ব্যবহার
Next.js এর Image কম্পোনেন্টের মাধ্যমে আপনি ইমেজ লোডিং অপটিমাইজ করতে পারেন। এটি ইমেজের সাইজ এবং রেজুলেশন স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করে।
next/image উদাহরণ:
import Image from 'next/image'
import logo from '../public/images/logo.png'
function Home() {
return (
<div>
<h1>Welcome to Next.js!</h1>
<Image
src={logo}
alt="Logo"
width={500}
height={500}
/>
</div>
)
}
export default Home;
এখানে:
src: ইমেজের সোর্স ফাইল।alt: ইমেজের বিকল্প টেক্সট (এটি SEO এর জন্য গুরুত্বপূর্ণ)।widthএবংheight: ইমেজের আকার নির্ধারণ করে।
Next.js ইমেজ অপটিমাইজেশন ফিচারটি স্বয়ংক্রিয়ভাবে:
- ইমেজকে স্কেল করে (রেজুলেশন অনুযায়ী),
- প্রয়োজনীয় ফরম্যাটে (যেমন WebP) কনভার্ট করে,
- ল্যাজি লোডিংয়ের মাধ্যমে পারফরম্যান্স উন্নত করে।
কাস্টম ডোমেইন থেকে ইমেজ লোডিং
Next.js এর ডিফল্ট সেটআপ শুধুমাত্র public/ ফোল্ডার থেকে ইমেজ লোড করতে অনুমতি দেয়। তবে আপনি যদি কাস্টম ডোমেইন থেকে ইমেজ লোড করতে চান, তাহলে আপনাকে next.config.js ফাইলে সেই ডোমেইনটি উল্লেখ করতে হবে।
next.config.js উদাহরণ:
module.exports = {
images: {
domains: ['example.com'], // এখানে example.com থেকে ইমেজ লোড করা যাবে
},
}
এভাবে আপনি example.com ডোমেইন থেকে ইমেজ লোড করতে পারবেন।
৩. নোট: CSS এবং Image হ্যান্ডলিং সম্পর্কিত কিছু গুরুত্বপূর্ণ পয়েন্ট
- CSS মডিউল: আপনি যখন CSS মডিউল ব্যবহার করেন, তখন স্টাইল শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের জন্য প্রযোজ্য হয় এবং এটি অন্য কম্পোনেন্টের স্টাইলের সাথে কনফ্লিক্ট সৃষ্টি করে না।
next/imageকম্পোনেন্ট: ইমেজ অপটিমাইজেশনের জন্য ব্যবহৃত এই কম্পোনেন্ট সঠিকভাবে ইমেজ লোড করার জন্য সর্বোত্তম সমাধান প্রদান করে। এটি শুধু পারফরম্যান্স নয়, SEO এর ক্ষেত্রেও সাহায্য করে।public/ফোল্ডার: সব স্ট্যাটিক ফাইল যেমন ইমেজ, ফন্ট, পিডিএফ ফাইল ইত্যাদিpublic/ফোল্ডারে রাখতে হবে, যা পরে সরাসরি URL এর মাধ্যমে অ্যাক্সেস করা যাবে।
Next.js আপনাকে একটি শক্তিশালী এবং সহজ CSS ও ইমেজ হ্যান্ডলিং সিস্টেম প্রদান করে, যা আপনার অ্যাপ্লিকেশনকে অপটিমাইজড এবং স্কেলেবল রাখে।
