Vite පදනම් වූ SPA එකක් Next.js App Router වෙත ගෙන යන විට, ඔබට මාර්ගය වෙනස් වීමක් පමණක් නොව, ක්රියාකාරීත්වයේ මුළු ව්යුහයක්ම වෙනස් වනවා. Vite හි සෑම කෝඩ් එකක්ම බ්රවුසරයේ ක්රියාත්මක වන අතර, Next.js හි ප්රධානම කොටස Server Components ලෙස සැලකේ. මේ නිසා 'use client' නියෝගය නව සංවර්ධන ලෝකයේ අතිශය වැදගත් හා කෙලින්ම කේන්ද්රගත කරුණු එකක් බවට පත්වේ.
පැරණි Vite ව්යාපෘතියකට නවතම Next.js වලට මාරු වීමේදී, සියලු කොම්පෝනෙන්ට් සියල්ලක්ම අතින් පරීක්ෂා කර useState, useEffect හෝ window වැනි බ්රවුසර API භාවිතා කරන්නේදැයි තීරණය කිරීම කාලය ගනී. එම කාර්යය ඉතා කම්පනයකින් පිරී ඇති නිසා ViteToNext.AI වැනි මයිග්රේෂන් මෙවලම් 'use client' නියෝගය ස්වයංක්රීයව එක් කරයි. මෙය කරන්නේ, මූලික ලොජික් එකක් Next.js හි Server Component ලෙස පරිවර්තනය වීමෙන් ඇතිවන ක්රැෂ් වැළැක්වීමටය.
මෙම ස්වයංක්රීය ඇතුළත් කිරීමේ පසුබැසීමේ ලොජික් පහත පරිදි වේ:
- React Hooks: useState, useReducer, useContext ආදිය ආනයනය කළ විට එය Client Component බව සලකනු ලැබේ.
- Browser APIs: localStorage, document, window වැනි ගුණාංගයන් පෙන්වන කොඩ් එකක් Client Context එකක් අවශ්ය කරයි.
- Event Handlers: onClick, onChange, onSubmit වැනි ක්රියාකාරකම් Server Component තුළ නොපවති.
- Third‑party Libraries: Framer Motion, පැරණි MUI වැනි UI පුස්තකාලයන් Server Components සමඟ සම්පූර්ණයෙන් ගැළපෙන්නේ නැත.
ඇත්තටම, මෙවැනි ස්වයංක්රීය ඇතුළත් කිරීම කාලය බොහෝ ඉතිරි කරන නමුත් සෑම විටම නිවැරදි නොවේ. ප්රධාන ගැටලු තුනක් මෙසේ වේ:
- Leaf Component Trap – එකම බොත්තමක් අඩංගු විශාල කන්ටේනර් එක Client Component ලෙස ලේබල කරන අතර, දත්ත ලබා ගැනීමේ Server Component වශයෙන් තබා ගැනීමට අවශ්ය අවස්ථා අහිමි වේ.
- Barrel Files (index.ts) – එකක් පමණක් Client Component එකක් අන්තර්ගත index.ts එකට use client එකතු කරන්නේ සියලු එහි නිර්යාත කොම්පෝනෙන්ට් Server‑Client අතර අතිරේක බන්ඩලය ඇති කරයි.
- Shared TypeScript Interfaces – React නොවූ පූර්ණයෙන් TypeScript අතුරුමුහුර්ත හෝ උපකාරක ෆංශන් ගොනුද use client ලේබල කරනු ලබයි, ඒ නිසා bundle size එක අත්යවශ්ය නොවන පරිදි වැඩි වේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තාක්ෂණික සමාජය මේ මාරුකල ක්රමවේදයෙන් බොහෝ ප්රතිලාභ ලබයි. පළමුව, ViteToNext.AI වැනි AI‑සහයෝගී මෙවලම් භාවිතයෙන් පැරණි SPA ව්යාපෘති ඉක්මනින් Next.js වෙත මාරු කර, වෙබ් අඩවි වේගය සහ SEO ප්රතිඵල වැඩි කරගත හැක. දෙවැනිය, Server Components භාවිතයෙන් දත්ත ලබා ගැනීම සරල කර, ඩෙවලපර්ලාට API calls සෘජුයෙන් Server Component තුළ ලියන්න පුළුවන්. තෙවැනිය, bundle size අඩු කිරීමේ අවස්ථා හඳුනාගැනීම මගින් ශ්රී ලාංකීය startups හා SMEs සඳහා hosting වියදම් අඩු කර, පරිශීලක අත්දැකීම වඩාත් සුහද කරයි.
අවසන් වශයෙන්, මයිග්රේෂන් පසු “Server‑First” මනෝභාවයක් රැගෙන, data fetching logic Server Component වෙත මාරු කිරීම, “Slot” pattern භාවිතය සහ අතිරේක client‑only කොඩ් ඉවත් කිරීම මඟින් කේතය පිරිසිදු, scalable හා maintainable කරගත හැක.
ඉදිරියට, Vite හා Next.js අතර ගැලපුම් තවත් හොඳින් හඳුනාගැනීමට AI‑මූලික automation tools නවීන වෙයි. එතෙක්, නිවැරදිව පරීක්ෂා කර, අතිරේක client ලේබල ඉවත් කර, ඔබේ වෙබ් යෙදුම ඉතා හොඳින් ක්රියාත්මක වන බවට විශ්වාස කරගන්න.
