By Thisara Priyamal — 23 Oct 2025

Next.js Vercel Deploy | පහසුම ක්‍රමය | Sinhala Guide

හැඳින්වීම (Introduction)

ඉතින් කොහොමද යාළුවනේ! අද කාලේ web development කියන්නේ හරිම වේගවත් ලෝකයක්. අලුත් frameworks, tools හැමදාම වගේ එනවා. මේ අතරින් Next.js කියන්නේ React වලට එහා ගියපු, production-ready applications හදන්න පුළුවන් බලගතු framework එකක්. මේකේ Server-Side Rendering (SSR), Static Site Generation (SSG) වගේ විශේෂාංග නිසා, හොඳ performance එකක් සහ SEO optimisation එකක් එක්ක web applications හදන්න පුළුවන්.

හැබැයි, project එකක් develop කරාට විතරක් මදි නේ? ඒක live කරන්නත් ඕනේ. ඔන්න ඔතනදී තමයි Vercel කියන platform එක අපිට ගොඩක් උදව් වෙන්නේ. ඇත්තටම Next.js හදල තියෙන්නෙත් Vercel කණ්ඩායමම තමයි. ඒ නිසා Next.js project deploy කරන්න Vercel තරම් පහසු, කාර්යක්ෂම තැනක් තවත් නැති තරම්.

මේ Sinhala Guide එකෙන් අපි බලමු:

Vercel කියන්නේ මොකක්ද සහ ඒකේ තියෙන වාසි මොනවද කියලා.
ඔයාගේ Next.js project එක Git (GitHub/GitLab/Bitbucket) හරහා Vercel වලට deploy කරන්නේ කොහොමද කියලා.
Environment Variables නිවැරදිව Configure කරන්නේ කොහොමද කියලා.
Deployment failures ආවොත් troubleshooting කරන්නේ කොහොමද කියලා.
Continuous Deployment (CD), Preview Deployments සහ Vercel Analytics වගේ best practices ගැන.

මේ tutorial එක අවසාන වෙද්දී ඔයාට පුළුවන් වෙයි ඔයාගේ Next.js applications කිසිම කරදරයක් නැතුව Vercel වලට deploy කරන්න!

1. Vercel කියන්නේ මොකක්ද? (What is Vercel?)

Vercel කියන්නේ frontend frameworks (Next.js, React, Vue, Svelte) සහ static sites deploy කරන්න පුළුවන් cloud platform එකක්. මේකේ තියෙන ප්‍රධානම වාසිය තමයි speed එක සහ simplicity එක.

Vercel වල ප්‍රධාන වාසි:

Next.js Optimisation: Vercel කියන්නේ Next.js වල creator කණ්ඩායමේම platform එකක් නිසා, Next.js projects වලට උපරිම optimisation එකක් ලැබෙනවා.
Automatic Deployments: ඔයාගේ Git repository එකට code push කරපු ගමන්, Vercel එකෙන් project එක build කරලා deploy කරනවා. මේක Continuous Integration/Continuous Deployment (CI/CD) වලට කදිම විසඳුමක්.
Serverless Functions: Backend code ලියන්නත් Vercel Platform එකේදී පුළුවන්. මේවා Vercel Edge Network එකේ deploy වෙනවා, ඒ නිසා performance එකත් හොඳයි.
Global Edge Network: ඔයාගේ application එක ලෝකේ පුරාම තියෙන Vercel servers වල cache වෙනවා. ඒ නිසා users ලා ඉන්න තැන අනුව application එකේ loading speed එක වැඩි වෙනවා.
Free Tier: කුඩා project, personal project හෝ test කරන්න Free tier එකක් තියෙනවා, ඒක ගොඩක් ප්‍රයෝජනවත්.

සරලවම කිව්වොත්, Vercel කියන්නේ ඔයාගේ frontend project එක live කරන්න තියෙන වේගවත්ම, පහසුම සහ smartest platform එකක්.

