Module 3: Components සහ Styling

ඔබේ Next.js යෙදුම අලංකාරවත් සහ කළමනාකරණය කිරීමට පහසු කරගන්නේ කෙසේදැයි ඉගෙන ගනිමු.

1. නැවත භාවිතා කළ හැකි Components නිර්මාණය

React සහ Next.js වල හදවත තමයි Components. Component එකක් කියන්නේ UI එකේ ස්වාධීන, නැවත භාවිතා කළ හැකි කොටසක්. උදාහරණයක් ලෙස, navigation bar එකක්, button එකක්, footer එකක් වැනි දේ components විදියට හදන්න පුළුවන්.

Components භාවිතා කිරීමේ ප්‍රධාන වාසිය තමයි DRY (Don't Repeat Yourself) මූලධර්මය. එකම code එක තැන් තැන් වල නැවත නැවත ලියනවා වෙනුවට, අපි component එකක් හදලා, අවශ්‍ය හැම තැනකම ඒක import කරලා use කරනවා. මේ නිසා code එක පිරිසිදුව, කළමනාකරණයට පහසුව තියාගන්න පුළුවන්.

හොඳම පුරුද්දක් තමයි, project එකේ root එකේ components නමින් folder එකක් හදාගෙන, අපේ custom components ඔක්කොම ඒක ඇතුළේ තියාගන්න එක. අපි දැන් සරල `Footer` component එකක් හදමු.

මුලින්ම, project root එකේ `components` නමින් folder එකක් සාදන්න. ඒ තුළ `Footer.js` නමින් file එකක් සාදන්න. 

// File: components/Footer.js

const Footer = () => {
  const currentYear = new Date().getFullYear();
  return (
    <footer style={{ textAlign: 'center', padding: '20px', marginTop: '40px', background: '#333', color: 'white' }}>
      <p>© {currentYear} My Awesome App. All rights reserved.</p>
    </footer>
  );
};

export default Footer;

දැන් මේ `Footer` component එක අපේ app එකේ හැම page එකකම පෙන්වන්න ඕන නම්, අපි ඒක root layout file එකට, එනම් app/layout.js එකට import කරන්න ඕන. 

// File: app/layout.js
import Footer from '../components/Footer'; // Import the component
import './globals.css'; // Keep this

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}  {/* Page content will be injected here */}
        <Footer /> {/* Use the component here */}
      </body>
    </html>
  );
}

දැන් ඔබේ app එකේ ඕනෑම page එකකට ගියොත්, ඔබට මේ footer එක පතුලේ පෙනේවි.

2. Next.js හි Styling ක්‍රමවේද

Next.js යෙදුමක් style කරන්න ක්‍රම කිහිපයක් තියෙනවා. අපි ප්‍රධාන ක්‍රම 3ක් ගැන කතා කරමු.

Global CSS

app/globals.css කියන්නේ අපේ app එකටම පොදු styles දාන්න තියෙන file එක. මෙහි ලියන CSS നിയമ හැම component එකකටම, හැම page එකකටම බලපානවා. Body background color, font styles, link colors වගේ දේවල් define කරන්න මේක හොඳයි.

නමුත්, ලොකු project එකකදී හැමදේටම global styles භාවිතා කරන එක class name conflicts (class නම් ගැලපීම්) ඇතිවෙන්න හේතු වෙන්න පුළුවන්.

CSS Modules - නිර්දේශිත ක්‍රමය

CSS Modules මගින් CSS class names ස්වයංක්‍රීයව අද්විතීය (unique) නමක් බවට පත් කර, style ටික අදාළ component එකට විතරක් සීමා කරනවා. මේ නිසා class name conflicts ගැන බය වෙන්න ඕන නෑ.

CSS Module file එකක් හදද්දී, file නම .module.css වලින් අවසන් වෙන්න ඕන (උදා: Navbar.module.css).

අපි `Navbar` component එකක් හදලා ඒක CSS Modules වලින් style කරමු.

1. components/Navbar.module.css file එක සාදන්න:

