Next.js কোন স্টাইলিং অপশন সমর্থন করে?

Question

Accepted Answer

Next.js বাস্তবিকভাবে প্রতিটি CSS পদ্ধতি বিল্ট-ইন হ্যান্ডলিং সহ সমর্থন করে — আপনি প্রকল্পের জন্য যা উপযুক্ত তা বেছে নিতে পারেন। ## বৈশ্বিক CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (ডিফল্টরূপে স্কোপড) ```tsx // Button.module.css → class names are locally hashed (no collisions) import styles from "./Button.module.css"; export default () => ; // renders class like "Button_primary__a1b2" — scoped to this component ``` `.module.css` সম্মেলন স্বয়ংক্রিয়ভাবে ক্লাস নাম স্কোপ করে, তাই একটি ফাইলে `.primary` কখনও অন্য ফাইলে `.primary` এর সাথে সংঘর্ষ করে না — কোন রানটাইম ছাড়াই CSS এর বৈশ্বিক-স্কোপ সমস্যা সমাধান করে। ## Tailwind CSS (অত্যন্ত সাধারণ) ```tsx export default () => ; ``` ইউটিলিটি-প্রথম; Next.js এর ফার্স্ট-ক্লাস সেটআপ সমর্থন আছে। গতি এবং সামঞ্জস্যের জন্য জনপ্রিয়, এবং এটি স্বয়ংক্রিয়ভাবে অব্যবহৃত স্টাইল পরিষ্কার করে। ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` কাজ করে, তবে মনোযোগ দিন: বেশিরভাগ CSS-in-JS লাইব্রেরি **শুধুমাত্র ক্লায়েন্ট কম্পোনেন্ট** এবং সার্ভার কম্পোনেন্টের জন্য অতিরিক্ত কনফিগারেশন প্রয়োজন। নতুন জিরো-রানটাইম অপশন (vanilla-extract, Tailwind) App Router এর সার্ভার-প্রথম মডেলের জন্য আরও উপযুক্ত। ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## নির্বাচন করা ```text Tailwind → fast, consistent, server-friendly (popular default) CSS Modules → scoped, plain CSS, no runtime, great with Server Components CSS-in-JS → dynamic styles, but client-only + more setup in App Router Global CSS/Sass → resets, base styles, design tokens ``` ## কেন এটি গুরুত্বপূর্ণ Next.js একটি স্টাইলিং পছন্দ জোর দেয় না — এটি বৈশ্বিক CSS, স্কোপড CSS Modules, Tailwind, Sass, এবং CSS-in-JS বিল্ট-ইন টুলিং সহ সমর্থন করে। ট্রেড-অফগুলি জানা (বিশেষ করে যে CSS-in-JS App Router এ শুধুমাত্র ক্লায়েন্ট-সাইড, যখন Tailwind/CSS Modules সার্ভার কম্পোনেন্টের সাথে ভালভাবে কাজ করে) আপনাকে একটি পদ্ধতি বেছে নিতে সাহায্য করে যা রেন্ডারিং মডেলের সাথে খাপ খায়।