Next.js සම්පූර්ණ පාඨමාලාව සිංහලෙන්

නවීන වෙබ් තාක්ෂණයේ ප්‍රබල රාමුවක් වන Next.js, මුල සිට උසස් මට්ටම දක්වා සරල සිංහලෙන් ඉගෙන ගන්න. මෙම පාඨමාලාව ඔබව Full-Stack Developer කෙනෙකු කිරීමට අවශ්‍ය සියලු දැනුම ලබා දේ.

පාඨමාලාව අරඹන්න

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

වර්තමාන වෙබ් ලෝකයේ, වේගවත්, කාර්යක්ෂම සහ පරිශීලක-හිතකාමී (user-friendly) වෙබ් යෙදුම් (web applications) නිර්මාණය කිරීම අත්‍යවශ්‍ය වී තිබෙනවා. මේ සඳහා අපිට විවිධ මෙවලම් සහ තාක්ෂණයන් භාවිතා කරන්න පුළුවන්. JavaScript ලෝකයේ වඩාත්ම ජනප්‍රිය library එකක් තමයි React. React මගින් අපිට ඉතාමත් අන්තර්ක්‍රියාකාරී (interactive) user interfaces (UI) නිර්මාණය කරන්න පුළුවන්. නමුත්, React යනු UI library එකක් පමණයි. සම්පූර්ණ, නිෂ්පාදන මට්ටමේ (production-ready) යෙදුමක් හදන්න React විතරක් මදි. Routing, data fetching, server-side rendering වගේ දේවල් වලට අපිට වෙනත් libraries එකතු කරගන්න වෙනවා.

මෙන්න මේ ගැටලුවට විසඳුමක් විදියට තමයි Next.js බිහිවෙන්නේ. සරලවම කිව්වොත්, Next.js යනු React මත ගොඩනැගූ framework (රාමුවක්) එකක්. React වලින් අපිට ලැබෙන සියලුම সুবিধা සමග, production-ready යෙදුමක් හදන්න අවශ්‍ය අමතර විශේෂාංග රැසක් Next.js අපිට ලබා දෙනවා. Vercel සමාගම විසින් නිර්මාණය කරනු ලබන මෙය, React application එකක් හදන එක ගොඩක් පහසු කරනවා.

React සහ Next.js අතර ප්‍රධාන වෙනස තමයි Rendering ක්‍රමවේදය. සාමාන්‍ය React app එකක් (Create React App වැනි මෙවලමකින් සෑදූ) client-side render (CSR) වෙනවා. ඒ කියන්නේ, browser එකට එන්නේ හිස් HTML පිටුවක් සහ JavaScript ගොඩක්. Browser එක තමයි ඒ JavaScript run කරලා සම්පූර්ණ පිටුව හදාගන්නේ. මේකේ අවාසි දෙකක් තියෙනවා:

  1. මන්දගාමී ආරම්භක පැටවීම (Slow Initial Load): JavaScriptไฟล์ ටික download වෙලා run වෙනකම් userට පේන්නේ හිස් පිටුවක්. මේක user experience එකට හොඳ නෑ.
  2. SEO (Search Engine Optimization) ගැටලු: Google වගේ search engine වලට JavaScript run කරන්න පුළුවන් උනත්, CSR app එකක content එක index කරන එක server-side render කරපු app එකකට වඩා අමාරුයි.

Next.js මේ ගැටලු දෙකටම විසඳුම් ලබා දෙනවා. ඒ තමයි Server-Side Rendering (SSR) සහ Static Site Generation (SSG).

