Next.js Deployment Sinhala | Netlify, Heroku, AWS Amplify | Sri Lanka Dev Guide

හෙලෝ, යාළුවනේ! කොහොමද ඉතින් ඔයාලට?

දැන් කාලේ Next.js කියන්නේ Web Development වලට ගොඩක් දෙනෙක් use කරන powerful Framework එකක් නේ. Performance, SEO, Developer Experience හැම අතින්ම Next.js ඉදිරියෙන් ඉන්නවා. Next.js ගැන කතා කරද්දි, Vercel කියන්නේ එයාලගේ official Deployment Platform එක. ගොඩක් වෙලාවට Next.js Project එකක් create කරද්දිම Vercel වලට deploy කරන්න පුළුවන් options එනවා, ඒක හරිම පහසුයි.

හැබැයි, හැම වෙලේම අපිට Vercel එකම පාවිච්චි කරන්න බෑ නේ. සමහර වෙලාවට අපිට වෙනත් platforms වලට deploy කරන්න අවශ්‍ය වෙනවා. ඒකට හේතු ගොඩක් තියෙන්න පුළුවන්: සමහරවිට ඔයාලගේ project එකට වෙනත් Cloud Provider කෙනෙක්ගේ services එක්ක integrate වෙන්න ඕනේ වෙන්න පුළුවන්, නැත්නම් cost එක අඩු කරගන්න, එහෙමත් නැත්නම් ඔයාලා දැනටමත් use කරන infrastructure එකත් එක්ක වැඩ කරන්න වෙන්න පුළුවන්.

ඉතින්, මේ Guide එකෙන් අපි බලමු Next.js App එකක් Vercel වලට අමතරව Netlify, Heroku, සහ AWS Amplify වගේ ජනප්‍රිය Platforms වලට deploy කරන්නේ කොහොමද කියලා. ඒ වගේම, මේක කරද්දි එන පොඩි පොඩි අවුල් ටිකක් (troubleshooting) කොහොමද හදාගන්නේ කියලත් අපි කතා කරමු.

මේ tutorial එක අවසානයේදී, ඔයාලට පුළුවන් වෙයි confidently Next.js App එකක් තමන්ට අවශ්‍ය ඕනෑම Platform එකකට deploy කරන්න. එහෙනම්, අපි වැඩේට බහිමු!

Next.js Deployment මූලික කරුණු සහ විකල්ප අවශ්‍ය ඇයි?

Next.js app එකක් build කරද්දි, next build command එකෙන් අපේ project එක Production ready වෙන විදිහට compile කරනවා. මේ process එකෙන් අපේ App එකේ Static HTML files, JavaScript, CSS වගේ දේවල් generate කරනවා. ඒ වගේම, Server-Side Rendering (SSR) සහ API Routes වගේ දේවල් සඳහා Serverless Functions generate කරනවා.

Next.js Deployment Modes

• Static Export: next build && next export command එකෙන් සම්පූර්ණ App එකම Static HTML files විදිහට export කරන්න පුළුවන්. මේක CDN (Content Delivery Network) එකක් හරහා serve කරන්න පුළුවන්. SSR, Incremental Static Regeneration (ISR), සහ API Routes මේ Mode එකෙන් support කරන්නේ නෑ.
• Server-Side Rendering (SSR) / API Routes: මේවාට Node.js Server Environment එකක් අවශ්‍යයි. Vercel වගේ platforms වලදී මේවා automatically Serverless Functions විදිහට deploy වෙනවා.

විකල්ප Platform භාවිතා කිරීමට හේතු

Vercel කියන්නේ Next.js වලට හොඳම option එකක් වුණාට, වෙනත් platforms use කරන්න ඕනේ වෙන අවස්ථා තියෙනවා:

