Next.js Pages & File-System Routing Sinhala Tutorial | SC Guide

හැඳින්වීම: Next.js වල Pages සහ Routing වල වැදගත්කම

කොහොමද යාලුවනේ! අද අපි කතා කරන්න යන්නේ නූතන Web Development ලෝකයේ ගොඩක් දෙනෙක් අතර ජනප්‍රිය වෙලා තියෙන, React Framework එකක් වෙන Next.js වල හදවත වගේ දෙයක් ගැන – ඒ තමයි Pages සහ File-System Routing. Next.js එක්ක වැඩ කරනවා නම් මේ ගැන හරියට දැනගෙන ඉන්න එක අත්‍යවශ්‍යයි. මොකද Next.js වල application එකක different pages හදන විදිය සහ ඒ pages අතර navigation කරන විදිය තීරණය වෙන්නේ මේ Concepts දෙකෙන්.

සාමාන්‍යයෙන් Web Application එකකදී අපි URL එකක් Browser එකේ ගැහුවහම ඒකට අදාළ Page එක load වෙනවා. Next.js වලදී මේ වැඩේ වෙන්නේ අපි හදපු Folder Structure එකක් සහ Files කිහිපයක් හරහා. මේක ඇත්තටම ගොඩක් පහසුයි, smartයි! අද මේ Blog Post එකෙන් අපි ගැඹුරින් බලමු Next.js වල File-System Routing කියන්නේ මොකක්ද, කොහොමද Pages හදන්නේ, ඒ අතර navigation කරන්නේ කොහොමද කියලා.

මේ Guide එක අවසාන වෙද්දී ඔයාලට පුළුවන් වෙයි Next.js Project එකක Pages සහ Routing හසුරුවන්න අවශ්‍ය මූලික දැනුම සහ ප්‍රායෝගික හැකියාව ලබා ගන්න. එහෙනම්, අපි පටන් ගමු!

1. Next.js Routing වල Theory එක: File System එකෙන් Pages හසුරුවන හැටි

Next.js වල Routing කියන්නේ ඇත්තටම සරල Concept එකක්. ඒක පදනම් වෙලා තියෙන්නේ අපේ Project එකේ තියෙන Folder Structure එක මත. Next.js Application එකකදී Pages තියෙන ප්‍රධානම Folder එක තමයි pages කියන Folder එක. මේ Folder එක ඇතුලේ අපි හදන හැම .js, .jsx, .ts, හෝ .tsx File එකක්ම Automaticව Route එකක් විදියට හැසිරෙනවා.

1.1. pages Directory එකේ බලය

ඔයාලා අලුත් Next.js Project එකක් හැදුවම ඒකේ Root එකේ pages කියලා Folder එකක් තියෙනවා දකින්න පුළුවන්. මේ Folder එක තමයි Application එකේ හැම Publicly Accessible Route එකක්ම තියෙන්නේ.

• Root Route (/): Application එකේ Home Page එක හදන්න අපි pages Folder එක ඇතුලේ index.js කියලා File එකක් හදනවා. මේක තමයි / (root) URL එකට අදාළ Page එක.
• Simple Pages: pages Folder එක ඇතුලේ අපි about.js කියලා File එකක් හැදුවොත් ඒ Page එකට Access කරන්න පුළුවන් /about කියන URL එකෙන්. ඒ වගේම contact.js හැදුවොත් /contact URL එකෙන් Access කරන්න පුළුවන්.
• Nested Routes (Folder Structure): Application එකක ගොඩක් Pages තියෙනකොට Folder Structure එකක් පාවිච්චි කරන එක ගොඩක් වැදගත්. උදාහරණයක් විදියට, pages/products/tshirts.js වගේ File එකක් හැදුවොත් ඒක /products/tshirts කියන URL එකට අදාළ වෙනවා. මේකෙන් Project එක clean විදියට maintain කරන්න පුළුවන්.

1.2. Dynamic Routes: එකම Page එකෙන් විවිධ Content පෙන්නමු!

