Next.js Static Site Generation (SSG) with getStaticProps: Sinhala Tutorial | Next.js SSG SC Guide

Next.js Static Site Generation (SSG) with getStaticProps SC Guide

ආයුබෝවන් යාළුවනේ! අද අපි කතා කරන්න යන්නේ Next.js Framework එකේ තියෙන හරිම වැදගත් සහ ප්‍රයෝජනවත් සංකල්පයක් ගැන – ඒ තමයි Static Site Generation (SSG). විශේෂයෙන්ම, මේකට අපි පාවිච්චි කරන getStaticProps කියන function එක ගැන අපි විස්තරාත්මකව බලමු. ඔයාලට දැනටමත් Next.js ගැන පොඩි අදහසක් තියෙනවා නම්, මේක තවත් පහසු වෙයි. නැතත්, ගැටළුවක් නෑ! අපි මුල සිටම පටන් ගමු.

වෙබ් අඩවි හදනකොට, Performance සහ SEO (Search Engine Optimization) කියන දේවල් හරිම වැදගත්. Next.js වගේ React Framework එකකින් මේ දේවල් හරි ලේසියෙන් කරගන්න පුළුවන්. ඒකට තියෙන ප්‍රධානම ක්‍රමයක් තමයි මේ Static Site Generation (SSG) කියන්නේ.

අද මේ ලිපියෙන් අපි සාකච්ඡා කරන දේවල්:

• Static Site Generation (SSG) කියන්නේ මොකක්ද? (build time එකේදී pre-rendering කරන හැටි)
• getStaticProps කියන්නේ මොකක්ද? මේක කවදද පාවිච්චි කරන්නේ? කොහොමද වැඩ කරන්නේ?
• getStaticProps පාවිච්චි කරලා data fetch කරලා page එකකට render කරන හැටි. (ප්‍රායෝගික උදාහරණයක්)
• troubleshooting tips සහ best practices.

එහෙනම්, අපි පටන් ගමු!

1. Static Site Generation (SSG) යනු කුමක්ද?

සරලවම කියනවා නම්, Static Site Generation (SSG) කියන්නේ අපේ වෙබ් අඩවියේ pages ටික build කරන වෙලාවේදී (build time) සම්පූර්ණයෙන්ම HTML files විදිහට හදන ක්‍රමවේදයක්. සාමාන්‍යයෙන් වෙබ් page එකක් user කෙනෙක් request කරනකොට server එකෙන් dynamic විදිහට හදලා (Server-Side Rendering - SSR) නැත්නම් browser එකේදී JavaScript වලින් හදලා (Client-Side Rendering - CSR) render කරනවා. හැබැයි, SSG වලදී, page එක කලින්ම හදලා තියෙන නිසා, user request එකක් ආපු ගමන්, සකස් කරපු HTML file එක serve කරන්න පුළුවන්. හිතන්නකෝ, අපේ ගෙදරට කෙනෙක් එන්න කලින් කෑම හදලා, මේසෙට ගෙනත් තියෙනවා වගේ වැඩක්!

SSG වල වාසි මොනවාද?

• ඉහළ Performance: pages කලින්ම හැදලා තියෙන නිසා, user කෙනෙක් ඉල්ලුවම server එකට අලුතින් page එකක් හදන්න වෙලාවක් යන්නේ නෑ. HTML file එක කෙලින්ම serve කරන්න පුළුවන්. මේකෙන් loading time එක ගොඩක් අඩු වෙනවා.උදා: Blog posts, documentation, marketing pages.
• හොඳ SEO: Search engines (ගූගල් වගේ) අපේ page එකට ආවම, සම්පූර්ණ HTML content එකම ඒ අයට ගන්න පුළුවන්. JavaScript render වෙනකන් ඉන්න ඕනේ නෑ. මේකෙන් search engine rankings වැඩි කරගන්න පුලුවන්.
• අඩු Server Load: page එකක් request කරන හැම වෙලාවකම server එකට code execute කරන්න අවශ්‍ය වෙන්නේ නෑ. ඒ නිසා server එකට එන load එක අඩු වෙනවා. මේක traffic ගොඩක් තියෙන websites වලට හරිම ප්‍රයෝජනවත්.
• වැඩි Security: server-side එකේ runtime එකක් නැති නිසා, server-side attacks වලට තියෙන අවස්ථා අඩුයි.
• CDN හරහා Scalability: හැදූ HTML files Content Delivery Network (CDN) එකක cache කරන්න පුළුවන්. මේකෙන් users ලා කොහේ හිටියත්, ඒ අයට ලඟම තියෙන server එකෙන් content එක ලැබෙනවා.

