Next.js Static Export Sinhala | HTML Sites | Performance | SEO Friendly

ආයුබෝවන් හැමෝටම! 👋 අද අපි කතා කරන්න යන්නේ Next.js වල ඉතාමත් වැදගත් සහ ප්‍රායෝගික අංගයක් ගැන – ඒ තමයි Static Exporting. ඔයාලා Next.js වලින් වෙබ් අඩවි හදනවා නම්, සමහර වෙලාවට ඔයාලට dynamic server එකක් නැතුව, සම්පූර්ණයෙන්ම static HTML, CSS, JavaScript files විදියට deploy කරන්න පුළුවන් වෙබ් අඩවියක් හදන්න අවශ්‍ය වෙන්න පුළුවන්. එතකොට තමයි මේ Static Exporting කියන feature එක ගොඩක් ප්‍රයෝජනවත් වෙන්නේ. 🚀

හිතන්න, ඔයාලට තියෙන්නේ blog එකක්, portfolio එකක්, නැත්නම් නිතර වෙනස් නොවන information එකක් තියෙන website එකක් කියලා. එහෙම වෙලාවකදී Next.js server එකක් run කරන එක අවශ්‍ය වෙන්නේ නැහැ. ඒ වෙනුවට, ඔයාලට පුළුවන් මේ මුළු වෙබ් අඩවියම plain HTML files ටිකක් විදියට generate කරලා, ඒවා CDN (Content Delivery Network) එකක, S3 bucket එකක, නැත්නම් Netlify, Vercel වගේ static hosting service එකක host කරන්න. මේකෙන් ඔයාලට superior performance, අඩු hosting වියදම්, සහ නියම SEO (Search Engine Optimization) වාසි ගණනාවක්ම ලබාගන්න පුළුවන්.

මේ guide එකෙන් අපි Next.js Static Exporting කියන්නේ මොකක්ද, ඒක කොහොමද implement කරන්නේ, ඒකේ වාසි අවාසි මොනවද වගේ දේවල් step-by-step බලමු. එහෙනම්, අපි පටන් ගමු!

Next.js Static Exporting කියන්නේ මොකක්ද?

සරලවම කිව්වොත්, Next.js Static Exporting කියන්නේ ඔයාලගේ Next.js project එක .html, .css, .js වගේ සම්පූර්ණයෙන්ම static files set එකක් විදියට build කරන process එකට. මේ files ටික out කියන folder එක ඇතුළට generate වෙනවා. මේ folder එකේ තියෙන files ටික ඊට පස්සේ ඕනෑම static hosting service එකක deploy කරන්න පුළුවන්. මේකට Next.js වල තියෙන next export command එක පාවිච්චි කරනවා.

සාමාන්‍යයෙන් Next.js application එකක් run වෙන්නේ Node.js server එකක් උඩ. ඒ server එක තමයි requests handle කරලා, pages render කරලා client එකට යවන්නේ. නමුත් Static Export කරනකොට, server එකක් අවශ්‍ය වෙන්නේ නැහැ. Build process එක අතරතුරදීම අවශ්‍ය කරන හැම page එකක්ම HTML file එකක් විදියට generate වෙනවා.

කවදාද Static Export කරන්න ඕනෙ?

• Content-heavy sites: Blog, documentation, marketing pages, portfolio.
• SEO is critical: Pre-rendered HTML search engine bots වලට පහසුවෙන් crawl කරන්න පුළුවන්.
• High performance: CDN එකක් හරහා serve කරන නිසා users ලට content එක ඉක්මනින්ම ලැබෙනවා.
• Low cost hosting: S3, Netlify, Cloudflare Pages වගේ services වලට deploy කරන එක ගොඩක් ලාබයි.
• Offline support: Service Workers එක්ක combine කරලා Offline support දෙන්නත් පුළුවන්.

Static Export කරන්න බැරි වෙලාවන්