• Cost Optimization: සමහර platforms වල Free Tiers හෝ pricing models, ඔයාලගේ project එකට වඩාත් ගැලපෙන්න පුළුවන්.
• Existing Infrastructure: ඔයාලා දැනටමත් AWS, GCP, හෝ Azure වගේ Cloud Providers කෙනෙක්ගේ services use කරනවා නම්, ඒකත් එක්කම Next.js deploy කරන එක පහසු වෙන්න පුළුවන්.
• Specific Features: සමහර platforms වල තියෙන unique features (උදා: Heroku Add-ons, AWS ecosystem integrations) ඔයාලගේ project එකට වැදගත් වෙන්න පුළුවන්.
• Vendor Lock-in Avoidance: එකම Vendor කෙනෙකුට බැඳී සිටීමෙන් වැලකී සිටීම.

දැන් අපි බලමු මේ ජනප්‍රිය Platforms තුනේ Next.js deploy කරන්නේ කොහොමද කියලා.

Netlify මත Next.js Deploy කරමු

Netlify කියන්නේ Build, Deploy, සහ Manage Web Projects වලට හරිම පහසු Platform එකක්. Next.js App එකක් Netlify වලට deploy කරන එක හරිම සරලයි, විශේෂයෙන්ම static exports තියෙන App එකක් නම්. Netlify වලට Next.js server-side functionality (SSR, API Routes) handle කරන්න පුළුවන් Netlify Functions හරහා.

Netlify වලට Deploy කරන්නේ කොහොමද? (පියවරෙන් පියවර)

1. Project එක GitHub/GitLab/Bitbucket වලට Push කරන්න: මුලින්ම ඔයාලගේ Next.js Project එක Git Repository එකකට දාලා, GitHub වගේ service එකකට Push කරන්න.
2. Netlify Account එකක් හදාගන්න: Netlify.com වලට ගිහින් Free Account එකක් හදාගන්න.
3. New Site එකක් Add කරන්න: Dashboard එකේ "Add new site" බොත්තම Click කරලා, "Import an existing project" තෝරන්න.
4. Git Provider එක Connect කරන්න: ඔයාලගේ GitHub/GitLab/Bitbucket Account එක Connect කරලා, deploy කරන්න අවශ්‍ය Repository එක තෝරන්න.
5. Deploy Settings Configure කරන්න: Netlify, Next.js Project එකක් හඳුනාගත්තාම Default Settings propose කරනවා. මේවා ගොඩක් වෙලාවට හරි.
   • Build Command: next build
   • Publish directory: .next (Netlify Next.js plugin එක auto detect කරන නිසා මේක වෙනස් කරන්න ඕනෙ නෑ. Static export කරනවා නම් out දෙන්න පුළුවන්.)
6. Deploy Site: "Deploy site" බොත්තම Click කරන්න. Netlify automate build process එක පටන් අරන් ඔයාලගේ App එක deploy කරයි.

SSR සහ API Routes සඳහා Netlify

ඔයාලගේ Next.js App එකේ Server-Side Rendering (SSR) හෝ API Routes තියෙනවා නම්, Netlify automatically ඒ functionality එක Netlify Functions වලට convert කරනවා. මේක කරන්නේ @netlify/plugin-nextjs කියන plugin එක හරහා. මේ plugin එක Next.js 10 සහ ඊට පසුව versions සඳහා Netlify විසින් maintain කරනවා.

මේකට ඔයාලට netlify.toml කියන file එක project එකේ root directory එකේදී create කරන්න පුළුවන්. මේ file එකේදී ඔබට build settings, redirect rules, සහ functions configuration වැනි දේවල් define කරන්න පුළුවන්.

උදාහරණයක් විදිහට, SSR සහ API Routes support කරන්න නම්, ඔයාලගේ netlify.toml file එක මේ වගේ වෙන්න පුළුවන්:

[build]
  command = "next build"
  publish = ".next"

[[plugins]]
package = "@netlify/plugin-nextjs"

මේ plugin-nextjs එක add කලාම, Netlify automatically Next.js build process එක analyze කරලා, SSR pages, API routes, සහ Image Optimization වැනි දේවල් Netlify Functions විදිහට deploy කරනවා. publish = ".next" කියන්නේ Netlify Functions වලට deploy කරන්න අවශ්‍ය output folder එක. Netlify plugin එක මේක auto detect කරන නිසා මේක configure නොකරත් සමහර වෙලාවට වැඩ කරනවා.

