Module 9: Deployment & Optimization

ඔබේ නිර්මාණය ලෝකය සමඟ බෙදා ගැනීමට සහ එය උපරිම කාර්යක්ෂමතාවයෙන් ක්‍රියාත්මක කිරීමට සූදානම් කරමු.

1. Optimization: ඔබේ යෙදුම වේගවත් කිරීම

Deployment කිරීමට පෙර, අපේ යෙදුම හැකි උපරිම වේගයෙන් සහ කාර්යක්ෂමතාවයෙන් ක්‍රියාත්මක වන බවට වග බලා ගැනීම ඉතා වැදගත්. Next.js මේ සඳහා අපිට built-in මෙවලම් කිහිපයක්ම සපයනවා.

Image Optimization (`next/image`)

වෙබ් අඩවියක වේගය අඩු වීමට ප්‍රධානම හේතුවක් තමයි විශාල, optimize නොකළ පින්තූර. සාමාන්‍ය HTML <img> tag එක වෙනුවට, Next.js අපිට <Image> component එක (`next/image` වලින් import කරන) ලබා දෙනවා.

`next/image` හි වාසි:
  • Automatic Resizing: විවිධ screen sizes (desktop, tablet, mobile) වලට ගැලපෙන ලෙස පින්තූර වල විවිධ ප්‍රමාණයේ versions ස්වයංක්‍රීයව නිර්මාණය කරයි.
  • Modern Formats: Browser එක සහාය දක්වන්නේ නම්, පින්තූර WebP වැනි නවීන, කුඩා file size එකක් ඇති format වලට on-the-fly convert කරයි.
  • Lazy Loading: පින්තූරය user ගේ viewport එකට (පෙනෙන තිරයට) එන තුරු load කරන්නේ නැත. මේ නිසා ආරම්භක page load time එක ඉතා වේගවත් වේ.
  • CLS (Cumulative Layout Shift) වැළැක්වීම: පින්තූරය load වීමට පෙරම ඒ සඳහා අවශ්‍ය ඉඩ වෙන් කරන නිසා, page layout එක එකපාරටම පැනීම වළක්වයි.
import Image from 'next/image';
import profilePic from '../public/me.png'; // Image must be in the public folder

export default function MyPage() {
  return (
    <div>
      <h1>About Me</h1>
      {/* Using the Image component */}
      <Image
        src={profilePic}
        alt="Picture of the author"
        width={500} // Must provide width and height
        height={500}
        // placeholder="blur" // Optional: shows a blurred version while loading
      />
    </div>
  );
}

SEO (Search Engine Optimization) `next/head` සමඟින්

Google වැනි search engines වලට ඔබේ වෙබ් අඩවිය පහසුවෙන් සොයා ගැනීමට සහ තේරුම් ගැනීමට (index කිරීමට) හැකි වන පරිදි එය සකස් කිරීම SEO ලෙස හැඳින්වේ. මේ සඳහා HTML head tag එක තුළට title, meta description, keywords වැනි දේ එකතු කිරීම අත්‍යවශ්‍යයි.

Next.js හි <Head> component එක (`next/head` වලින් import කරන) භාවිතයෙන්, ඕනෑම page component එකක් තුළ සිට head tag එකට elements එකතු කළ හැක. 

import Head from 'next/head';

export default function AboutPage() {
  return (
    <div>
      <Head>
        <title>About Us - My Awesome Website</title>
        <meta name="description" content="Learn more about our company and team." />
        <meta name="keywords" content="company, team, about us" />
      </Head>
      <h1>About Our Company</h1>
      {/* ... page content ... */}
    </div>
  );
}

එක් එක් පිටුවට අදාළ, වෙනස්ම title සහ description එකක් ලබා දීමෙන් SEO performance එක සැලකිය යුතු ලෙස වැඩි දියුණු කරගත හැක.

2. Environment Variables

API keys, database connection strings, NextAuth secret වැනි සංවේදී තොරතුරු කිසිවිටකත් ඔබේ source code එකට කෙලින්ම ඇතුළත් නොකළ යුතුයි. මේවා Environment Variables වල තැන්පත් කළ යුතුයි.

Next.js project එකක root එකේ .env.local නමින් file එකක් සාදා, එහි ඔබේ variables define කළ හැක. 

