Module 2: Pages සහ Routing

1. File-based Routing: `app` Directory එකේ බලය

සාම්ප්‍රදායික React යෙදුම් වල routing සඳහා `react-router-dom` වැනි library එකක් install කර, routes ටික code වලින් define කරන්න වෙනවා. නමුත් Next.js වලදී මේ දේ ඉතාමත් සරලයි. Next.js භාවිතා කරන්නේ file-system based routing ක්‍රමවේදයයි.

ඒ කියන්නේ, ඔබේ URL structure එක තීරණය වෙන්නේ app directory එකේ ඔබ folder සහ files හදන විදියට. ඔබට අලුත් page එකක් (route එකක්) හදන්න ඕන නම්, කරන්න තියෙන්නේ app directory එකේ අලුත් folder එකක් හදලා, ඒක ඇතුළේ page.js කියලා file එකක් හදන එක විතරයි.

උදාහරණයක් විදියට, `yourdomain.com/about` කියන route එක හදන්න ඕන නම්, ඔබ `app/about/page.js` file එක නිර්මාණය කළ යුතුයි.

// File: app/about/page.js

export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

දැන් ඔබේ browser එකේ http://localhost:3000/about වෙත ගියොත්, ඔබ දැන් හදපු "About Us" page එක බලාගන්න පුළුවන්. Routing configure කරන්න එක line එකක්වත් code ලිව්වේ නෑ නේද? ඒක තමයි Next.js වල පහසුව.

2. Nested Routes සහ Dynamic Routes

වෙබ් අඩවි වල සරල pages වගේම, සංකීර්ණ, ගතික (dynamic) routes ಕೂಡ තියෙනවා. Next.js වලින් මේ දෙකම පහසුවෙන් හසුරුවන්න පුළුවන්.

Nested Routes (කැදලි මාර්ග)

`dashboard/settings` වගේ URL එකක් හදන්න ඕන නම්, කරන්න තියෙන්නේ folder එකක් ඇතුළේ තව folder එකක් හදන එක.

URL: `/dashboard/settings`
File Structure: app/dashboard/settings/page.js

// File: app/dashboard/settings/page.js

export default function SettingsPage() {
  return <h1>Dashboard Settings</h1>;
}

Dynamic Routes (ගතික මාර්ග)

Blog post එකක්, e-commerce site එකක product එකක් වගේ දේවල් වලදී URL එකේ කොටසක් වෙනස් වෙනවා (උදා: `/blog/my-first-post`, `/products/iphone-15`). මේ වගේ routes හදන්න අපි dynamic route segments භාවිතා කරනවා.

මේ සඳහා අපි හදන folder එකේ නම square brackets `[]` ඇතුළේ දෙන්න ඕන. උදාහරණයක් විදියට, blog post එකක් සඳහා dynamic route එකක් හදමු.

URL: `/blog/[ඕනෑම දෙයක්]` (e.g., `/blog/learning-nextjs`)
File Structure: app/blog/[slug]/page.js

මෙහි [slug] කියන්නේ dynamic parameter එක. `slug` වෙනුවට ඔබට කැමති නමක් දෙන්න පුළුවන් (උදා: `[id]`, `[postName]`).

දැන් මේ dynamic segment එක (URL එකේ තියෙන `learning-nextjs` වගේ කොටස) page component එක ඇතුළේ access කරන්නේ කොහොමද? Next.js විසින් ඒ අගය අපේ component එකට `params` object එකක් හරහා ලබා දෙනවා.

// File: app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  // params object eke thiyenne me wage deyak: { slug: 'learning-nextjs' }
  const postSlug = params.slug;

  return (
    <div>
      <h1>Blog Post Title</h1>
      <p>Showing content for post: {postSlug}</p>
    </div>
  );
}

දැන් ඔබ `/blog/hello-world` වෙත ගියොත්, ඔබට "Showing content for post: hello-world" ලෙස පෙනේවි. ඔබ `/blog/another-post` වෙත ගියොත්, "Showing content for post: another-post" ලෙස පෙනේවි. එකම file එකෙන් විවිධ pages ගණනාවක් generate වෙන හැටි දැක්කා නේද?

3. Link Component සහ Client-Side Navigation

වෙබ් පිටු අතර navigate වෙන්න අපි සාමාන්‍යයෙන් HTML වල <a href="..."> tag එක භාවිතා කරනවා. Next.js වලදීත් මේක භාවිතා කරන්න පුළුවන්. නමුත්, `` tag එක click කරාම browser එක සම්පූර්ණ page එකම server එකෙන් reload කරනවා. මේක user experience එකට හොඳ නෑ.

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to my Website</h1>
      <nav>
        <Link href="/about">About Us</Link>
        <br />
        <Link href="/blog/my-first-post">Read our first blog post</Link>
      </nav>
    </div>
  );
}

මතක තබාගන්න: Next.js app එකක් ඇතුළත පිටු අතර navigate වෙන්න හැමවිටම `` tag එක වෙනුවට `` component එක භාවිතා කරන්න. බාහිර වෙබ් අඩවි වලට link කරනවා නම් විතරක් `` tag එක භාවිතා කරන්න.

1. Blog මුල් පිටුව සෑදීම:

   මුලින්ම, `app/blog/page.js` file එක සාදන්න. මෙය `yourdomain.com/blog` කියන URL එකට අදාළ පිටුව වේවි.

   // File: app/blog/page.js
   import Link from 'next/link';
   
   export default function BlogIndex() {
     return (
       <div>
         <h1>My Blog</h1>
         <ul>
           <li>
             <Link href="/blog/post-1">Post Number 1</Link>
           </li>
           <li>
             <Link href="/blog/post-2-is-awesome">The Second Awesome Post</Link>
           </li>
         </ul>
       </div>
     );
   }
   

2. Dynamic Post Page එක සෑදීම:

   දැන්, ඕනෑම blog post එකක් පෙන්වන්න පුළුවන් dynamic page එක හදමු. `app/blog/[slug]/page.js` file එක සාදන්න.

   // File: app/blog/[slug]/page.js
   import Link from 'next/link';
   
   export default function BlogPost({ params }) {
     return (
       <div>
         <h1>Displaying Blog Post: {params.slug}</h1>
         <p>This is the content for the blog post...</p>
         <Link href="/blog">Back to Blog</Link>
       </div>
     );
   }
   

3. පරීක්ෂා කිරීම:

   දැන් http://localhost:3000/blog වෙත යන්න. ඔබට link දෙකක් පෙනේවි. ඒව click කරාම page reload වෙන්නේ නැතුව dynamic post page එකට යනවා නේද? URL එකේ `post-1` සහ `post-2-is-awesome` කියන කොටස් page එකේ display වෙන හැටිත් බලන්න.