Next.js වල Styling කරන හැටි: CSS Modules, Global CSS, Tailwind SC Guide

Next.js වල Styling කරන හැටි: ගැඹුරින්ම ඉගෙන ගමු SC Guide

ආයුබෝවන් හැමෝටම! ✋ අද අපි කතා කරන්න යන්නේ Next.js applications වලට ඩිසයින් කරන, ලස්සන කරන 'styling' ගැන. Next.js කියන්නේ React Framework එකක්නේ. ඒ නිසා React වල තියෙන හැම styling ක්‍රමයක්ම වගේ Next.js වලටත් ගැලපෙනවා. හැබැයි Next.js වලටම වෙන් වෙච්ච, ඒ Framework එකත් එක්ක හොඳටම වැඩ කරන ක්‍රම කිහිපයකුත් තියෙනවා. මේවා ගැන හරිහැටි අවබෝධයක් නැත්නම් අපේ Project එකේ CSS ගොඩගැහිලා, maintain කරන්න අමාරු වෙන්න පුළුවන්.

මම මේ ලිපියෙන් Next.js Project එකක styling කරන ප්‍රධාන ක්‍රම තුනක් ගැන පැහැදිලි කරනවා. ඒ වගේම ඒ ක්‍රම implement කරන හැටි Code Snippets එක්කම පෙන්නනවා. අවසානයේදී, පොදු ගැටලු සහ හොඳම පුරුදු (Best Practices) ගැනත් කතා කරමු.

මේ ලිපිය කියෙව්වට පස්සේ ඔයාලට Next.js Project එකකට ගැලපෙන හොඳම styling method එක තෝරගන්න, ඒක හරියටම පාවිච්චි කරන්න පුළුවන් වෙයි කියලා මම විශ්වාස කරනවා. එහෙනම්, අපි පටන් ගමු!

Next.js වලට ගැලපෙන Styling ක්‍රම මොනවද?

Next.js Framework එකෙන් අපිට විවිධ ආකාරවලට Styling කරන්න පහසුකම් සලසනවා. මේවා අතරින් බහුලව භාවිත වන ක්‍රම කිහිපයක් තමයි මේ:

1. CSS Modules

මේක Next.js වලදී Component-level styles වලට බහුලව භාවිතා වෙන ක්‍රමයක්. CSS Modules වලදී අපි ලියන CSS Styles, ඒ අදාල Component එකට විතරක් සීමා වෙනවා. ඒ කියන්නේ, Styles global වෙන්නේ නැහැ. මේකෙන් වෙන්නේ Styles එකිනෙක ගැටෙන එක (CSS Conflict) නැති වෙන එක.

• වාසි (Pros):
  • Component-scoped styles: CSS class names ස්වයංක්‍රීයව unique hashes විදිහට generate වෙන නිසා, වෙන components වලට බලපෑමක් වෙන්නේ නැහැ.
  • No conflicts: Global CSS conflicts නැති වෙනවා.
  • Maintainability: ලොකු Project වල Styles Maintain කරන්න ලේසියි.
• අවාසි (Cons):
  • Classes share කරන්න අමාරුයි. (ඒ කියන්නේ එකම style එක components කිහිපයකට දාන්න ටිකක් අමාරුයි)
  • සමහරවිට ලොකු files ගොඩක් එන්න පුළුවන් (multiple CSS files).

2. Global CSS

මේක සාමාන්‍යයෙන් අපේ Application එකේ common styles (උදා: typography, resets, layout defaults) වලට භාවිතා කරන ක්‍රමයක්. Global CSS කියන්නේ Application එකේ ඕනෑම තැනකදී access කරන්න පුළුවන් styles.

• වාසි (Pros):
  • Easy for common styles: Base styles, third-party library styles වගේ දේවල් වලට හොඳයි.
  • Setup කරන්න ලේසියි.
• අවාසි (Cons):
  • Global scope: Class names ගැටෙන්න (conflicts) පුළුවන්.
  • ලොකු Project වලදී Manage කරන්න අමාරුයි.

3. Tailwind CSS Integration

Tailwind CSS කියන්නේ Utility-First CSS framework එකක්. මේකෙන් වෙන්නේ CSS classes ගොඩක් අපිට ලැබෙන එක. මේ classes පාවිච්චි කරලා ඉක්මනටම designs හදන්න පුළුවන්. උදාහරණයක් විදිහට text-xl, font-bold, bg-blue-500 වගේ classes තියෙනවා.