2. ඔයාගේ Next.js Project එක Vercel වලට Deploy කරමු! (Let's Deploy Your Next.js Project to Vercel!)

හරි, දැන් අපි බලමු ප්‍රායෝගිකව project එකක් Vercel වලට deploy කරන්නේ කොහොමද කියලා. මේක හිතනවට වඩා ගොඩක් පහසුයි!

2.1. පූර්ව අවශ්‍යතා (Prerequisites)

deploy කරන්න කලින් අපිට මේ දේවල් ටික ඕනේ වෙනවා:

Next.js Project එකක්: ඔයාට deploy කරන්න Next.js project එකක් තියෙන්න ඕනේ. (අලුත් project එකක් නැත්නම් npx create-next-app@latest my-vercel-app කියලා හදලා ගන්න පුළුවන්).
Git Repository එකක්: ඔයාගේ project එක GitHub, GitLab, නැත්නම් Bitbucket වගේ Git hosting platform එකක තියෙන්න ඕනේ.
Vercel Account එකක්: vercel.com එකට ගිහින් නොමිලේ account එකක් හදාගන්න. Git provider එකක් (GitHub වගේ) හරහා sign up වෙන එක ගොඩක් පහසුයි.

2.2. Vercel එකට Log In වීම (Logging into Vercel)

පළමුවෙන් vercel.com වලට ගිහින් Log In වෙන්න. ඔයාට GitHub, GitLab, Bitbucket, නැත්නම් Email හරහා Log In වෙන්න පුළුවන්. Git provider එකක් හරහා යන එක තමයි deploy කරන වැඩේ පහසු කරන්නේ. ඒ නිසා මම suggest කරන්නේ GitHub වලින් Log In වෙන්න කියලා.

2.3. Project එක Import කිරීම (Importing Your Project)

Dashboard එකේ ඉහළ දකුණු කෙළවරේ තියෙන "Add New..." button එක Click කරලා "Project" කියන එක තෝරන්න.

ඊට පස්සේ "Import Git Repository" කියන තැනට ගිහින්, ඔයාට deploy කරන්න ඕනේ Next.js project එක තියෙන Git repository එක තෝරන්න. (ඔයා Vercel වලට Log In වුනේ GitHub වලින් නම්, ඔයාගේ GitHub repositories ඔක්කොම මෙතන list වෙනවා).

Repository එක තෝරලා "Import" Click කරාට පස්සේ, Vercel එකෙන් project settings ටික auto-detect කරනවා. Next.js project එකක් නම්, Framework Preset එක "Next.js" කියලා auto-detect වේවි. ඒක එහෙම්ම තියෙන්න දීලා, වෙන මොකුත් වෙනස් කරන්න අවශ්‍ය නම් විතරක් කරන්න. (උදාහරණයක් විදියට, ඔයාගේ project එක repository එකේ root directory එකේ නැතිනම් "Root Directory" එක වෙනස් කරන්න පුළුවන්). සාමාන්‍යයෙන් default settings ටික Next.js project එකකට හොඳටම ඇති.

2.4. Deploy කිරීම (Deployment)

අවසානයේ "Deploy" button එක Click කරන්න. එච්චරයි! Vercel එකෙන් ඔයාගේ project එක build කරන්න පටන් අරන්, තත්පර කීපයක් ඇතුළත deploy කරනවා. Deployment එක successful වුනාට පස්සේ, ඔයාට ඔයාගේ live application එකේ URL එක ලැබෙනවා. ඒක Click කරලා බලන්න, ඔයාගේ Next.js application එක live!

මේක නම් නියමයි නේද? GitHub push එකක් වගේ පහසුවෙන් ඔයාගේ project එක live කරන්න පුළුවන්.

3. Environment Variables සහ Vercel (Environment Variables and Vercel)

ඔයාගේ application එකේ API keys, database credentials වගේ sensitive data තියෙනවනම්, ඒ ටික code එක ඇතුළේ කෙලින්ම ලියන එක හොඳ පුරුද්දක් නෙවෙයි. ඒ වගේ දේවල් manage කරන්න තමයි Environment Variables පාවිච්චි කරන්නේ.

Vercel වලදී Environment Variables manage කරන එකත් ගොඩක් පහසුයි.

3.1. Vercel Dashboard එකෙන් Configure කිරීම (Configuring from Vercel Dashboard)

ඔයාගේ Vercel Dashboard එකේ, ඔයා deploy කරපු project එක තෝරන්න. ඊට පස්සේ "Settings" tab එකට ගිහින්, වම් පැත්තේ sidebar එකෙන් "Environment Variables" තෝරන්න.

මෙතනදී ඔයාට "Add New" button එක Click කරලා අලුත් environment variable එකක් එකතු කරන්න පුළුවන්. "Name" එකට variable එකේ නම (උදා: MY_API_KEY) සහ "Value" එකට ඒකේ අගය දෙන්න. ඊට අමතරව, මේ variable එක මොන Environments (Development, Preview, Production) වලටද අදාල වෙන්න ඕනේ කියලත් specify කරන්න පුළුවන්. සාමාන්‍යයෙන් Production environment එකට අවශ්‍ය variables, Production වලට විතරක් set කරන එක තමයි හොඳ.

ප්‍රායෝගික උදාහරණයක් (Practical Example):

ඔයාගේ Next.js project එකේ .env.local file එකක් තියෙනවා කියලා හිතන්න:

# .env.local
NEXT_PUBLIC_ANALYTICS_ID=UA-XXXXX-Y
DB_CONNECTION_STRING=mongodb://localhost:27017/mydb

මෙහි NEXT_PUBLIC_ prefix එකෙන් පටන් ගන්න variable එක client-side එකටත් expose වෙනවා. අනික client-side එකට expose වෙන්නේ නැහැ.

Vercel වලට deploy කරනකොට, මේ variables Vercel Dashboard එකේ Environment Variables section එකට එකතු කරන්න ඕනේ. එතකොට Next.js application එක ඇතුලෙන් මේ variables වලට process.env.NEXT_PUBLIC_ANALYTICS_ID වගේ විදියට access කරන්න පුළුවන්.

උදාහරණයක් ලෙස, Next.js API route එකක් තුළ environment variable එකක් භාවිතා කරන ආකාරය:

// pages/api/example.js

export default function handler(req, res) {
  const mySecretKey = process.env.MY_SECRET_KEY; // This variable must be set in Vercel

  if (!mySecretKey) {
    return res.status(500).json({ error: 'Secret key not configured!' });
  }

  res.status(200).json({ message: 'API called successfully!', keyUsed: mySecretKey.substring(0, 5) + '...' });
}

මේ MY_SECRET_KEY කියන එක Vercel Dashboard එකේ Environment Variables section එකේ Production environment එකට හරි අදාල environments වලට හරි එකතු කරන්න අමතක කරන්න එපා. නැත්නම් deploy කරාට පස්සේ application එකේ error එන්න පුළුවන්.

4. Build Failures සහ Troubleshooting (Build Failures and Troubleshooting)

සමහර වෙලාවට deploy කරනකොට "Build Failed" කියලා error එකක් එන්න පුළුවන්. කලබල වෙන්න එපා! මේවා සාමාන්‍ය දෙයක්. මේ වගේ වෙලාවට කොහොමද ප්‍රශ්නය හොයාගෙන solve කරගන්නේ කියලා අපි බලමු.

Build Failures වලට හේතු වෙන්න පුළුවන් දේවල්:

Missing Dependencies: package.json file එකේ තියෙන dependencies install වෙලා නැතිනම්.
Syntax Errors: ඔයාගේ code එකේ syntax errors තියෙනවනම්.
Incorrect Build Command: Vercel එකේ build command එක (උදා: next build) වැරදි නම්, නැත්නම් Next.js project එකක් නොවන project එකකට Next.js build command එක දාලා තියෙනවනම්.
Environment Variable Issues: Project එක build වෙන්න අවශ්‍ය environment variables Vercel වල set කරලා නැතිනම්.
Memory Limits: ගොඩක් ලොකු project එකක build process එකට Vercel free tier එකේ memory limit එක මදි වෙන්න පුළුවන්.

Troubleshooting කරන හැටි:

Vercel Logs බලන්න:
- Vercel Dashboard එකේ ඔයාගේ project එකට යන්න.
- "Deployments" tab එකට යන්න.
- Fail වෙච්ච deployment එක Click කරන්න.
- එතන තියෙන "Logs" section එක හොඳින් බලන්න. Build process එක අතරතුර ආපු errors ඔක්කොම මෙතන පෙන්නනවා. මේවා කියවන එක තමයි ප්‍රශ්නය හොයාගන්න හොඳම ක්‍රමය.
Locally Build කරලා බලන්න:
- Vercel වල build fail වුනා නම්, ඔයාගේ local machine එකේදී project එක build කරන්න උත්සාහ කරන්න.
- Project root directory එකට ගිහින් npm run build හෝ yarn build command එක run කරන්න.
- local build එකත් fail වෙනවා නම්, error message එකෙන් ඔයාට ප්‍රශ්නය ගැන හොඳ idea එකක් ගන්න පුළුවන්. ඒක solve කරලා code එක Git වලට push කරන්න. Vercel එකෙන් auto-redeploy කරයි.
Environment Variables Check කරන්න:
- Project එක build වෙන්න අවශ්‍ය environment variables Vercel Dashboard එකේ Settings > Environment Variables වලට නිවැරදිව එකතු කරලා තියෙනවද කියලා ආයෙත් බලන්න.
Package.json Check කරන්න:
- package.json file එකේ dependencies සහ devDependencies ඔක්කොම නිවැරදිව specify කරලා තියෙනවද කියලා බලන්න.
- scripts section එකේ "build": "next build" වගේ build command එක නිවැරදිව තියෙනවද කියලාත් බලන්න.

5. හොඳම Practices සහ අමතර විශේෂාංග (Best Practices and Additional Features)

Vercel කියන්නේ නිකන්ම deploy කරන platform එකක් විතරක් නෙවෙයි. ඒකේ තියෙන අමතර විශේෂාංග නිසා ඔයාගේ development workflow එක තවත් පහසු කරගන්න පුළුවන්.

5.1. Continuous Deployment (CD)

අපි මේ වෙනකම් කතා කරපු විදියට, ඔයාගේ Git repository එකට code push කරපු ගමන්, Vercel එකෙන් ඒක auto-deploy කරනවා. මේක තමයි Continuous Deployment. මේකෙන් වෙන්නේ:

వేగවත් Iterations: ඔයාට ඉක්මනින් code changes live කරන්න පුළුවන්.
වැඩ අඩුයි: Manual deploy කිරීම් අවශ්‍ය නැහැ.
Reliability: ඔයාගේ master branch එකට merge කරන හැම code change එකක්ම automatic live වෙන නිසා, production environment එක හැමවෙලේම updated වෙලා තියෙනවා.

5.2. Preview Deployments

මේක Vercel වල තියෙන සුපිරිම feature එකක්! ඔයා GitHub (හෝ වෙනත් Git provider එකක) Pull Request එකක් (feature branch එකකින් master branch එකට) open කරපු ගමන්, Vercel එකෙන් ඒ PR එකට අදාළ project එක deploy කරලා, ඒකට වෙනම URL එකක් දෙනවා. මේක තමයි Preview Deployment.

Code Review පහසුයි: ඔයාගේ team members ලට live URL එකට ගිහින් වෙනස්කම් බලලා review කරන්න පුළුවන්.
Quality Assurance (QA): QA team එකට production එකට යවන්න කලින් අලුත් features test කරන්න පුළුවන්.
Feedback ඉක්මන් කරනවා: වෙනස්කම් කරපු ගමන්ම live බලලා ඉක්මනින් feedback ගන්න පුළුවන්.

5.3. Vercel Analytics

ඔයාගේ Next.js application එකේ performance එකයි, user engagement එකයි ගැන දැනගන්න Vercel Analytics ගොඩක් ප්‍රයෝජනවත්. මේක Vercel Dashboard එකෙන්ම enable කරන්න පුළුවන්.

Page Views: Users ලා ඔයාගේ pages බලපු වාර ගණන.
Core Web Vitals: Loading performance (Largest Contentful Paint), interactivity (First Input Delay), සහ visual stability (Cumulative Layout Shift) වගේ වැදගත් metrics.

Project Settings වලට ගිහින් Analytics section එකේදී මේක Enable කරන්න පුළුවන්.

5.4. Custom Domains

Vercel එකෙන් ඔයාගේ project එකට auto-generated URL එකක් දෙනවා (උදා: my-next-app-xxxx.vercel.app). හැබැයි ඔයාට පුළුවන් ඔයාගේම custom domain එකක් (උදා: mywebsite.com) මේකට connect කරන්න.

මේක කරන්නත් හරිම පහසුයි:

Vercel Dashboard එකේ ඔයාගේ project එකට යන්න.
"Settings" tab එකට ගිහින් "Domains" තෝරන්න.
ඔයාගේ custom domain එක enter කරලා "Add" කරන්න.
Vercel එකෙන් ඔයාට DNS records configure කරන්න ඕනේ විදිය කියනවා. ඔයාගේ domain registrar එකේ (Dialog, LK Domain Registry වගේ) DNS settings වලට ගිහින් ඒ record ටික add කරන්න.

ටික වෙලාවකින් ඔයාගේ custom domain එක active වෙලා, ඔයාගේ Next.js application එක ඒ domain එක හරහා access කරන්න පුළුවන් වේවි. Vercel එකෙන් නොමිලේ SSL/TLS certificates (HTTPS) සපයන නිසා security ගැන හිතන්න දෙයක් නැහැ.

අවසන් වශයෙන් (Conclusion)

මේ Sinhala Guide එකෙන් ඔයාට Next.js applications Vercel වලට deploy කරන එක ගැන හොඳ අවබෝධයක් ලැබෙන්න ඇති කියලා මම හිතනවා. Vercel කියන්නේ Next.js development workflow එකට අනිවාර්යයෙන්ම අවශ්‍ය, ජීවිතේ පහසු කරන tool එකක්.

Vercel වල තියෙන automatic deployments, environment variables management, troubleshooting logs, preview deployments, සහ analytics වගේ විශේෂාංග නිසා ඔයාට production-ready applications හදලා deploy කරන එක අතිශයින්ම පහසු වෙනවා. අලුත් features ගැන හිතලා, code කරලා, live කරන එක දැන් තවත් පහසුයි!

දැන් ඔයාට පුළුවන් ධෛර්යවත්ව ඔයාගේම Next.js project එකක් Vercel වලට deploy කරලා බලන්න! මොකද, "කැපවීමෙන් කරන වැඩේ කවදාවත් වරදින්නේ නෑ!"

මේ ගැන ඔයාගේ අදහස්, ප්‍රශ්න පහළින් comment කරන්න අමතක කරන්න එපා. තවත් මේ වගේ tutorials අවශ්‍ය නම් ඒකත් කියන්න! Tech knowledge එක බෙදා හදා ගනිමු!