2. getStaticProps විස්තරාත්මකව

getStaticProps කියන්නේ Next.js වල තියෙන asynchronous function එකක්. මේක අපිට පුලුවන් අපේ Next.js page එකක component එකක් export කරනවා වගේම export කරන්න. මේ function එකේ ප්‍රධානම විශේෂත්වය තමයි, මේක build time එකේදී, server-side එකේ විතරක් execute වෙන එක. client-side එකේදී කවදාවත් execute වෙන්නේ නෑ. ඒ කියන්නේ, user කෙනෙක් අපේ වෙබ් අඩවියට ආවට පස්සේ, මේ function එක නැවත run වෙන්නේ නෑ.

getStaticProps කවදාද පාවිච්චි කරන්නේ?

getStaticProps භාවිතා කරන්න පුළුවන් හොඳම අවස්ථා:

• Data ඒ තරම් නිතර වෙනස් නොවන විට: Blog posts, products, documentation, portfolios වගේ දේවල් වලට මේක හරිම ගැළපෙනවා. මේවා නිතර update වෙන්නේ නෑනේ.
• Data publicly available නම්: User-specific නොවන (ඒ කියන්නේ හැමෝටම එකම දත්ත පෙන්වන) data වලට.
• SEO ඉතා වැදගත් නම්: Search engines වලට අවශ්‍ය සියලු දත්ත HTML content එකේම තියෙන නිසා ranking වැඩි කරගන්න පුළුවන්.

getStaticProps කොහොමද වැඩ කරන්නේ?

ඔයාලා Next.js project එක build කරනකොට (npm run build හෝ yarn build) Next.js විසින් getStaticProps function එක තියෙන හැම page එකක්ම හඳුනාගෙන, ඒ function එක execute කරනවා. මේ function එකෙන් return කරන object එකේ props කියන key එකට අදාළ data එක අපි අපේ page component එකට props විදිහට ලබා දෙනවා. ඊට පස්සේ Next.js ඒ data පාවිච්චි කරලා, page එක pre-render කරලා HTML file එකක් විදිහට export කරනවා.

// pages/index.js (උදාහරණයක්)

export async function getStaticProps() {
  // මෙතන තමයි data fetch කරන්නේ
  // මේ code එක run වෙන්නේ server එකේ build කරන වෙලාවේදී විතරයි

  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // return කරන object එකේ props කියන key එකට data එක දෙන්න ඕනෙ
  return {
    props: {
      posts, // page component එකට posts කියන prop එක යනවා
    },
  };
}