• API Routes: Next.js API Routes server-side code run කරන නිසා static export වලදී ඒවා publish වෙන්නේ නැහැ.
• getServerSideProps: මේක server-side data fetching සඳහා භාවිතා කරන නිසා static export කරනකොට වැඩ කරන්නේ නැහැ.
• fallback: true or fallback: 'blocking' with getStaticPaths: මේවා on-demand page generation සඳහා භාවිතා කරන නිසා static export වලට අදාළ නැහැ. (සියලුම paths build time එකේ generate කරන්න ඕන.)
• next/image optimization: Image optimization Next.js server එකක් මත රඳා පවතින නිසා, static export කරනකොට මේ feature එකේ සම්පූර්ණ වාසි ලබාගන්න බැහැ. Image files තවමත් export වෙනවා, නමුත් dynamic optimization වෙන්නේ නැහැ.

Static Exporting Configure කරන්නේ කොහොමද?

Next.js project එකක් static export කරන්න නම්, අපිට පොඩි configurations ටිකක් කරන්න වෙනවා.

පියවර 1: next.config.js සකස් කිරීම

මුලින්ම, ඔයාලගේ project root එකේ තියෙන next.config.js file එක open කරලා, ඒකට output: 'export' කියන property එක එකතු කරන්න ඕනේ. මේක තමයි Next.js ට කියන්නේ ඔයාට project එක static export කරන්න අවශ්‍යයි කියලා.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // Optional: Add a trailing slash for consistent URLs
  // trailingSlash: true,
  // Optional: Configure base path if deploying to a subpath
  // basePath: '/my-static-app',
};

module.exports = nextConfig;

Note: trailingSlash: true කියන එකෙන් ඔයාලගේ URLs වලට ස්වයංක්‍රීයව trailing slash එකක් (උදා: /about/ වෙනුවට /about) එකතු කරනවා. මේක සමහර static hosting platforms වලට වැදගත් වෙන්න පුළුවන්. basePath කියන එක වැදගත් වෙන්නේ ඔයාලා project එක domain එකක subpath එකකට deploy කරනවා නම් (උදා: www.example.com/my-app).

පියවර 2: package.json වල script එකක් එකතු කිරීම

ඊළඟට, ඔයාලගේ package.json file එකේ scripts section එකට export කියන script එක එකතු කරන්න. මේකෙන් next build command එක run කරලා, ඊට පස්සේ next export command එක run කරනවා. next build එකෙන් project එක build කරන අතර, next export එකෙන් build කරපු content එක static HTML files විදියට generate කරනවා.

{
  "name": "my-next-static-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next build && next export"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "^14"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "^14"
  }
}

පියවර 3: Static Export කිරීමට Command එක run කිරීම

දැන් ඔයාලට පුළුවන් terminal එකේ මේ command එක run කරලා project එක static export කරන්න:

npm run export
# or
yarn export

මේ command එක run වුණාට පස්සේ, ඔයාලගේ project root directory එකේ out කියලා අලුත් folder එකක් හැදිලා තියේවි. මේ folder එක ඇතුළේ තමයි ඔයාලගේ සම්පූර්ණ static website එකේ files ටික තියෙන්නේ. 🥳

ප්‍රායෝගික උදාහරණයක්: සරල Static වෙබ් අඩවියක්

අපි දැන් පොඩි Next.js project එකක් හදලා, ඒක static export කරලා බලමු.

පියවර 1: අලුත් Next.js Project එකක් හදමු

මුලින්ම, ඔයාලගේ terminal එක open කරලා මේ command එක run කරන්න. මේකෙන් Next.js project එකක් create වෙනවා.

npx create-next-app my-static-blog --ts
cd my-static-blog

Setup prompt එකේදී මේ විදියට choose කරන්න:

