Module 1: Next.js හැඳින්වීම

1. Next.js යනු කුමක්ද සහ එය React වලට වඩා වෙනස් වන්නේ ඇයි?

ඔබ දැනටමත් React ගැන දන්නවා ඇති. React කියන්නේ user interfaces (UI) හදන්න තියෙන 아주 ජනප්‍රිය JavaScript library එකක්. නමුත් React වලින් විතරක් සම්පූර්ණ, production-level වෙබ් යෙදුමක් හදනකොට අපිට routing, data fetching, සහ server-side rendering වගේ දේවල් වලට අමතර libraries ගොඩක් install කරලා configure කරන්න වෙනවා. මේ ක්‍රියාවලිය ටිකක් සංකීර්ණයි.

Next.js කියන්නේ මේ ගැටලුවට පිළිතුරක්. එය React මත ගොඩනැගූ framework (රාමුවක්) එකක්. Next.js අපිට React වල සියලුම බලය ලබා දෙන අතරම, ඉහත සඳහන් කළ routing, data fetching, rendering වැනි දේවල් ඉතා පහසුවෙන් කරන්න අවශ්‍ය සියලුම මෙවලම් සහ ව්‍යුහය (structure) සපයනවා. සරලවම, Next.js මගින් React development එක වඩාත් පහසු, වේගවත් සහ කාර්යක්ෂම කරනවා.

React සහ Next.js අතර ප්‍රධානම වෙනස තමයි pre-rendering. සාමාන්‍ය React app එකක් (Client-Side Rendered - CSR) browser එකේදී හිස් HTML පිටුවක් විදියට load වෙලා, ඊට පස්සේ JavaScript run වෙලා තමයි content එක පෙන්වන්නේ. නමුත් Next.js, පිටුව browser එකට එන්න කලින් server එකේදී HTML එක generate කරනවා (pre-render). මේ නිසා වෙබ් අඩවිය ඉතා වේගයෙන් load වෙනවා සහ SEO (Search Engine Optimization) වලට ඉතාමත් හිතකරයි.

2. Next.js හි ප්‍රධාන ලක්ෂණ (Key Features)

Next.js හි සාර්ථකත්වයට හේතු වූ ප්‍රධාන ලක්ෂණ කිහිපයක් මෙන්න:

• Server-Side Rendering (SSR): සෑම request එකකදීම server එකේදී පිටුව render කර HTML එක browser එකට එවනු ලබයි. dynamic සහ නිතර වෙනස් වන data ඇති පිටු සඳහා මෙය වඩාත් සුදුසුයි (උදා: user dashboard).
• Static Site Generation (SSG): App එක build කරන වෙලාවෙම (build time) පිටු HTML files විදියට generate කර තබයි. Request එකක් ආවම, ඒ generate කරපු file එක කෙලින්ම CDN එකකින් serve කරයි. Blog posts, marketing pages වැනි දේ සඳහා මෙය අතිශයින් වේගවත් ක්‍රමයකි.
• Incremental Static Regeneration (ISR): SSG සහ SSR වල එකතුවක්. Build time එකේදී පිටුව generate කර, නිශ්චිත කාලයකට පසු background එකෙන් දත්ත නැවත ලබාගෙන පිටුව යාවත්කාලීන කරයි. මේ නිසා වේගය සහ නැවුම් දත්ත (fresh data) යන දෙකම ලබාගත හැක.
• API Routes: `pages/api` directory එක ඇතුළත, ඔබට සම්පූර්ණ backend API එකක් නිර්මාණය කළ හැකිය. Database එකකට සම්බන්ධ වීම, user authentication හැසිරවීම වැනි දේට වෙනම backend server එකක් අවශ්‍ය නොවේ.

3. Next.js Project එකක් සකසා ගැනීම (Setting up)

Next.js project එකක් ආරම්භ කිරීම ඉතාම පහසුයි. ඔබට අවශ්‍ය වන්නේ Node.js (version 18.17 හෝ ඊට වැඩි) ඔබේ පරිගණකයේ install කර තිබීම පමණයි.

ඔබේ terminal (Command Prompt, PowerShell හෝ Terminal) එක open කර පහත command එක run කරන්න.

npx create-next-app@latest

මෙම command එක run කළ පසු, project එක සකස් කිරීමට අවශ්‍ය ප්‍රශ්න කිහිපයක් ඔබෙන් අසනු ඇත:

• What is your project named? (ඔබේ project එකේ නම, උදා: `my-first-next-app`)
• Would you like to use TypeScript? (දැනට `No` තෝරන්න)
• Would you like to use ESLint? (`Yes` තෝරන්න)
• Would you like to use Tailwind CSS? (දැනට `No` තෝරන්න)
• Would you like to use `src/` directory? (`No` තෝරන්න)
• Would you like to use App Router? (`Yes` තෝරන්න - මෙය නවීනතම ක්‍රමයයි)
• Would you like to customize the default import alias? (`No` තෝරන්න)

Installation එක අවසන් වූ පසු, project directory එකට ගොස් development server එක start කරන්න.

cd my-first-next-app
npm run dev

දැන් ඔබේ web browser එක open කර http://localhost:3000 වෙත පිවිසෙන්න. ඔබට Next.js හි පිළිගැනීමේ පිටුව දැකගත හැකි වනු ඇත.

4. Project ව්‍යුහය පැහැදිලි කිරීම (Project Structure)

`create-next-app` මගින් සෑදූ project එකේ folder සහ file ව්‍යුහය පහත පරිදි වේ:

my-first-next-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js       # ප්‍රධාන Layout එක
│   └── page.js         # මුල් පිටුව (Homepage - /)
├── node_modules/
├── public/             # Images, fonts වැනි static assets සඳහා
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── next.config.mjs
├── package.json
└── README.md

• `app/` directory: මෙය තමයි Next.js 13+ හි ප්‍රධානම directory එක. අපේ app එකේ සියලුම pages, layouts, සහ components මෙහි තැන්පත් කරයි.
• `app/layout.js`: මෙය app එකේ root layout එකයි. `` සහ `` tags මෙහි අඩංගු වන අතර, සියලුම pages මෙම layout එක තුළ render වේ.
• `app/page.js`: මෙය අපේ වෙබ් අඩවියේ මුල් පිටුව (`/`) වේ.
• `public/` directory: පින්තූර, fonts, වැනි static files මෙහි තැන්පත් කරයි.
• `next.config.mjs`: Next.js project එකේ configuration file එක.

5. Hands-on: ඔබේ පළමු Next.js පිටුව සෑදීම

දැන් අපි `app/page.js` file එක edit කර අපේ පළමු වෙනස්කම කරමු.

VS Code හෝ ඔබ කැමති editor එකකින් `app/page.js` file එක open කර එහි ඇති සියලුම code ඉවත් කර පහත code එක ඇතුළත් කරන්න.

export default function Home() {
  return (
    <main style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>හෙලෝ, Next.js!</h1>
      <p>මෙය මගේ පළමු Next.js යෙදුමයි.</p>
    </main>
  );
}

File එක save කළ සැනින්, browser එකේ http://localhost:3000 පිටුව auto-refresh වී ඔබේ නව වෙනස්කම් දැකගත හැකිවනු ඇත. මෙය Next.js හි Fast Refresh නම් විශේෂාංගයයි.

සුභ පැතුම්! ඔබ සාර්ථකව ඔබේ පළමු Next.js යෙදුම නිර්මාණය කර, එහි ව්‍යුහය зрозуміාගෙන, පළමු වෙනස්කම සිදු කර ඇත.