සමහර වෙලාවට අපිට ඕන වෙනවා එකම Page Structure එකක් පාවිච්චි කරලා, URL එකේ කොටසක් වෙනස් වෙද්දී විවිධ Content පෙන්නන්න. උදාහරණයක් විදියට, Blog Post එකක් පෙන්නනකොට /blog/first-post, /blog/second-post වගේ URL තියෙන්න පුළුවන්. මේ වගේ අවස්ථාවලට අපි Dynamic Routes පාවිච්චි කරනවා.

Dynamic Route එකක් හදන්න අපි File Name එකේ Square Brackets ([]) පාවිච්චි කරනවා. උදාහරණයක් විදියට, pages/blog/[slug].js කියලා File එකක් හැදුවොත්, ඒක /blog/abc, /blog/xyz වගේ ඕනෑම URL එකකට අදාළ වෙනවා. මේ [slug] කියන එක Parameter එකක් විදියට Page එක ඇතුලට ගන්න පුළුවන්.

1.3. Pages කියන්නේ React Components!

Next.js වල Pages කියන්නේ ඇත්තටම සාමාන්‍ය React Components. ඒ කියන්නේ අපි React වලදී භාවිතා කරන JSX, Hooks, Props වගේ හැම දෙයක්ම Pages ඇතුලේ පාවිච්චි කරන්න පුළුවන්. හැබැයි මේ Pages Components වලට Next.js එකෙන් සුවිශේෂී Props සහ Functions කිහිපයක් ලබා දෙනවා, ඒවා තමයි Data Fetching වලට පාවිච්චි කරන getServerSideProps, getStaticProps වගේ Functions.

2. Practical Implementation: Pages හදමු!

දැන් අපි බලමු මේ Concepts Practical විදියට Implement කරන්නේ කොහොමද කියලා. ඔයාලා දැනට Next.js Project එකක් Set Up කරලා නැත්නම්, පහත Command එකෙන් අලුත් Project එකක් හදා ගන්න පුළුවන්:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

2.1. Simple Pages (about.js, contact.js)

මුලින්ම අපි සාමාන්‍ය Pages කිහිපයක් හදමු. ඔයාලගේ Project එකේ pages Folder එක ඇතුලට ගිහින් පහත Files දෙක හදන්න:

pages/about.js

import React from 'react';

function About() {
  return (
    <div>
      <h1>අපි ගැන</h1>
      <p>මේක අපේ About Us Page එක. අපි ගැන තොරතුරු මෙතනින් දැනගන්න පුළුවන්.</p>
    </div>
  );
}

export default About;

pages/contact.js

import React from 'react';

function Contact() {
  return (
    <div>
      <h1>අපව සම්බන්ධ කරගන්න</h1>
      <p>අපව සම්බන්ධ කරගැනීමට අවශ්‍ය නම් මෙතනින් පුළුවන්.</p>
      <p>Email: [email protected]</p>
    </div>
  );
}

export default Contact;

දැන් ඔයාලගේ Browser එකේ http://localhost:3000/about සහ http://localhost:3000/contact කියලා Type කරලා බලන්න. ඔයාලා හදපු Pages Display වෙනවා දකින්න පුළුවන්!

2.2. Nested Routes සහ Dynamic Routes (pages/blog/[slug].js)

දැන් අපි ටිකක් සංකීර්ණ Page එකක් හදමු. Blog Posts පෙන්නන්න අපි blog කියන Folder එක ඇතුලේ Dynamic Page එකක් හදමු.

මුලින්ම pages Folder එක ඇතුලේ blog කියලා අලුත් Folder එකක් හදන්න. ඊට පස්සේ ඒ blog Folder එක ඇතුලේ [slug].js කියලා File එක හදන්න.

pages/blog/[slug].js

import React from 'react';
import { useRouter } from 'next/router';

function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>{slug} කියන Blog Post එක</h1>
      <p>මේක <strong>{slug}</strong> නමින් තියෙන Blog Post එකයි. මේ Page එකේදී Dynamic URL එකෙන් එන value එක අල්ලගන්න හැටි බලන්න.</p>
      <p><a href="/blog/first-post">First Post එකට යන්න</a> | <a href="/blog/second-post">Second Post එකට යන්න</a></p>
    </div>
  );
}

export default BlogPost;

