Next.js کون سے styling اختیارات سپورٹ کرتا ہے؟

Question

Accepted Answer

Next.js بالعملی طور پر ہر CSS طریقہ کو built-in ہینڈلنگ کے ساتھ سپورٹ کرتا ہے — آپ اپنے پروجیکٹ کے لیے موزوں چیز منتخب کر سکتے ہیں۔ ## Global CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (ڈیفالٹ طور پر scoped) ```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` کنونشن class names کو خود بخود scoped کرتی ہے، تو ایک فائل میں `.primary` کبھی دوسری فائل میں `.primary` کے ساتھ tash نہیں کھاتا — CSS کے global-scope مسئلے کو کسی runtime کے بغیر حل کرتا ہے۔ ## Tailwind CSS (بہت عام) ```tsx export default () => ; ``` Utility-first؛ Next.js کے پاس first-class setup سپورٹ ہے۔ رفتار اور consistency کے لیے مقبول، اور یہ خودکار طور پر استعمال نہ شدہ styles کو purge کرتا ہے۔ ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` کام کرتا ہے، لیکن نوٹ کریں: زیادہ تر CSS-in-JS لائبریریز **صرف Client Components** ہیں اور Server Components کے لیے اضافی config کی ضرورت ہے۔ نئے zero-runtime اختیارات (vanilla-extract، Tailwind) App Router کے server-first ماڈل کے لیے بہتر موزوں ہیں۔ ## 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 کوئی styling انتخاب نہیں کرتا — یہ global CSS، scoped CSS Modules، Tailwind، Sass، اور CSS-in-JS کو built-in tooling کے ساتھ سپورٹ کرتا ہے۔ Trade-offs کو جاننا (خاص طور پر یہ کہ CSS-in-JS App Router میں صرف client-only ہے، جبکہ Tailwind/CSS Modules Server Components کے ساتھ اچھی طرح کام کرتے ہیں) آپ کو ایک طریقہ منتخب کرنے میں مدد دیتا ہے جو rendering ماڈل کے لیے موزوں ہو۔