Netlify Troubleshooting Tips

• Build Failures: Netlify dashboard එකේ build logs බලන්න. සමහර වෙලාවට Environment Variables නැතිවීම්, package installation issues, හෝ build command errors මේවට හේතු වෙන්න පුළුවන්.
• Environment Variables: Netlify dashboard එකේ "Site Settings" > "Build & deploy" > "Environment" යටතේ ඒවා configure කරන්න.
• Page Not Found (404): netlify.toml file එකේ redirects සහ rewrites හරිද කියලා බලන්න. Static exports විතරක් deploy කරලා SSR pages load කරන්න හැදුවොත් මේක වෙන්න පුළුවන්.
• Netlify Functions issues: Functions logs බලන්න. ඒවා netlify/functions folder එකේ තියෙන්න ඕනේ, නැත්නම් Next.js plugin එක හරියට install වෙලා නැත්නම් මේ වගේ දේවල් වෙන්න පුළුවන්.

Heroku මත Next.js Deploy කරමු

Heroku කියන්නේ Platform as a Service (PaaS) එකක්. ඒකෙන් අපිට Apps build, run, සහ scale කරන්න පුළුවන්, infrastructure එක ගැන හිතන්නේ නැතුව. Next.js App එකක් Heroku වලට deploy කරන එකත් ගොඩක් දුරට සරලයි, විශේෂයෙන්ම Custom Server එකක් run කරනවා නම්.

Heroku වලට Deploy කරන්නේ කොහොමද?

1. Heroku Account එකක් සහ Heroku CLI install කරන්න: Heroku.com වලට ගිහින් account එකක් හදලා, Heroku CLI (Command Line Interface) එක install කරන්න.
2. Project එක Git Repository එකකට Push කරන්න: Netlify වගේම, ඔයාලගේ project එක Git වලට දාලා තියෙන්න ඕනේ.
3. Heroku App එකක් Create කරන්න: Terminal එකේදී, project root directory එකේදී heroku create <app-name> command එක run කරන්න. (<app-name> වෙනුවට ඔයාලට ඕනේ නමක් දෙන්න).
4. Buildpack එක Define කරන්න: Heroku Node.js buildpack එක use කරනවා. සාමාන්‍යයෙන් මේක automatically detect කරනවා, එත් manual set කරන්න heroku buildpacks:set heroku/nodejs command එක use කරන්න පුළුවන්.
5. Environment Variables: heroku config:set NODE_ENV=production වගේ command වලින් හෝ Heroku dashboard එකේදී Environment Variables set කරන්න පුළුවන්.

Deploy කරන්න:

git add .
git commit -m "Initial Heroku deployment"
git push heroku main

මේ command වලින් ඔයාලගේ code එක Heroku වලට push වෙනවා, ඒ වගේම Heroku build process එක පටන් ගන්නවා.

Procfile එකක් Add කරන්න: Project එකේ root directory එකේදී Procfile කියන file එක create කරලා, Heroku වලට app එක run කරන්න ඕනේ command එක දෙන්න. Next.js app එකක් run කරන්න මේ විදිහට දෙන්න පුළුවන්:

web: next start

next start command එකෙන් Next.js production server එක run කරනවා.

Heroku වල සීමාවන් සහ විශේෂතා

• Heroku's Free Tier එකේ Idle වෙලාවට App එක sleep වෙනවා (dyno hours). මේකෙන් initial requests වලට response time වැඩි වෙන්න පුළුවන්.
• Next.js SSR සහ API Routes සඳහා Node.js Server එකක් අවශ්‍යයි. Heroku dynos මේවාට හොඳින් support කරනවා.
• File System Read/Write operations වලට සීමාවන් තියෙනවා, dyno restarts වලදී data persist වෙන්නේ නෑ.

AWS Amplify මත Next.js Deploy කරමු

