ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-21, Tuesday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

Payload CMS Live Preview ක්‍රමය Next.js සමඟ එක් මාර්ගයක් තුළ සම්පූර්ණව ක්‍රියාත්මක කිරීම

Payload CMS Live Preview ක්‍රමය Next.js සමඟ එක් මාර්ගයක් තුළ සම්පූර්ණව ක්‍රියාත්මක කිරීම

Payload CMS එකේ Live Preview සවි කිරීම සරල URL එකක් සකස් කිරීමක් නොව, Admin පැනලය සහ Next.js App Router අතර නව ගිවිසුමක් තනන්නෙකි. මේගොල්ලේ අරමුණ නම්, සංස්කාරකයන් “Preview” බොත්තම ඔබාම, කෑෂ් කර ඇති ප්‍රසිද්ධ වෙබ් අඩවියත් සමඟ අමුත්තන් නොදකින පරිදි, ඩ්‍රැෆ්ට් තත්ත්වය සජීවීව දැකගැනීමයි.

TechPotions කණ්ඩායම විසින් තෝරාගත් විසඳුම වන්නේ, සම්පූර්ණ අඩවිය සඳහා එකම /next/preview මාර්ගයක්, එකම රහස් කීයක් (secret) සහ එකම URL ගොඩනැගීමේ ෆංග්ශන් එකක් භාවිතා කිරීමයි. Admin පැනලයේ Preview බොත්තමට පිටු සැකසුම ගැන කිසිවක් දැනගත නොහැකිව, secret සහ slug පරාමිතීන් සමඟ එකම මාර්ගයට ඇමතුමක් කරයි. මාර්ගය තුළ රහස් කී එකක් පරීක්ෂා කර, Draft Mode සක්‍රිය කර, ඉලක්ක පිටුවට redirect කරයි. මෙය Payload CMS Preview ලේඛනයේ නිර්දේශිත රූපලාවන්‍යයකි.

Preview URL ගොඩනැගීමේ ලොජික් එකම ලයිබ්‍රරියක් තුළ සංග්‍රහ කර ඇත. getPreviewUrl ෆංග්ශන් එක සියළුම කොලෙක්ශන් config, මාර්ගය හා පිටු කොම්පෝනන්ට් එකට ආයාත කර භාවිතා කරයි. මෙයින් එකම පාරමිතියක් වෙනස් වීමෙන් 404 දෝෂ පැන නැත, නව කොලෙක්ශන් එකක් එකතු කළාම එක ලයින් කෝඩ් පමණින් Preview එක සකස් කළ හැකිය.

පිටු කොම්පෝනන්ට්‌වලදී Next.js Draft Mode පරීක්ෂා කර, Payload හි draft: true විකල්පය සමඟ API කැඳවයි. ඒ සමඟ cache අක්‍රිය කර, CDN හෝ ISR (Incremental Static Regeneration) පද්ධතිවලින් පවා නවතම ඩ්‍රැෆ්ට් අන්තර්ගතය පෙන්වයි. එම නිසා සංස්කාරකයන්ට නව ලිපියක පූර්වදර්ශනයක් වහාම බලන්න පුළුවන්, සජීවී අන්තර්ගතය කෑෂ් කර ඇති වෙබ් අඩවියට බලපෑම නොකර.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

  • ඉගෙනුම් ව්‍යාපාරිකයන් – පාඨමාලා, බ්ලොග් සහ පුවත් ලිපි සකස් කරන සිසුන්ට, නිවැරදිව Draft Mode තුළ පූර්වදර්ශනයක් ලබාගැනීමට පහසුකම ලැබේ.
  • ඩිවෙලපර්ලා – එකම preview මාර්ගයක්, රහස් කී එක, සහ එකම URL ගොඩනැගීමේ ෆංග්ශන් එක භාවිතා කිරීමෙන් කේතය සරල කර, නව කොලෙක්ශන් එකක් එකතු කිරීමේදී අතිරික්ත වැඩ අවශ්‍ය නොවේ.
  • ව්‍යාපාරිකයන් – වෙබ් අඩවියේ නව අන්තර්ගතය කෑෂ් කර ඇති පරිසරයකද, පාරිභෝගිකයින්ට පෙර නිවැරදි පූර්වදර්ශනයක් ලබාදීමෙන් අලෙවිය සහ පාරිභෝගික විශ්වාසය වැඩිවේ.

සාරාංශයෙන්, Payload CMS Live Preview සකස් කිරීමේ මෙම “එක් මාර්ගය” පදනම, ශ්‍රී ලංකාවේ වෙබ් සංවර්ධන කණ්ඩායම් සඳහා වේගවත්, ආරක්ෂිත, හා පරිපාලන‑හිතකාමී ක්‍රමයක් සපයයි. ඔබේ ව්‍යාපෘතියේ Preview ක්‍රමය අදම අත්හදා බලන්න.

💡 ඔබේ ව්‍යාපෘතියේ Preview ක්‍රමය අදම අත්හදා බලන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#Payload #Next.js #Live Preview #CMS #Web Development