• Would you like to use TypeScript? Yes
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? No (සරලව තියාගමු)
• Would you like to use `src/` directory? No
• Would you like to use App Router? (recommended) No (pages directory එක පාවිච්චි කරමු)
• Would you like to customize the default import alias? No

පියවර 2: පොඩි Pages ටිකක් හදමු

pages directory එක ඇතුලේ index.tsx සහ about.tsx කියලා files දෙකක් හදමු.

pages/index.tsx:

import Head from 'next/head';
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Static Blog</title>
        <meta name="description" content="A simple static blog powered by Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
        <h1>Welcome to My Static Blog!</h1≯
        <p>This is the homepage of our Next.js static exported site.</p>
        <p>
          <Link href="/about">
            <a>Go to About Page</a>
          </Link>
        </p>
      </main>
    </div>
  );
}

pages/about.tsx:

import Head from 'next/head';
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <Head>
        <title>About Us</title>
        <meta name="description" content="Learn more about us" />
      </Head>

      <main style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
        <h1>About This Static Site</h1>
        <p>This site is a simple demonstration of Next.js static exporting.</p>
        <p>It's fast, secure, and easy to deploy!</p>
        <p>
          <Link href="/">
            <a>Go back to Home</a>
          </Link>
        </p>
      </main>
    </div>
  );
}

පියවර 3: next.config.js සහ package.json Adjust කරමු

දැනටමත් අපි මේ ටික කලින් sections වලදී කතා කලා. ඔයාලගේ project එකේ next.config.js file එක මේ විදියට වෙනස් කරන්න:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true, // Optional, but good for static hosting
};

module.exports = nextConfig;

package.json file එකට "export": "next build && next export" script එක එකතු කරන්න (scripts object එක ඇතුලට).

පියවර 4: Static Export කරමු

දැන් project directory එක ඇතුලේ මේ command එක run කරන්න:

npm run export

මේක run වුණාට පස්සේ, ඔයාලට out කියලා අලුත් folder එකක් පේන්න ලැබෙයි. ඒ folder එක ඇතුළේ index.html, about/index.html වගේ files තියෙනවා.

පියවර 5: Exported Site එක Serve කරලා බලමු

out folder එක ඇතුලේ තියෙන files ටික static server එකකින් serve කරලා බලන්න පුළුවන්. ඒකට අපිට serve package එක පාවිච්චි කරන්න පුළුවන්. මුලින්ම ඒක install කරගමු:

npm install -g serve

ඊට පස්සේ, project root එකේ ඉඳන් මේ command එක run කරන්න:

serve out

