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

1. Next.js යනු කුමක්ද සහ එය භාවිතා කරන්නේ ඇයි?

Next.js යනු React මත ගොඩනැගූ, full-stack web applications නිර්මාණය කිරීමට භාවිතා කරන framework එකකි. සාමාන්‍ය React app එකකදී අපට අතින් සකස් කිරීමට සිදුවන routing, data fetching, සහ server-side rendering වැනි බොහෝ දේ Next.js මගින් ඉතා පහසුවෙන් කරගත හැක.

Next.js භාවිතා කිරීමේ ප්‍රධාන වාසි:

• Server-Side Rendering (SSR): වෙබ් පිටු server එකේදී render වී client-side (browser) එකට එවන නිසා, app එක වේගවත් වන අතර SEO (Search Engine Optimization) සඳහා ඉතාමත් හිතකර වේ.
• File-based Routing: /app directory එක තුළ ඔබ සාදන folders සහ files අනුව URL routes ස්වයංක්‍රීයවම නිර්මාණය වේ.
• API Routes: කිසිදු වෙනම backend framework එකක් නොමැතිව Next.js තුළම backend API නිර්මාණය කිරීමේ හැකියාව.
• Hybrid Rendering: එකම application එක තුළ Server-Side Rendering (SSR), Static Site Generation (SSG), සහ Client-Side Rendering (CSR) යන ක්‍රම තුනම අවශ්‍යතාවය අනුව භාවිතා කිරීමේ හැකියාව.

2. Server Components සහ Client Components

Next.js 13 (App Router) සමඟ හඳුන්වා දුන් ප්‍රධානම සංකල්පයක් තමයි මේ. සරලවම කිවුවොත්:

• Server Components (Default): මේවා server එකේදී පමණක් render වේ. Database එකට connect වීම, API keys වැනි sensitive දත්ත භාවිතා කිරීම වැනි දේවල් සඳහා මේවා ඉතාම සුදුසුයි. මේවා browser එකට JavaScript කේත එවන්නේ නැති නිසා පිටුව load වීම වේගවත් වේ.
• Client Components: පරිශීලකයා සමග interact කරන (උදා: button click, form input) සහ useState, useEffect වැනි React hooks භාවිතා කරන components සඳහා "use client" යනුවෙන් component එකේ ඉහළින්ම සඳහන් කළ යුතුය.

අපගේ Notes App එකේදී, database එකෙන් notes fetch කරන component එක Server Component එකක් ලෙසත්, note එකක් add කරන form එක Client Component එකක් ලෙසත් අප භාවිතා කරනවා.

3. කුඩා යෙදුම් සඳහා SQLite හොඳ ඇයි?

SQLite යනු server-less, file-based database එකකි. MySQL හෝ PostgreSQL මෙන් වෙනම database server එකක් install කර setup කිරීමට අවශ්‍ය නැත. අපේ project එක තුළම database.db වැනි තනි file එකක සම්පූර්ණ database එකම ගබඩා වේ.

වාසි:

• Zero Configuration: කිසිදු සංකීර්ණ සැකසුමක් අවශ්‍ය නැත.
• Portability: සම්පූර්ණ database එකම තනි file එකක් නිසා project එක share කිරීම සහ deploy කිරීම පහසුය.
• Lightweight: කුඩා සහ මධ්‍යම ප්‍රමාණයේ යෙදුම් සඳහා ඉතාමත් සුදුසුයි.

4. Environment එක සකසා ගැනීම

Project එක ආරම්භ කිරීමට පෙර, ඔබේ පරිගණකයේ පහත දේවල් ස්ථාපනය කර තිබිය යුතුය.

1. Node.js: Node.js නිල වෙබ් අඩවියෙන් LTS version එක download කර install කරගන්න.
2. npm/yarn: Node.js install කරන විට npm (Node Package Manager) ඉබේම install වේ.
3. VS Code: VS Code යනු ජනප්‍රිය code editor එකකි. එය download කර install කරගන්න.

මේවා install වී ඇත්දැයි බැලීමට ඔබේ terminal (Command Prompt හෝ PowerShell) එක open කර පහත command දෙක run කර බලන්න.

Version numbers දෙකක් පෙන්වන්නේ නම්, ඔබගේ පරිසරය සූදානම්.

5. Next.js Project එකක් ආරම්භ කිරීම

දැන් අපි අපේ Notes App එක නිර්මාණය කරමු. ඔබට කැමති තැනක terminal එක open කර පහත command එක run කරන්න.

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

• Would you like to use TypeScript? Yes
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? No (අපි пізніше Bootstrap එකතු කරමු)
• 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

සෑම දෙයක්ම සම්පූර්ණ වූ පසු, notes-app නමින් folder එකක් සෑදී, Next.js project එක නිර්මාණය වනු ඇත.