මේ Code එකේදී අපි next/router එකෙන් useRouter Hook එක පාවිච්චි කරලා, URL එකේ තියෙන slug parameter එක අල්ලගන්නවා. දැන් Browser එකේ http://localhost:3000/blog/my-first-post, http://localhost:3000/blog/awesome-article වගේ URL Type කරලා බලන්න. URL එකේ my-first-post හෝ awesome-article කියන කොටස Page එකේ slug parameter එක විදියට Display වෙනවා දකින්න පුළුවන්. නියමයි නේද?

3. Pages අතර Navigation කරමු: The <Link> Component

අපි Pages හදලා ඉවරයි. දැන් බලමු මේ Pages අතර Browser එකේ URL Type කරන්නේ නැතුව, Links හරහා Navigation කරන්නේ කොහොමද කියලා. මේකට Next.js එකෙන් සුවිශේෂී <Link> Component එකක් ලබා දෙනවා. සාමාන්‍ය HTML වල <a> tag එක පාවිච්චි කරනවට වඩා Next.js වල <Link> Component එක ගොඩක් වාසිදායකයි.

3.1. <Link> Component එකේ වාසි

<Link> Component එක Next.js වල Client-Side Navigation වලට Support කරනවා. ඒ කියන්නේ අපි <Link> එකක් Click කරද්දී, සම්පූර්ණ Page එක Reload වෙන්නේ නැතුව, අවශ්‍ය කොටස විතරක් Update වෙනවා. මේකෙන් Application එකේ Performance එක සහ User Experience එක ගොඩක් වැඩි වෙනවා. (වෙනත් Frameworks වලට වඩා Next.js වේගවත් වෙන්න එක හේතුවක් තමයි මේක).

3.2. <Link> Component එක පාවිච්චි කරන හැටි

<Link> Component එකට අනිවාර්යයෙන්ම href Prop එකක් තියෙන්න ඕනේ. මේ href එකට යන්න ඕන Page එකේ Path එක දෙනවා. අපි දැන් pages/index.js File එකට ගිහින් අපේ අලුත් Pages වලට Links add කරමු.

pages/index.js

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Home Page එක</h1>
      <p>Next.js Routing ගැන ඉගෙන ගනිමු.</p>
      <ul>
        <li>
          <Link href="/about">
            <a>අපි ගැන (About Us) Page එකට යන්න</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a>අපව සම්බන්ධ කරගන්න (Contact Us) Page එකට යන්න</a>
          </Link>
        </li>
        <li>
          <Link href="/blog/first-post">
            <a>පළවෙනි Blog Post එකට යන්න</a>
          </Link>
        </li>
        <li>
          <Link href="/blog/another-post">
            <a>තවත් Blog Post එකකට යන්න</a>
          </Link>
        </li>
      </ul>
    </div>
  );
}

export default HomePage;

Note: Next.js 13 සහ ඊට පස්සේ Versions වල <Link> Component එක ඇතුලේ <a> Tag එක අවශ්‍ය වෙන්නේ නෑ. නමුත් මේ Guide එකේදී අපි pages directory එක පාවිච්චි කරන නිසා Next.js 12 හෝ ඊට කලින් versions වල syntax එකට අනුව <a> Tag එක භාවිතා කළා. ඔයාලා Next.js 13+ වල App Router එක පාවිච්චි කරනවා නම් <a> Tag එක නැතුව <Link href="/about">About Us</Link> වගේ direct Link එක දෙන්න පුළුවන්. මේකෙන් Client-Side Navigation Auto Configure වෙනවා.

දැන් ඔයාලගේ Browser එකේ http://localhost:3000/ Home Page එකට ගිහින් මේ Links Click කරලා බලන්න. Page Reload වෙන්නේ නැතුව Links අතර ඉක්මනින් Navigation වෙනවා දකින්න පුළුවන්. වැඩේ එච්චර අමාරු නෑ, නේද?

4. Common Issues and Best Practices (නිතරම එන ගැටළු සහ හොඳම ක්‍රම)

දැන් අපි බලමු Next.js Routing වලදී නිතරම එන පොදු ගැටළු මොනවද, ඒවට විසඳුම් මොනවද, ඒ වගේම හොඳම Coding Practices මොනවද කියලා.

4.1. Troubleshooting: Link Issues

