1. App Router එක තේරුම් ගැනීම
Next.js හි නවතම App Router ක්‍රමය **file-based routing** මත ක්‍රියාත්මක වේ. මෙහිදී /app directory එක තුළ අප සාදන සෑම ෆෝල්ඩරයක්ම URL path segment එකක් බවට පත් වේ. එක් එක් URL path එකට අදාළ UI එක (පිටුව) පෙන්වීමට එම folder එක තුළ page.tsx නමින් file එකක් තිබිය යුතුය.
app/page.tsx→ වෙබ් අඩවියේ මුල් පිටුව (/)app/about/page.tsx→/aboutපිටුවapp/notes/page.tsx→/notesපිටුව
මෙය පැරණි /pages router එකට වඩා නම්‍යශීලී සහ බලවත් ක්‍රමයකි. ප්‍රධාන වෙනස වන්නේ App Router හිදී components default ලෙස **Server Components** වීමයි, එමගින් app එකේ performance එක වැඩි කිරීමට බෙහෙවින් උපකාරී වේ.
2. app Directory එකේ ඇති ප්‍රධාන Files
අපි project එක නිර්මාණය කළ විට app directory එක තුළ ස්වයංක්‍රීයව සෑදෙන විශේෂ files කිහිපයක් සහ ඒවායේ කාර්යභාරය පහත දැක්වේ.
➡️ app/layout.tsx
මෙය අපේ application එකේ **root layout** එකයි. වෙබ් අඩවියේ සියලුම පිටුවකටම පොදු වන HTML structure එක (<html>, <body> tags), navigation bar, footer වැනි දේවල් මෙහි අඩංගු වේ. මෙම ගොනුව අනිවාර්යයෙන්ම තිබිය යුතුය. මෙහි ඇති {children} යනු එක් එක් පිටුවට අදාළ content එකයි.
➡️ app/page.tsx
මෙය අපේ application එකේ මුල්ම පිටුවයි (homepage). එනම් / route එකට පිවිසි විට පරිශීලකයාට පෙනෙන UI එක මෙහි අඩංගු වේ.
➡️ app/globals.css
Application එක පුරාම භාවිතා වන global CSS styles (උදා: body background color, link colors) අඩංගු වන්නේ මෙම file එකේය. මෙම styles layout.tsx එකට import කිරීමෙන් සියලුම පිටුවකටම ලබා දිය හැක.
➡️ loading.tsx (Optional)
මෙය විශේෂ file එකකි. යම් පිටුවක් load වීමට කාලයක් ගතවන්නේ නම් (උදා: data fetch කරන විට), ඒ අවස්ථාවේදී පරිශීලකයාට loading spinner එකක් හෝ "Loading..." වැනි පණිවිඩයක් පෙන්වීමට මෙම file එක ස්වයංක්‍රීයවම භාවිතා වේ.
3. අපේ Project එකට අවශ්‍ය Folders සෑදීම
හොඳම පුරුද්දක් ලෙස, අදාළ දේවල් එකම තැනක තබා ගැනීමෙන් project එක පිරිසිදුව තබාගත හැක. අපේ Notes App එකේ ප්‍රධාන කොටස් දෙකක් ඇත: **Authentication** (login/signup) සහ **Notes** (CRUD). ඒ සඳහා project එකේ app folder එක තුළ පහත folders දෙක සාදන්න.
-
/app/auth/Login, Register වැනි user authentication වලට අදාළ පිටු සහ components මෙම ෆෝල්ඩරය තුළ සාදනු ලැබේ. උදාහරණයක් ලෙස,
/app/auth/login/page.tsxමගින්/auth/loginයන URL එක නිර්මාණය වේ. -
/app/notes/User කෙනෙක් login වූ පසු ඔහුට පෙනෙන ප්‍රධාන dashboard එක, එනම් notes list එක සහ notes add කරන form එක මෙම ෆෝල්ඩරය තුළ සාදනු ලැබේ.
VS Code එකේ file explorer එක භාවිතා කර app folder එක මත right-click කර "New Folder" තෝරා මෙම ෆෝල්ඩර් දෙක සාදාගන්න. දැන් ඔබේ project structure එක මෙසේ දිස්විය යුතුය:
notes-app/
└── app/
├── auth/
├── notes/
├── globals.css
├── layout.tsx
└── page.tsx
4. Global Layout (`layout.tsx`) සකස් කිරීම
අපි දැන් අපේ application එකේ මූලික layout එක සකස් කරමු. app/layout.tsx file එක open කර එහි ඇති කේතය පහත පරිදි සකස් කරන්න.
මෙහිදී අප කරන්නේ මුල් කේතයේ <body> tag එක ඇතුළත, {children} යන්න <main> tag එකකින් wrap කිරීමයි. Bootstrap භාවිතා කරන විට container class එක මගින් content එක දෙපැත්තෙන් ඉඩ තබා පිළිවෙලකට පෙන්වයි.
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'My Notes App',
description: 'A simple notes app built with Next.js and SQLite',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
{/* All pages will be rendered inside this main tag */}
<main className="container pt-4">
{children}
</main>
</body>
</html>
);
}
කේතය පැහැදිලි කිරීම:
import './globals.css': Global CSS file එක import කරයි.export const metadata: SEO සඳහා වැදගත් වන පිටුවේ title සහ description මෙහිදී define කරයි.{children}: Next.js මගින් active page එකේ content එක මෙතැනට ඇතුළත් කරයි.<main className="container pt-4">: අපි එකතු කළ කොටස.pt-4යනු Bootstrap class එකක් වන අතර, එයින් content එකට ඉහළින් padding (ඉඩක්) එකතු කරයි.