AWS Amplify කියන්නේ Amazon Web Services (AWS) වලින් එන, Full-stack Serverless Applications ඉක්මනින් Build, Deploy, සහ Host කරන්න පුළුවන් Platform එකක්. Next.js, විශේෂයෙන්ම SSR සහ Static Site Generation (SSG) වලට Amplify ගොඩක් හොඳින් support කරනවා.

AWS Amplify වලට Deploy කරන්නේ කොහොමද?

1. AWS Account එකක් හදාගන්න: මුලින්ම AWS Account එකක් තියෙන්න ඕනේ.
2. Project එක Git Repository එකකට Push කරන්න: GitHub, GitLab, Bitbucket, CodeCommit වගේ Git service එකකට ඔයාලගේ project එක Push කරන්න.
3. Amplify Console එකට යන්න: AWS Console එකට Login වෙලා, "Amplify" service එක search කරලා, "Amplify Hosting" වලට යන්න.
4. New App එකක් Host කරන්න: "Host new app" click කරලා, ඔයාලගේ Git Provider එක තෝරන්න.
5. Repository එක Connect කරන්න: ඔයාලගේ Repository එකයි, Branch එකයි තෝරලා "Next" දෙන්න.
6. Environment Variables: Build settings වලදී හෝ App Settings යටතේ "Environment variables" යටතේ මේවා add කරන්න පුළුවන්.
7. Save and Deploy: "Save and deploy" click කරන්න. Amplify code එක pull කරලා, build කරලා, deploy කරයි.

Build Settings Configure කරන්න: Amplify automatically Next.js app එක හඳුනාගන්නවා. Build settings සාමාන්‍යයෙන් මේ වගේ වෙනවා:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**

මෙතන baseDirectory: .next කියන්නේ Next.js build එකේ output එක තියෙන තැන. Amplify Next.js support කරන නිසා SSR, API Routes මේ Build Spec එකෙන් auto handle වෙනවා.

AWS Amplify වල විශේෂතා

• Amplify Hosting, Next.js SSR, SSG, සහ API Routes වලට natively support කරනවා.
• Global CDN එකක් හරහා files serve කරන නිසා High Performance එකක් තියෙනවා.
• Custom Domains, SSL/TLS, CI/CD pipelines වැනි දේවල් පහසුවෙන් configure කරන්න පුළුවන්.
• Amplify Framework එකත් එක්ක Backend services (Authentication, Database, Storage) integrate කරන්න පුළුවන්.

හොඳම පුරුදු, පොදු ගැටළු සහ විසඳුම්

Next.js App එකක් deploy කරද්දි platforms අනුව පොඩි පොඩි වෙනස්කම් තියෙනවා. මේ ටික මතක තියාගන්න එක ගොඩක් වැදගත්:

1. Environment Variables

ඔබේ Project එකේ API Keys, Database URLs, වගේ sensitive data තියෙනවා නම් ඒවා Hardcode කරන්න එපා. සෑම Deployment Platform එකකම Environment Variables set කරන්න වෙනම option එකක් තියෙනවා (Netlify, Heroku, AWS Amplify). මේවා Build Time එකේදී හෝ Runtime එකේදී access කරන්න පුළුවන්.

2. Static Exports vs. SSR/ISR

• Static Export: Next.js App එකේ getStaticProps සහ getStaticPaths විතරක් use කරනවා නම්, next build && next export command එක use කරලා Static HTML files විදිහට export කරන්න පුළුවන්. මේවා CDN එකක් හරහා serve කරන්න පුළුවන් නිසා Faster Performance සහ අඩු Cost එකක් බලාපොරොත්තු වෙන්න පුළුවන්. මේවා deploy කරන්න Netlify, AWS Amplify, හෝ ඕනෑම Static Host කෙනෙක් හොඳයි.
• SSR/ISR/API Routes: මේවාට Node.js Server Environment එකක් හෝ Serverless Functions support කරන Platform එකක් අවශ්‍යයි. Vercel, Netlify, AWS Amplify මේවාට හොඳින් support කරනවා. Heroku වලටත් පුළුවන්, නමුත් custom server configuration ටිකක් අවශ්‍ය වෙන්න පුළුවන්.