Next.js හි ප්‍රධාන විශේෂාංග (Key Features)

  • Server-Side Rendering (SSR): User කෙනෙක් page එකක් request කරාම, ඒ page එක server එකේදී render (HTML එකක් විදියට හදලා) කරලා browser එකට එවනු ලබනවා. මේ නිසා userට ක්ෂණිකව content එක බලාගන්න පුළුවන්. ඒ වගේම SEO වලටත් මේක ඉතාමත් වාසිදායකයි.
  • Static Site Generation (SSG): App එක build කරන වෙලාවෙම (build time) pages ටික HTML files විදියට generate කරලා තියාගන්නවා. Request එකක් ආවම, කලින් හදපු HTML file එක කෙලින්ම userට දෙනවා. මේක ඉතාමත් වේගවත්. Blog posts, documentation sites වගේ නිතර වෙනස් නොවන content තියෙන තැන් වලට මේක සුදුසුයි.
  • Incremental Static Regeneration (ISR): SSG වල බලය SSR වල නම්‍යශීලීත්වය (flexibility) එක්ක එකතු කරන ක්‍රමයක්. Build time එකේදී page එක generate කරලා, නිශ්චිත කාලයකට පස්සේ (උදා: තත්පර 60කට සැරයක්) background එකෙන් ඒ page එක re-generate කරනවා. මේ නිසා content එක යාවත්කාලීන උනත් userට පරණ content එක පේන්නේ නැතුව, යාවත්කාලීන content එක ලැබෙනවා.
  • File-based Routing: Routing හසුරුවන්න වෙනම library එකක් අවශ්‍ය නෑ. `pages` කියන directory එකේ file එකක් හදන විදියටම route එක හැදෙනවා. උදාහරණයක් විදියට, `pages/about.js` හැදුවොත්, `yourdomain.com/about` කියන route එක auto හැදෙනවා. මේක හරිම පහසුයි.
  • API Routes: Next.js app එක ඇතුලෙම backend API එකක් හදන්න පුළුවන්. `pages/api` directory එකේ හදන files, API endpoints විදියට වැඩ කරනවා. මේ නිසා database එකකට connect වෙන්න, form data handle කරන්න වගේ දේවල් වලට වෙනම backend server එකක් ඕන වෙන්නේ නෑ. සම්පූර්ණ full-stack application එකක් Next.js වලින්ම හදන්න පුළුවන්.
  • Image Optimization: `next/image` component එක මගින් පින්තූර ස්වයංක්‍රීයව optimize කරනවා. WebP වගේ නවීන format වලට convert කිරීම, විවිධ screen sizes වලට 맞게 රූප ප්‍රමාණය වෙනස් කිරීම වගේ දේවල් auto වෙන නිසා, වෙබ් අඩවියේ වේගය වැඩි වෙනවා.

මේ සියලුම හේතු නිසා, Next.js කියන්නේ React developers ලා අතර ඉතාමත් ජනප්‍රිය තේරීමක් වෙලා තියෙනවා. සාමාන්‍ය React app එකකට වඩා performance, SEO, සහ developer experience අතින් Next.js ගොඩක් ඉහලින් ඉන්නවා. මෙම පාඨමාලාව අවසානයේදී, ඔබටත් මෙම ප්‍රබල framework එක භාවිතා කරමින් ඕනෑම ආකාරයක නවීන වෙබ් යෙදුමක් නිර්මාණය කිරීමේ හැකියාව සහ විශ්වාසය ලැබෙනු ඇත.

පාඨමාලා ඒකක (Course Modules)

Module 01

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

Next.js යනු කුමක්ද සහ එය React වලට වඩා වාසිදායක ඇයි? SSR, SSG, ISR වැනි මූලික සංකල්ප සහ project එකක් ආරම්භ කරන ආකාරය.

කියවන්න
Module 02

Pages සහ Routing

File-based routing, nested routes, dynamic routes (`[id].js`) සහ Link component එක භාවිතයෙන් client-side navigation කරන හැටි.

කියවන්න
Module 03

Components සහ Styling

නැවත භාවිතා කළ හැකි components නිර්මාණය. CSS Modules, Global CSS සහ Tailwind CSS සමග Next.js භාවිතය.

කියවන්න
Module 04

Data Fetching මූලික කරුණු

`getStaticProps` (SSG) සහ `getServerSideProps` (SSR) භාවිතයෙන් බාහිර API වලින් දත්ත ලබාගන්නා ආකාරය.

කියවන්න
Module 05

Dynamic Data සහ Paths

Dynamic routes සඳහා `getStaticPaths` භාවිතය. Dynamic pages pre-render කිරීම සහ ISR (Incremental Static Regeneration) සංකල්පය.

කියවන්න
Module 06

API Routes

Next.js තුළම backend API නිර්මාණය. GET, POST, PUT, DELETE requests හැසිරවීම සහ database සම්බන්ධ කිරීම.

කියවන්න
Module 07

Authentication

NextAuth.js වැනි library භාවිතා කර පරිශීලක සත්‍යාපනය (Authentication). Pages සහ API routes ආරක්ෂා කිරීම.

කියවන්න
Module 08

State Management

React Context API භාවිතයෙන් global state කළමනාකරණය. Props drilling ගැටලුවට විසඳුම් සහ Redux Toolkit (විකල්ප).

කියවන්න
Module 09

Deployment සහ Optimization

`next/image` සහ `next/head` මගින් app එක optimize කිරීම. Vercel සහ Netlify වෙත deploy කරන ආකාරය.

කියවන්න
Module 10

අවසාන ව්‍යාපෘතිය

සම්පූර්ණ Full-Stack Blog යෙදුමක් නිර්මාණය. Authentication, CRUD API, Database, Tailwind CSS ඇතුළත්ව.

අවසාන අභියෝගය