# File: .env.local

DATABASE_URL="mongodb+srv://user:password@cluster.mongodb.net/myFirstDatabase"
NEXTAUTH_SECRET="a_very_long_and_random_secret_string"
GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

# Variables prefixed with NEXT_PUBLIC_ are exposed to the browser
NEXT_PUBLIC_API_URL="https://api.example.com"

Server-side code එකේදී (උදා: `getStaticProps`, `getServerSideProps`, API routes) මේවා process.env.DATABASE_URL ලෙස access කළ හැක. Client-side code එකේදී access කිරීමට අවශ්‍ය නම්, variable එක NEXT_PUBLIC_ යන prefix එකෙන් ආරම්භ විය යුතුයි.

වැදගත්: .env.local file එක ඔබේ `.gitignore` file එකට ඇතුළත් කිරීමට වග බලා ගන්න. එවිට එය GitHub වැනි public repositories වලට upload වීම වළකියි.

3. Deployment: Vercel සහ Netlify වෙත

ඔබේ Next.js යෙදුම development කර අවසන් වූ පසු, එය ලෝකයටම පෙනෙන සේ deploy කිරීමට කාලයයි. Next.js සඳහා හොඳම hosting platforms දෙකක් තමයි Vercel සහ Netlify.

Vercel යනු Next.js නිර්මාතෘවරුන් විසින්ම පවත්වාගෙන යන platform එකයි. එම නිසා, Next.js හි සියලුම features (SSR, SSG, ISR, API Routes, Image Optimization) කිසිදු අමතර configuration එකක් නොමැතිව Vercel මත ඉතා හොඳින් ක්‍රියාත්මක වේ.

4. Hands-on: ඔබේ යෙදුම Vercel වෙත Deploy කිරීම

Vercel වෙත deploy කිරීම ඉතාමත් සරල ක්‍රියාවලියකි.

  1. GitHub Repository එකක් සෑදීම:

    ඔබේ Next.js project code එක GitHub (හෝ GitLab/Bitbucket) වෙත push කරන්න. මෙය deployment ක්‍රියාවලිය සඳහා පූර්ව අවශ්‍යතාවයකි.

  2. Vercel Account එකක් සෑදීම:

    Vercel.com වෙත ගොස්, ඔබේ GitHub account එක භාවිතයෙන්ම නොමිලේ account එකක් සාදාගන්න.

  3. New Project එකක් සෑදීම:

    Vercel dashboard එකේ, "Add New..." -> "Project" click කරන්න. ඉන්පසු, "Import Git Repository" යටතේ ඔබේ GitHub account එකෙන් අදාළ repository එක import කරන්න.

  4. Project එක Configure කිරීම:

    Vercel ස්වයංක්‍රීයවම මෙය Next.js project එකක් බව හඳුනාගනී. ඔබට කිසිදු setting එකක් වෙනස් කිරීමට අවශ්‍ය නැත. නමුත්, ඔබ .env.local file එකක් භාවිතා කළේ නම්, එහි ඇති Environment Variables ටික Vercel dashboard එකේ Project Settings -> Environment Variables යටතේ ඇතුළත් කළ යුතුයි.

  5. Deploy කිරීම:

    "Deploy" button එක click කරන්න. Vercel විසින් ඔබේ code එක pull කර, build process එක run කර (dependencies install කිරීම, `next build` run කිරීම), ඔබේ යෙදුම deploy කරනු ඇත. මෙම ක්‍රියාවලියට මිනිත්තු කිහිපයක් ගත විය හැක.

  6. සජීවීව බලමු!

    Deployment එක අවසන් වූ පසු, Vercel ඔබට `your-project-name.vercel.app` වැනි public URL එකක් ලබා දෙනු ඇත. සුභ පැතුම්! ඔබේ Next.js යෙදුම දැන් සජීවීව ක්‍රියාත්මක වේ!

    මීට අමතරව, ඔබ GitHub repository එකට කරන සෑම `git push` එකක්ම Vercel විසින් ස්වයංක්‍රීයව හඳුනාගෙන, ඔබේ යෙදුම re-deploy කරනු ඇත (Continuous Deployment).

« Module 8: State Management Module 10: Final Project »