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 நூலகங்கள் **Client Components மட்டுமே** மற்றும் Server Components-க்கு கூடுதல் உள்ளமைப்பு தேவை. புதிய பூஜ்ய-இயக்க நேர விருப்பங்கள் (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 Server Components-உடன் நன்றாக வேலை செய்கிறது) உங்களுக்கு வெளிப்படுத்தல் மாதிரியுடன் பொருந்தக்கூடிய ஒரு முறையைத் தேர்ந்தெடுக்க உதவுகிறது।