එතකොට ඔයාලට local URL එකක් ලැබෙයි (උදා: http://localhost:3000). ඒ URL එකට ගිහින් බලන්න. ඔයාලගේ Next.js application එක server එකක් නැතුව, සම්පූර්ණයෙන්ම static HTML files විදියට run වෙනවා!

දැන් ඔයාලට පුළුවන් මේ out folder එකේ තියෙන content එක අර කලින් කතා කරපු ඕනෑම static hosting service එකක deploy කරන්න. ඒක ඉතාමත් පහසුයි! 🤩

Static Exporting වල සීමාවන් සහ Best Practices

Static Exporting ගොඩක් ප්‍රයෝජනවත් වුණත්, ඒකට තියෙනවා තමන්ගේම සීමාවන් ටිකක්. ඒ වගේම ඒක කාර්යක්ෂමව පාවිච්චි කරන්න best practices ටිකකුත් තියෙනවා.

ප්‍රධාන සීමාවන්

• No Server-Side Features: කලින් කිව්වා වගේ, getServerSideProps, API Routes, සහ Middleware වගේ server-side features මේකට support කරන්නේ නැහැ. ඔයාලගේ application එකට runtime server එකක් අවශ්‍ය නම්, static export කිරීම සුදුසු නැහැ.
• Dynamic Routes with getStaticPaths: ඔයාලා dynamic routes (උදා: /posts/[id].js) පාවිච්චි කරනවා නම්, getStaticPaths function එකෙන් build time එකේදී generate කරන්න ඕන හැම path එකක්ම return කරන්න ඕනේ. fallback: true හෝ fallback: 'blocking' පාවිච්චි කරනවා නම් static export වැඩ කරන්නේ නැහැ, මොකද ඒවා on-demand generation සඳහා.
• Image Optimization: next/image component එකේ advanced image optimization features (on-demand image resizing, different formats) Next.js server එකක් අවශ්‍යයි. Static export කරනකොට images export වෙනවා, නමුත් මේ optimizations ලැබෙන්නේ නැහැ.
• Data Revalidation (ISR): Incremental Static Regeneration (ISR) සඳහා revalidate option එක Next.js server එකක් මත රඳා පවතින නිසා static export කරනකොට මේක වැඩ කරන්නේ නැහැ.

Best Practices

• Client-Side Data Fetching: මුල් page load එක static වුණත්, ඊට පස්සේ dynamic data fetch කරන්න අවශ්‍ය නම්, client-side data fetching techniques (උදා: SWR, React Query, or plain fetch calls) පාවිච්චි කරන්න පුළුවන්. මේවා client-side එකේදී API endpoints වලට requests යවලා data load කරනවා.
• Use for Stable Content: නිතර වෙනස් නොවන content (blog posts, about pages, legal documents) සඳහා Static Exporting යොදාගන්න.
• Content Delivery Networks (CDNs): Export කරපු files CDN එකකට deploy කරන එක තමයි හොඳම දේ. CDN එකකින් global users ලට වේගවත්ව content deliver කරන්න පුළුවන්. (උදා: Cloudflare, AWS CloudFront).
• Pre-rendering All Paths: Dynamic routes තියෙනවා නම්, getStaticPaths භාවිතා කරලා build time එකේදී අවශ්‍ය හැම page එකක්ම generate කරන්න.
• Hybrid Approach: සමහර වෙලාවට ඔයාලට hybrid approach එකක් යොදාගන්න සිද්ධ වෙන්න පුළුවන්. ඒ කියන්නේ, Next.js server එකක් deploy කරලා, ඒකෙන් server-side rendering (SSR) සහ ISR වගේ features අවශ්‍ය page ටික serve කරන ගමන්, static export කරපු page ටික CDN එකකින් serve කරන එක.

අවසාන වචනය

අපි මේ guide එකෙන් Next.js Static Exporting කියන්නේ මොකක්ද, ඒක configure කරන්නේ සහ implement කරන්නේ කොහොමද කියලා විස්තරාත්මකව බැලුවා. ඒ වගේම ඒකේ තියෙන සීමාවන් සහ best practices ගැනත් කතා කළා.

Static Exporting කියන්නේ Next.js වල තියෙන සුපිරි feature එකක්, විශේෂයෙන්ම අධික වේගයක්, අඩු hosting වියදමක් සහ හොඳ SEO එකක් අවශ්‍ය වන වෙබ් අඩවි සඳහා. ඔයාලා ගෙදර project එකක් කරනවා නම්, personal blog එකක් හදනවා නම්, නැත්නම් company එකක marketing site එකක් හදනවා නම්, මේක ගොඩක් ප්‍රයෝජනවත් වෙයි.

දැන් ඔයාලට මේ දැනුම පාවිච්චි කරලා ඔයාලගේම Next.js project එකක් static export කරලා බලන්න පුළුවන්. මොකද, අතින් කරලා බලන එක තමයි හොඳම විදිය. 💪

මේ ගැන ඔයාලගේ අත්දැකීම්, ප්‍රශ්න, නැත්නම් අලුත් අදහස් පහතින් comment කරන්න අමතක කරන්න එපා. අපි හැමෝටම මේ Next.js journey එක සාර්ථක කරගන්න එකිනෙකාට උදව් කරමු! ජය වේවා! 🙏