3. Build Command Optimization

Deployment Platform එකේ Build command එක නිවැරදිව set කරන්න. සාමාන්‍යයෙන් npm run build හෝ next build කියන command එක use කරනවා. Project එකේ dependency installation issues තියෙනවා නම්, npm ci හෝ yarn install --frozen-lockfile වගේ commands preBuild phase එකේදී use කරන්න පුළුවන්.

4. Image Optimization

Next.js Image Optimization feature එක use කරනවා නම්, මේක Runtime එකේදී Image files generate කරනවා. Vercel, Netlify, AWS Amplify මේකට Serverless Functions use කරනවා. මේවාට Platform එකේ Serverless Functions වලට අදාල limits සහ costs බලපානවා. සමහර වෙලාවට Cloudinary වගේ External Image Optimization Services use කරන එක හොඳ වෙන්න පුළුවන්.

5. Logging සහ Monitoring

Deploy කලාට පස්සේ App එකේ logs බලන එක ගොඩක් වැදගත්. Errors, Warnings, සහ Debugging Messages බලාගන්න මේවා වැදගත් වෙනවා. හැම Platform එකකම App Logs බලන්න dashboard එකේ options තියෙනවා.

6. Custom Domains සහ SSL

ඔබේ App එකට Custom Domain එකක් (උදා: myapp.lk) use කරනවා නම්, Platform එකේ settings වලින් Domain එක add කරලා DNS records configure කරන්න. SSL (HTTPS) certificate එකක් දාන එකත් හැම Platform එකකින්ම Free (Let's Encrypt හරහා) හෝ Paid විදිහට provide කරනවා.

අවසාන වශයෙන්...

ඉතින් යාළුවනේ, මේ Guide එකෙන් අපි Next.js Apps, Vercel වලට අමතරව Netlify, Heroku, සහ AWS Amplify වගේ ජනප්‍රිය Platforms වලට deploy කරන්නේ කොහොමද කියලා විස්තරාත්මකව කතා කලා. ඔයාලට දැන් තේරෙනවා ඇති හැම Platform එකකම තමන්ගේම වාසි සහ විශේෂිත configurations තියෙනවා කියලා.

• Netlify: සරලයි, Static Sites වලට සහ Serverless Functions වලට ගොඩක් හොඳයි. Next.js plugin එකෙන් SSR සහ API Routes පහසුවෙන් handle කරනවා.
• Heroku: PaaS එකක් විදිහට, Node.js App එකක් run කරන්න පහසුයි. Cost එක සහ dyno sleep issues ගැන සැලකිලිමත් වෙන්න ඕනේ.
• AWS Amplify: AWS Ecosystem එකත් එක්ක වැඩ කරනවා නම් ගොඩක් powerful, SSR සහ Full-stack Serverless Applications වලට හොඳින් support කරනවා.

ඔයාලගේ project එකේ requirements අනුව, මේ platforms වලින් වඩාත් ගැලපෙන එක තෝරාගන්න පුළුවන්. ප්‍රධානම දේ තමයි, Next.js කියන්නේ ඔබට අවශ්‍ය ඕනෑම තැනකට deploy කරන්න පුළුවන් Flexible Framework එකක් කියන එක.

මේවා තියරියට විතරක් අහලා හරියන්නේ නෑ, අනිවාර්යයෙන්ම Try කරලා බලන්න. ඔයාලගේ Next.js project එකක් අරගෙන Netlify වලට deploy කරලා බලන්න. එහෙම නැත්නම්, Heroku හෝ Amplify වලට deploy කරලා බලන්න. එතකොට තමා මේවායේ Practical Experience එක හරියටම ලැබෙන්නේ.

මේ Guide එක ඔයාලට ප්‍රයෝජනවත් වුණා නම්, ඔයාලගේ අදහස්, අත්දැකීම් පහළින් comment එකක් දාන්න. ඒ වගේම, මේ වගේ තවත් Tutorials බලන්න, අපිත් එක්ක එකතු වෙලා ඉන්න!

ගොඩක් ස්තූතියි!