• වාසි (Pros):
  • Rapid UI development: ඉක්මනට UI designs හදන්න පුළුවන්.
  • Consistent design: Design System එකක් maintain කරන්න ලේසියි.
  • Optimized CSS: Production build එකේදී පාවිච්චි නොකරන styles remove කරන නිසා CSS bundle size එක අඩු වෙනවා.
• අවාසි (Cons):
  • Initial setup එකට ටිකක් වෙලා යනවා.
  • HTML එකේ classes ගොඩක් පිරෙන්න පුළුවන්.
  • නවකයින්ට ඉගෙන ගන්න ටිකක් කාලයක් යයි.

CSS Modules සහ Global CSS භාවිතය

අපි දැන් මේවා ප්‍රායෝගිකව කොහොමද පාවිච්චි කරන්නේ කියලා බලමු.

1. CSS Module එකක් හදමු

අපි හිතමු අපිට Button Component එකකට විතරක් අදාල styles ටිකක් ඕන කියලා. ඒකට අපි Button.module.css කියලා file එකක් හදනවා.

styles/Button.module.css

.buttonPrimary {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.buttonPrimary:hover {
  background-color: #005bb5;
}

.buttonSecondary {
  background-color: #f0f0f0;
  color: #333;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

ඊට පස්සේ මේ CSS Module එක Button Component එක ඇතුලට import කරගන්නවා.

components/Button.js

import styles from '../styles/Button.module.css';

export default function Button({ children, type = 'primary' }) {
  const buttonClass = type === 'primary' ? styles.buttonPrimary : styles.buttonSecondary;

  return (
    <button className={buttonClass}>
      {children}
    </button>
  );
}

මේක පාවිච්චි කරන හැටි:

import Button from '../components/Button';

export default function HomePage() {
  return (
    <div>
      <h1>Our Awesome App</h1>
      <Button type="primary">Click Me!</Button>
      <Button type="secondary">Learn More</Button>
    </div>
  );
}

දැක්කනේ? styles.buttonPrimary කියලා access කරාම මේ styles, මේ Button Component එකට විතරක් අදාල වෙනවා. වෙන Button එකක buttonPrimary කියලා class එකක් තිබ්බත් මේකට බලපෑමක් වෙන්නේ නැහැ.

2. Global CSS එකක් හදමු

Application එක පුරාවටම බලපාන styles, globals.css වගේ file එකක තියන එක හොඳ පුරුද්දක්.

styles/globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  color: #333;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

* {
  box-sizing: border-box;
}

මේ globals.css file එක Next.js Project එකට import කරන්න ඕනේ _app.js (Pages Router) හෝ layout.js (App Router) file එකෙන්. Next.js 13 (App Router) වලින් පස්සේ, Global styles layout.js එකට import කරනවා.

app/layout.js

import '../styles/globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

දැන් මේ globals.css එකේ තියෙන styles ඔයාගේ මුළු Application එකටම බලපානවා.

Tailwind CSS Next.js වලට එකතු කරමු

Tailwind CSS Next.js Project එකකට add කරන එකත් හරිම ලේසියි. පහත steps ටික follow කරන්න:

Step 1: Install Dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

මේ commands වලින් tailwindcss, postcss, autoprefixer install වෙනවා. ඊට පස්සේ tailwind.config.js සහ postcss.config.js files දෙක generate වෙනවා.

Step 2: Configure Tailwind CSS

tailwind.config.js file එක open කරලා, ඔයාගේ Project එකේ Tailwind classes තියෙන files path ටික content array එකට add කරන්න.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // App Router
    './pages/**/*.{js,ts,jsx,tsx,mdx}', // Pages Router
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 3: Add Tailwind Directives to your CSS

ඔයාගේ globals.css (හෝ වෙනත් Global CSS file එකක්) open කරලා, Tailwind හි base, components, සහ utilities styles add කරන්න:

styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your other global styles can go here */
html,
body {
  padding: 0;
  margin: 0;
  /* ... */
}

Step 4: Use Tailwind Classes

දැන් ඔයාගේ Components වලට Tailwind classes පාවිච්චි කරන්න පුළුවන්.

components/TailwindButton.js

export default function TailwindButton({ children }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  );
}

මේකත් පාවිච්චි කරන හැටි:

import TailwindButton from '../components/TailwindButton';

export default function TailwindPage() {
  return (
    <div>
      <h1 className="text-4xl font-bold text-center my-8">Next.js with Tailwind!</h1>
      <TailwindButton>Tailwind Button</TailwindButton>
    </div>
  );
}

දැක්කනේ, classes කීපයක් එකතු කරලා හරි ලේසියෙන් Button එකට style කරගන්න පුළුවන්. මේකෙන් production build එකේදී පාවිච්චි කරන classes විතරක් CSS file එකට compile වෙනවා.

ගැටළු නිරාකරණය සහ හොඳම පුරුදු (Troubleshooting and Best Practices)

1. Style Conflicts

Global CSS සහ CSS Modules එකට පාවිච්චි කරනකොට, සමහර වෙලාවට styles ගැටෙන්න පුළුවන්. උදාහරණයක් විදිහට, Global CSS එකේ button class එකක් තියෙද්දී, CSS Module එකකත් button class එකක් තිබ්බොත්, Global එකේ තියෙන එකෙන් Module එකේ එක Overwrite වෙන්න පුළුවන්.

• නිරාකරණය: හැමවිටම Component-specific styles වලට CSS Modules පාවිච්චි කරන්න. Global CSS පාවිච්චි කරන්න නැවත නැවතත් භාවිත වන (reusable) base styles, typography, form styles, හෝ third-party library styles වලට විතරයි.
• හොඳම පුරුද්ද: Component-level styles සඳහා CSS Modules (හෝ Styled Components වැනි CSS-in-JS libraries) භාවිතා කරන්න. Global styles සඳහා globals.css වැනි file එකක් භාවිතා කරන්න.

2. Correct Import Paths

CSS files import කරනකොට paths වැරදි වෙන්න පුළුවන්. මේක Next.js Project වල common ගැටලුවක්.

• නිරාකරණය: Relatives paths (../styles/file.css) හෝ Absolute paths (@/styles/file.css) හරියටම දෙන්න. Next.js App Router වලදී default absolute path alias එක @/.

3. Consistency is Key

Next.js Project එකකදී, හැමෝම එකම styling method එකක් භාවිතා කරන එක වැදගත්. නැතිනම් Project එකේ styles එකිනෙකට වෙනස් වෙලා, maintain කරන්න අමාරු වෙනවා.

• හොඳම පුරුද්ද: Project එක පටන් ගන්න කලින්, ඔයාලගේ කණ්ඩායම (team) එක්ක කතා කරලා, Project එකට ගැලපෙන styling method එක තෝරගන්න. ඊට පස්සේ හැමෝම ඒකම follow කරන්න.

4. When to choose what?

• සරල Projects වලට: Global CSS හෝ Tailwind CSS.
• Component encapsulation වැදගත් නම්: CSS Modules.
• ඉක්මනින් UI හදන්න ඕන නම්, හෝ Design System එකක් maintain කරනවා නම්: Tailwind CSS.
• තවදුරටත්: CSS-in-JS libraries (Styled Components, Emotion) වැනි දේවලුත් Next.js වලට support කරනවා. ඒ ගැන වෙන ලිපියකින් කතා කරන්නම්.

අවසාන වශයෙන් (Conclusion)

Next.js වල styling කරන හැටි ගැන මේ ලිපියෙන් ඔයාලට හොඳ අවබෝධයක් ලැබෙන්න ඇති කියලා මම හිතනවා. අපි CSS Modules, Global CSS, සහ Tailwind CSS යන ප්‍රධාන ක්‍රම තුන ගැන කතා කළා. ඒ වගේම ඒ එක් එක් ක්‍රමයේ වාසි අවාසි සහ ප්‍රායෝගිකව භාවිත කරන ආකාරයත් ඉගෙන ගත්තා. මතක තියාගන්න, කිසිම styling method එකක් 'සියල්ලටම හොඳම' (one-size-fits-all) නැහැ. ඔයාගේ Project එකේ අවශ්‍යතාවය සහ කණ්ඩායමේ කැමැත්ත අනුව හොඳම ක්‍රමය තෝරගන්න එක තමයි වැදගත්.

ඔයාලගේ Project වල මේ ක්‍රම Implement කරලා බලන්න. මොන වගේ අත්දැකීම්ද ලැබුණේ? ඔයාලා වෙනත් styling methods පාවිච්චි කරනවද? එහෙම නම්, පහත Comment Section එකේ ඔයාලගේ අදහස් බෙදාගන්න. ප්‍රශ්න තියෙනවා නම් ඒවත් අහන්න. මම උත්තර දෙන්නම්. ආයෙත් හම්බවෙමු!