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 () => ; ``` Utility-first; Next.js ਕੋਲ ਪਹਿਲੀ-ਦਰਜੇ ਦੀ ਸੈਟਅਪ ਸਪੋਰਟ ਹੈ। ਸਪੀਡ ਅਤੇ ਇਕਸਾਰਤਾ ਲਈ ਪ੍ਰਸਿੱਧ, ਅਤੇ ਇਹ ਅਣਵਰਤੀ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਵੈ-ਚਾਲਿਤ ਰੂਪ ਵਿੱਚ ਹਟਾਉਂਦਾ ਹੈ। ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਨੋਟ ਕਰੋ: ਜ਼ਿਆਦਾਤਰ CSS-in-JS ਲਾਇਬ੍ਰੇਰੀਆਂ **ਸਿਰਫ਼ ਕਲਾਇੰਟ ਕੰਪੋਨੈਂਟ** ਹਨ ਅਤੇ Server Components ਲਈ ਵਾਧੂ ਕੋਨਫਿਗ ਦੀ ਲੋੜ ਹੈ। ਨਵੀਨਤਰ 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 ਸਟਾਈਲਿੰਗ ਦੀ ਪਸੰਦ ਨੂੰ ਜ਼ਬਰਦਸਤ ਨਹੀਂ ਕਰਦਾ — ਇਹ ਗਲੋਬਲ CSS, ਸਕੋਪਡ CSS Modules, Tailwind, Sass, ਅਤੇ CSS-in-JS ਨੂੰ ਬਿਲਤ-ਇਨ ਟੂਲਿੰਗ ਦੇ ਨਾਲ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਟ੍ਰੇਡ-ਆਫਸ ਨੂੰ ਜਾਣਨਾ (ਖਾਸ ਤੌਰ 'ਤੇ ਇਹ ਕਿ CSS-in-JS App Router ਵਿੱਚ ਸਿਰਫ਼ ਕਲਾਇੰਟ-ਸਾਈਡ ਹੈ, ਜਦੋਂ ਕਿ Tailwind/CSS Modules Server Components ਦੇ ਨਾਲ ਵਧੀਆ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ) ਤੁਹਾਨੂੰ ਇੱਕ ਦ੃ਸ਼ਟਿਕੋਣ ਚੁਣਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਜੋ ਰੈਂਡਰਿੰਗ ਮਾਡਲ ਨਾਲ ਫਿੱਟ ਬੈਠਦਾ ਹੈ।