NextJS හි මූලික ක්‍රියාකාරී මූලධර්මය

පෙර පාඩම්වලදී අපි NextJS හි මූලික ව්‍යුහය සවිකර හා හඳුනාගත්තෙමු. දැන් මූලික වැඩ ආරම්භ කිරීමට කාලයයි.

NextJS හි ප්‍රධාන කොටස වන්නේ රවුටින් (Routing) ය. රවුටින් වැඩකරන්නේ මෙසේය: පරිශීලකයා බ්‍රවුසරයේ ලිපින තීරුවට යම් URL එකක් ඇතුල් කළ විට, NextJS රාමුව එම URL සමඟ ගැලපෙන නිශ්චිත ගොනුවක් බ්‍රවුසරයට ලබා දෙනු ඇත.

NextJS හි රවුටින් විශේෂ ආකාරයකට සකස් කර ඇත. එහි සාරය නම්, ඉල්ලූ සෑම URL එකකටම src/app ඇතුළත ඇති නිශ්චිත ෆෝල්ඩරයක් අනුරූප වීමයි.

මෙම අවස්ථාවේදී ෆෝල්ඩරය තුළ page.jsx යන නමින් ගොනුවක් තිබිය යුතුය. මෙම ගොනුව බ්‍රවුසරයට ලබා දෙනු ඇත. තවද මෙම ගොනුවේදී අපි JSX හි කේතය ලියන අතර, බ්‍රවුසරයට පිටුවේ සූදානම් HTML කේතය යවනු ලැබේ.

අපි උදාහරණයක් බලමු. අපට අවශ්‍ය යැයි සිතමු, URL එක /test/ ලෙස සැකසූ විට යම් පෙළක් ලබා දෙන්නට.

අදාළ ෆෝල්ඩරය සාදමු: src/app/test. මෙම ෆෝල්ඩරය තුළ අපි page.jsx ගොනුව පහත අන්තර්ගතය සමඟ සාදමු:

src/app/test/page.jsxexport default function Test() {
  return <h1>hello, user!</h1>;
}

අපගේ URL එක බ්‍රවුසරයේ විවෘත කරන්න: /test. එවිට අපි JSX ගොනුව තුළ ලියා ඇති පෙළ ඔබට දකිනු ඇත.

පෙළ වෙනස් කිරීමට උත්සාහ කර ගොනුව සුරකින්න. ඊට පසුව පෙළ ස්වයංක්‍රීයව බ්‍රවුසරයේදී වෙනස් වේ. NextJS සංවර්ධන මාදිලියේදී මෙසේ ක්‍රියා කරයි.