function HomePage({ posts }) {
  // මෙතනදී posts කියන data එක component එකට ලැබිලා තියෙන්නේ
  return (
    <div>
      <h1>අපේ Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

මේ code එක හොඳට බැලුවොත් තේරෙයි, getStaticProps කියන function එක page component එකට උඩින් export කරලා තියෙනවා. මේක හැම විටම async විය යුතුයි.

3. ප්‍රායෝගික උදාහරණයක්: getStaticProps භාවිතා කර Data Fetch කර Page එකක Render කිරීම

දැන් අපි බලමු getStaticProps පාවිච්චි කරලා API එකකින් data fetch කරලා අපේ Next.js page එකක render කරන්නේ කොහොමද කියලා. මේකට අපි JSONPlaceholder කියන fake online REST API එක පාවිච්චි කරමු. මේක demo කරන්න හරිම පහසුයි.

මුලින්ම, අලුත් Next.js project එකක් හදාගමු (නැත්නම් දැනට තියෙන එකක් පාවිච්චි කරන්න පුළුවන්):

npx create-next-app my-ssg-app
cd my-ssg-app
npm run dev

දැන් pages folder එක ඇතුලට ගිහින් අලුත් file එකක් හදමු: pages/posts.js කියලා.

3.1. දත්ත ලබා ගැනීම (Fetching Data)

pages/posts.js file එක ඇතුලට පහත code එක එකතු කරන්න:

// pages/posts.js

import React from 'react';

// මේක තමයි අපේ Page Component එක
function Posts({ posts }) {
  return (
    <div style={{ padding: '20px' }}>
      <h1>අපේ Latest Posts</h1>
      <p>මේ posts ටික build කරන වෙලාවේදී fetch කරපු data.</p>
      <ul>
        {posts.map(post => (
          <li key={post.id} style={{ marginBottom: '15px', border: '1px solid #eee', padding: '10px', borderRadius: '5px' }}>
            <h3 style={{ margin: '0 0 5px 0', color: '#333' }}>{post.title}</h3>
            <p style={{ margin: '0', color: '#666' }}>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

// getStaticProps function එක
// මේක run වෙන්නේ build කරන වෙලාවේදී server side එකේ විතරයි
export async function getStaticProps() {
  console.log('getStaticProps is running on the server at build time!');
  
  // API එකකින් data fetch කරනවා
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
  const posts = await res.json();

  // return කරන object එකේ props කියන key එකට data එක දෙනවා
  return {
    props: {
      posts, // මේ posts array එක page component එකට prop එකක් විදිහට යනවා
    },
  };
}

export default Posts;

3.2. දත්ත Page එකේ පෙන්වීම (Rendering Data on the Page)

උඩ තියෙන code එකේදී ඔයාලට පේනවා ඇති, getStaticProps function එකෙන් posts කියන array එක props විදිහට return කරනවා. Posts කියන page component එක posts කියන prop එක destructure කරලා ගන්නවා. ඊට පස්සේ JSX එක ඇතුලේ map function එක පාවිච්චි කරලා හැම post එකක්ම list item එකක් විදිහට render කරනවා.

දැන් ඔයාලගේ project එක build කරලා බලමු. terminal එකේ මේ command එක දෙන්න:

npm run build

මේ command එක execute කරනකොට console එකේ 'getStaticProps is running on the server at build time!' කියලා message එකක් පෙන්වයි. ඒ කියන්නේ අපේ getStaticProps function එක build time එකේදී run වුණා කියන එක. ඊට පස්සේ, build එක ඉවර වුණාම start කරන්න:

npm run start

දැන් browser එකේ http://localhost:3000/posts කියන URL එකට ගිහින් බලන්න. ඔයාලට posts ටික render වෙලා පෙනෙයි! මේ page එක සම්පූර්ණයෙන්ම HTML විදිහට pre-rendered වෙලා තියෙන්නේ.

4. වැදගත් කරුණු සහ ගැටළු විසඳීම (Important Considerations & Troubleshooting)

revalidate option එක (Incremental Static Regeneration - ISR)

getStaticProps වලින් හැදෙන pages සාමාන්‍යයෙන් build එකක් කරනකම් update වෙන්නේ නෑ. හැබැයි, අපිට data පොඩ්ඩක් වෙනස් වෙන pages වලටත් SSG වල වාසි ගන්න පුළුවන්. ඒකට තමයි revalidate කියන option එක තියෙන්නේ. මේක getStaticProps එකේ return කරන object එකට එකතු කරන්න පුළුවන්:

export async function getStaticProps() {
  // ... data fetch ...
  return {
    props: {
      posts,
    },
    revalidate: 60, // සෑම තත්පර 60කට වරක් page එක re-generate කරන්න
  };
}

මේකෙන් වෙන්නේ, user request එකක් ආවම, page එක cache එකෙන් serve කරන ගමන්, background එකේදී අලුත් data තියෙනවද කියලා බලලා, cache එක update කරන එක. මේක Incremental Static Regeneration (ISR) කියලා හඳුන්වනවා.

ගැටළු විසඳීම (Troubleshooting)

• Build Errors: npm run build කරනකොට error එනවා නම්, terminal එකේ logs හොඳට බලන්න. ගොඩක් වෙලාවට network errors, API endpoint එකේ වැරදි, නැත්නම් code එකේ syntax errors වෙන්න පුළුවන්.
• Console Logs: getStaticProps එක ඇතුලේ console.log() පාවිච්චි කරන්න පුළුවන් debugging කරන්න. මේ logs පෙන්වන්නේ build කරන වෙලාවේ terminal එකේ මිසක් browser console එකේ නෙවෙයි.
• Incorrect Data Paths: API එකෙන් එන data structure එකට හරියටම ගැලපෙන්න props වලට data access කරනවාද කියලා බලන්න.

5. හොඳම පුරුදු සහ පොදු වැරදි (Best Practices & Common Pitfalls)

• නිතර වෙනස් නොවන දත්ත සඳහා පමණක් භාවිතා කරන්න: real-time chat messages, user-specific dashboards වගේ නිතර update වෙන data වලට getStaticProps පාවිච්චි කරන්න එපා. ඒ වගේ දේවල් වලට Client-Side Rendering (CSR) හෝ Server-Side Rendering (SSR) වඩා හොඳයි.
• getStaticProps client-side එකේ execute වෙන්නේ නෑ: මේක මතක තියාගන්න. ඒ නිසා browser-specific API (window, document වගේ) මේ function එක ඇතුලේ පාවිච්චි කරන්න බෑ.
• getStaticProps async විය යුතුයි: හැම විටම async function එකක් විදිහට define කරන්න. මේක required එකක්.
• ලොකු data set එකක් නම් අවධානය යොමු කරන්න: ගොඩක් විශාල data set එකක් fetch කරනවා නම් build time එක වැඩි වෙන්න පුළුවන්. pagination, infinite scrolling වගේ techniques පාවිච්චි කරන්න පුළුවන්.
• හැම විටම props key එක return කරන්න: getStaticProps return කරන object එකේ props කියන key එක අනිවාර්යයෙන්ම තිබිය යුතුයි.

නිගමනය

ඉතින් යාළුවනේ, අපි Next.js වල තියෙන Static Site Generation (SSG) සහ ඒකට පාවිච්චි කරන getStaticProps function එක ගැන සම්පූර්ණයෙන් ඉගෙන ගත්තා. මේ feature එක performance, SEO සහ scalability අතින් විශාල වාසි ලබා දෙනවා. Blog posts, product catalogs (නිතර වෙනස් නොවන), documentation වගේ websites හදනකොට getStaticProps කියන්නේ ඔයාලට තියෙන හොඳම tool එකක්.

Next.js මේ වගේ pre-rendering options ලබා දීම නිසා, අපිට web applications හදනකොට අපේ අවශ්‍යතාවයට අනුව හොඳම rendering strategy එක තෝරාගන්න පුළුවන්. මේකෙන් developers ලට වගේම users ලටත් ලොකු පහසුවක් සැලසෙනවා.

ඔයාලත් අදම මේක Try කරලා බලන්න. ඔයාලගේ Next.js project එකක getStaticProps පාවිච්චි කරලා static content එකක් render කරන්න. මොනවා හරි ප්‍රශ්න තියෙනවා නම්, comment section එකේ අහන්න පසුබට වෙන්න එපා. අපි උදව් කරන්න සූදානම්! එහෙනම් තවත් අලුත් tech topic එකකින් හමුවෙමු!