• Missing href Prop: <Link> Component එකට href Prop එක අනිවාර්යයි. මේක නැති වුනොත් Error එකක් එනවා. හැමවිටම <Link href="/your-path"> කියලා දාන්න මතක තියාගන්න.
• Incorrect Path: සමහර වෙලාවට අපි දෙන Path එක වැරදියි වෙන්න පුළුවන්. Folder Structure එක හරියට තේරුම් අරගෙන නිවැරදි Path එක දෙන්න ඕනේ. Dynamic Routes වලදී /blog/[slug] වගේ තැනක /blog/my-post වගේ නිවැරදි Parameter එකක් දෙනවා කියලා ensure කරගන්න.
• Using <a> Tag for Internal Navigation: Next.js Project එකකදී Internal Pages (එකම Application එක ඇතුලේ තියෙන Pages) වලට Navigate වෙන්න හැමවිටම <Link> Component එක පාවිච්චි කරන්න. සාමාන්‍ය <a> Tag එක පාවිච්චි කරොත් සම්පූර්ණ Page එක Reload වෙනවා, ඒකෙන් Performance එකට බලපෑමක් වෙනවා. External Links (වෙනත් Website වලට යන Links) වලට <a> Tag එක පාවිච්චි කරන්න පුළුවන්.

4.2. Best Practices

• Always Use <Link> for Internal Navigation: මේක Next.js වල Performance Advantage එක ගන්න අත්‍යවශ්‍යයි.
• Organize Pages with Folders: Application එකේ Pages ගොඩක් තියෙනවා නම්, ඒවා Topic එක අනුව Folders වලට දාලා Organize කරන්න. මේකෙන් Codebase එක Clean වෙනවා, Maintain කරන්න පහසු වෙනවා. (උදා: pages/admin/users.js, pages/admin/products.js)
• Programmatic Navigation with useRouter: සමහර වෙලාවට Button Click එකක් වගේ Event එකකින් පස්සේ Code එක ඇතුලෙන් Navigate කරන්න අවශ්‍ය වෙන්න පුළුවන්. ඒ වගේ වෙලාවට useRouter Hook එකේ තියෙන router.push() Method එක පාවිච්චි කරන්න පුළුවන්.

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    // Navigate to the about page
    router.push('/about');
  };

  return (
    <button onClick={handleClick}>About Page එකට යන්න</button>
  );
}

export default MyComponent;

නිගමනය: Next.js Routing වල Master වෙමු!

ඉතින් යාලුවනේ, මේ Blog Post එකෙන් අපි Next.js වල Pages සහ File-System Routing ගැන ගැඹුරින් ඉගෙන ගත්තා. අපි මුලින්ම Theory එක තේරුම් ගත්තා, pages Folder එක, index.js, Nested Routes සහ Dynamic Routes ගැන දැනගත්තා. ඊට පස්සේ Practical විදියට Pages හදලා, <Link> Component එක පාවිච්චි කරලා ඒ අතර Navigate කරන හැටිත් බැලුවා. අවසාන වශයෙන්, මේවා පාවිච්චි කරද්දී එන Common Issues සහ Best Practices මොනවද කියලත් කතා කළා.

Next.js වල Pages සහ Routing කියන්නේ ඕනෑම Next.js Developer කෙනෙක් අනිවාර්යයෙන්ම දැනගෙන ඉන්න ඕන Basic, නමුත් අතිශය වැදගත් Concept එකක්. මේක හරියට තේරුම් ගත්තා නම්, ඔයාලට පහසුවෙන් ඕනෑම Complex Next.js Application එකක Page Structure එක ගොඩනගා ගන්නත්, Pages අතර seamless Navigation එකක් සපයන්නත් පුළුවන්.

දැන් ඔයාලා මේවා ඔයාලගේ Project වල Implement කරලා බලන්න. මොකද Theory එක විතරක් නෙවෙයි, Practical Experience එක තමයි හැමවිටම වැදගත්. මේ ගැන තව මොනවා හරි දැනගන්න ඕන නම්, නැත්නම් ඔයාලට මේ සම්බන්ධයෙන් ගැටළුවක් ආවා නම්, පහත Comment Section එකේ ලියන්න. අපි උදව් කරන්න සූදානම්! එහෙනම් තවත් අලුත් දෙයක් එක්ක නැවත හමුවෙමු!