/* File: components/Navbar.module.css */
.navbar {
  background-color: #333;
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

.link:hover {
  color: #0d6efd;
}

2. components/Navbar.js file එක සාදා styles import කරන්න:

// File: components/Navbar.js
import Link from 'next/link';
import styles from './Navbar.module.css'; // Import the CSS Module

const Navbar = () => {
  return (
    <nav className={styles.navbar}>
      <Link href="/" className={styles.link}>Home</Link>
      <Link href="/about" className={styles.link}>About</Link>
      <Link href="/blog" className={styles.link}>Blog</Link>
    </nav>
  );
};

export default Navbar;

`className={styles.navbar}` ලෙස භාවිතා කරන හැටි බලන්න. මෙතනදී Next.js විසින් build time එකේදී `navbar` කියන class එකට unique නමක් generate කරනවා (උදා: `Navbar_navbar__123xyz`). ඒ නිසා මේ style එක වෙන කිසිම component එකක style එකක් එක්ක conflict වෙන්නේ නෑ.

Using Tailwind CSS

Tailwind CSS කියන්නේ utility-first CSS framework එකක්. මේකෙන් වෙන්නේ, කලින් හදපු CSS classes (utilities) ගොඩක් අපිට දෙනවා. අපි ඒ classes කෙලින්ම අපේ HTML (JSX) වලට දාලා UI එක හදනවා. මේක හරිම වේගවත් සහ flexible ක්‍රමයක්.

Next.js project එකකට Tailwind CSS එකතු කරන හැටි:

  1. Dependencies Install කිරීම: Terminal එකේ පහත command එක run කරන්න. 
    npm install -D tailwindcss postcss autoprefixer
  2. Config Files සෑදීම: පහත command එක run කරන්න. 
    npx tailwindcss init -p

    මෙයින් tailwind.config.js සහ postcss.config.js files දෙක හැදෙනවා.

  3. Tailwind Config කිරීම: tailwind.config.js file එක open කර `content` array එකට path ටික දෙන්න. 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  4. Global CSS එකට Directives එකතු කිරීම: app/globals.css file එකේ තියෙන හැමදේම අයින් කරලා, පහත lines 3 විතරක් දාන්න. 
    @tailwind base;
@tailwind components;
@tailwind utilities;
  5. භාවිතා කිරීම: දැන් ඔබට ඕනෑම component එකක Tailwind classes භාවිතා කරන්න පුළුවන්. 
    // Example of a button styled with Tailwind CSS
export default function MyButton() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click Me
    </button>
  );
}

Tailwind CSS භාවිතා කරනවා නම්, වෙනම CSS files ලියන එක ගොඩක් දුරට අඩු වෙනවා.

3. Hands-on: Navigation Bar එකක් සහ Styled Layout එකක් සෑදීම

දැන් අපි ඉගෙන ගත්ත දේවල් භාවිතා කරලා, අපේ app එකට CSS Modules වලින් style කරපු `Navbar` එකක් එකතු කර, layout එක පොඩ්ඩක් පිළිවෙල කරමු.

  1. ඉහත "CSS Modules" කොටසේ පියවර 1 සහ 2 අනුගමනය කර Navbar.js සහ Navbar.module.css files දෙක `components` folder එකේ සාදන්න.
  2. දැන්, අපේ root layout file එක වන app/layout.js එකට ගොස්, කලින් එකතු කළ `Footer` එකට අමතරව මේ `Navbar` එකත් import කරමු. 
    // File: app/layout.js
import Navbar from '../components/Navbar'; // Import Navbar
import Footer from '../components/Footer';
import './globals.css';

export const metadata = {
  title: 'My Next.js App',
  description: 'Learning Next.js with EgoTechWorld',
};

export default function RootLayout({ children }) {
  return (
    <html lang="si">
      <body>
        <Navbar />
        <main style={{ padding: '2rem', minHeight: '80vh' }}>
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}
  3. දැන් ඔබේ app එක බලන්න. හැම page එකකම උඩින් ලස්සන Navbar එකක් සහ පතුලේ Footer එකක් පෙනේවි. நடுவில் `
    ` tag එකක් දමා `{children}` (අපේ page content එක) ඒ තුළට දැමීමෙන්, layout එක වඩාත් අර්ථවත් සහ පිළිවෙලක් වී ඇත.
« Module 2: Pages සහ Routing Module 4: Data Fetching »