Next.js Absolute Imports Sinhala | Module Aliases | Clean Code Guide

නූතන Next.js Project වල Absolute Imports හා Module Aliases භාවිතා කරමු!

හායි යාළුවනේ! කොහොමද ඔයාලට? අද අපි කතා කරන්න යන්නේ Next.js projects වල code quality එක, maintainability එක සහ developer experience එක ගොඩක් වැඩි කරන වැදගත් දෙයක් ගැන - ඒ තමයි Absolute Imports සහ Module Aliases.

සාමාන්‍යයෙන් ඔයාලා Next.js project එකක වැඩ කරද්දී, components, utility functions වගේ දේවල් import කරන්නේ මෙහෙම නේද?

import MyComponent from '../../components/MyComponent';
import { someUtil } from '../../../utils/helpers';

මේවා තමයි Relative Imports. Project එක පොඩි කාලෙට අවුලක් නැති වුණාට, ටිකෙන් ටික project එක ලොකු වෙද්දී මේ import paths ටිකක් අවුල් සහගත වෙන්න පුළුවන්. එතකොට code එක කියවන්නත් අමාරුයි, File එකක තැන වෙනස් කළොත් imports ඔක්කොම update කරන්නත් වෙනවා.

ඒකට තියෙන නියම විසඳුම තමයි Absolute Imports! මේ guide එකෙන් අපි Absolute Imports කියන්නේ මොනවද, ඒවා භාවිතා කිරීමෙන් ලැබෙන වාසි මොනවද, Next.js project එකක ඒවා set up කරන්නේ කොහොමද, practical examples එක්ක refactor කරන්නේ කොහොමද කියලා විස්තරාත්මකව බලමු.

ඉතින්, අපි පටන් ගමුද?

Relative Imports වල ගැටළු හා Absolute Imports වලින් ලැබෙන වාසි

Relative Imports වල ගැටළු

ඔයාලා දන්නවා Relative Imports කියන්නේ project එකේ දැනට ඉන්න file එකේ ඉඳන් අවශ්‍ය කරන file එකට යන "path" එක specify කරන එක කියලා.

import Button from '../../components/ui/Button'; // ගැඹුරු paths
import { calculateTax } from '../../../utils/financial/tax-calculator'; // තවත් ගැඹුරුයි

• Code එකේ පැහැදිලි බව (Readability) අඩු වීම: ../../../../ වගේ දෙයක් දැක්කම මේක කොහෙන්ද එන්නේ කියලා හරියටම තේරෙන්නේ නැහැ. Path එක දිගයි, කියවන්න අමාරුයි.
• Refactoring කිරීමේ අපහසුතාවය: ඔයාලා file එකක් හෝ folder එකක් move කළොත්, ඒකට අදාළ සියලුම imports අතින් වෙනස් කරන්න වෙනවා. මේක මාර වෙලාවක් නාස්ති කරන වැඩක්.
• Error වලට වැඩි ඉඩක්: දිග paths ටයිප් කරද්දී වැරදීම් වෙන්න තියෙන ඉඩ වැඩියි.

Absolute Imports වලින් ලැබෙන වාසි

Absolute Imports කියන්නේ project root එකේ ඉඳන් හෝ අපි define කරන alias එකකින් පටන් ගන්න paths.

import Button from '@/components/ui/Button'; // ගොඩක් පිරිසිදුයි
import { calculateTax } from '@utils/financial/tax-calculator'; // කෙටියි, පැහැදිලියි

මේකෙන් ලැබෙන වාසි මෙන්න මෙහෙමයි:

• Code එකේ පැහැදිලි බව වැඩි වීම: @/components වගේ දෙයක් දැක්කම පැහැදිලියි මේක project එකේ src/components වගේ තැනකින් එන component එකක් කියලා. Paths කෙටියි, තේරුම් ගන්න පහසුයි.
• Refactoring කිරීම පහසු වීම: ඔයාලා file එකක් move කළත්, ඒ file එකට යන Absolute Import path එක වෙනස් වෙන්නේ නැහැ. මක්නිසාද යත්, එය සැමවිටම project root එකට සාපේක්ෂව (relative to the project root) පවතින නිසා.
• වේගවත් සංවර්ධනය: Path එක ටයිප් කරන්න අඩු කාලයක් යන නිසා, ඉක්මනින් code කරන්න පුළුවන්. IDE autocomplete එකත් මේකට උදව් වෙනවා.

Next.js Project එකක Absolute Imports Configure කරමු!

Next.js project එකක Absolute Imports set up කරන එක හිතන තරම් අමාරු නැහැ. අපිට කරන්න තියෙන්නේ jsconfig.json (JavaScript project වලට) හෝ tsconfig.json (TypeScript project වලට) කියන file එකට පොඩි configuration එකක් එකතු කරන එක විතරයි.

Step 1: jsconfig.json / tsconfig.json File එක හදමු

සාමාන්‍යයෙන් Next.js project එකක් හදද්දී මේ file එක automatically හැදෙනවා. එහෙම නැත්නම්, project root එකේ (package.json තියෙන තැන) මේ file එක හදන්න.

JavaScript Projects (jsconfig.json)

මේක තමයි JavaScript project එකකට අවශ්‍ය කරන configuration එක:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/utils/*": ["utils/*"],
      "@/styles/*": ["styles/*"],
      "@/public/*": ["public/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "exclude": ["node_modules"]
}

මේකේ තියෙන වැදගත් කොටස් ටික බලමු:

• "baseUrl": ".": මේකෙන් කියන්නේ අපේ Absolute Imports project root එකේ (file එක තියෙන තැන) ඉඳන් පටන් ගන්නවා කියලා.
• "paths": { ... }: මේකෙන් තමයි අපේ custom aliases define කරන්නේ.
  • "@/components/*": ["components/*"]: මේකෙන් කියන්නේ @/components/MyComponent වගේ import එකක් ආවොත්, ඒක project-root/components/MyComponent කියන තැනින් හොයන්න කියලා. (* කියන්නේ wildcard එකක්, ඒ කියන්නේ එතනට ඕනෑම දෙයක් එන්න පුළුවන්.)
  • ඔයාලට ඕන විදිහට aliases එකතු කරගන්න පුළුවන්. උදාහරණයක් විදිහට @/lib/*, @/hooks/*, @/services/* වගේ ඒවා.

TypeScript Projects (tsconfig.json)

TypeScript project එකකට මේක ටිකක් වෙනස්. දැනටමත් tsconfig.json file එකක් තියෙනවා නම්, ඒකට "paths" property එක එකතු කරන්න. නැත්නම් පහත කේතය භාවිතා කරන්න.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/utils/*": ["utils/*"],
      "@/styles/*": ["styles/*"],
      "@/public/*": ["public/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

compilerOptions ඇතුළත baseUrl සහ paths ටික jsconfig.json එකේ වගේමයි.

Step 2: IDE Restart කරන්න

Changes apply වෙන්න නම්, ඔයාලගේ VS Code වගේ IDE එක restart කරන්න. සමහර වෙලාවට IDE එකට මේ changes අඳුනගන්න පුංචි වෙලාවක් යනවා.

ප්‍රායෝගිකව භාවිතා කරමු: Existing Project එකක් Refactor කරමු!

දැන් අපි Absolute Imports configure කරලා ඉවරයි. දැන් බලමු දැනට තියෙන project එකක Relative Imports, Absolute Imports බවට පත් කරන්නේ කොහොමද කියලා.

උදාහරණයක්: Component එකක් Import කිරීම

ඔයාලගේ project structure එක මෙහෙමයි කියලා හිතමු:

project-root/
├── components/
│   ├── ui/
│   │   └── Button.jsx
│   └── Layout.jsx
├── pages/
│   └── index.jsx
├── utils/
│   └── helpers.js
└── jsconfig.json

Before (Relative Import)

pages/index.jsx file එක ඇතුලේ Button.jsx import කරන්නේ මෙහෙමයි:

// pages/index.jsx
import React from 'react';
import Button from '../components/ui/Button'; // Relative Import

function HomePage() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button text="Click Me" />
    </div>
  );
}

export default HomePage;

After (Absolute Import)

දැන් අපි jsconfig.json එකේ "@/components/*": ["components/*"] alias එක define කරලා තියෙන නිසා, අපිට මේක මෙහෙම වෙනස් කරන්න පුළුවන්:

// pages/index.jsx
import React from 'react';
import Button from '@/components/ui/Button'; // Absolute Import, කෙටියි, පැහැදිලියි!

function HomePage() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button text="Click Me" />
    </div>
  );
}

export default HomePage;

දැන් බලන්න, import Button from '../components/ui/Button'; කියන එක import Button from '@/components/ui/Button'; කියලා කොච්චර ලස්සනට කෙටි වුණාද කියලා! index.jsx file එක කොහේ තිබුණත්, Button.jsx එකට යන path එක මේකමයි.

උදාහරණයක්: Utility Function එකක් Import කිරීම

utils/helpers.js file එකේ formatDate කියන function එකක් තියෙනවා කියලා හිතමු.

// utils/helpers.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

Before (Relative Import)

// components/someComponent/DateDisplay.jsx
import React from 'react';
import { formatDate } from '../../utils/helpers'; // Relative Import

function DateDisplay({ dateString }) {
  const formattedDate = formatDate(dateString);
  return <p>Formatted Date: {formattedDate}</p>;
}

export default DateDisplay;

After (Absolute Import)

අපි jsconfig.json එකේ "@/utils/*": ["utils/*"] alias එක define කරලා තියෙන නිසා, අපිට මේක මෙහෙම වෙනස් කරන්න පුළුවන්:

// components/someComponent/DateDisplay.jsx
import React from 'react';
import { formatDate } from '@/utils/helpers'; // Absolute Import, පිරිසිදුයි!

function DateDisplay({ dateString }) {
  const formattedDate = formatDate(dateString);
  return <p>Formatted Date: {formattedDate}</p>;
}

export default DateDisplay;

මෙන්න මේ විදිහට ඔයාලගේ project එකේ තියෙන හැම Relative Import එකක්ම Absolute Import එකක් බවට පත් කරන්න පුළුවන්. VS Code එකේ "Find and Replace" වගේ features මේකට ගොඩක් උදව් වෙයි.

Troubleshooting සහ Best Practices

සාමාන්‍යයෙන් එන ගැටළු හා ඒවාට විසඳුම්

• Module not found errors:ඔයාලා Absolute Import එකක් භාවිතා කළාට පස්සේ Module not found වගේ error එකක් ආවොත්, මුලින්ම බලන්න jsconfig.json හෝ tsconfig.json file එකේ baseUrl සහ paths ටික හරියට set කරලා තියෙනවද කියලා. Spelling mistakes නැද්ද බලන්න. "baseUrl": "." කියන එක අනිවාර්යයෙන්ම තියෙන්න ඕනේ.තවද, Node.js development server එක (npm run dev) සහ IDE එක restart කරලා බලන්න.
• IDE support නැති වීම (VS Code autocomplete වැඩ නොකරන එක):සමහර වෙලාවට VS Code එකට අලුත් config එක අඳුනගන්න ටිකක් වෙලා යනවා. VS Code එක close කරලා ආයෙත් open කරන්න. Cache issue එකක් නම්, VS Code එකේ Command Palette එක open කරලා (Ctrl+Shift+P හෝ Cmd+Shift+P) "TypeScript: Restart TS Server" (TypeScript project නම්) හෝ "JavaScript: Restart JS Server" (JavaScript project නම්) කියලා search කරලා run කරන්න.

හොඳම භාවිතයන් (Best Practices)

• Aliases ස්ථාවරව තියාගන්න: හැමවිටම @/components, @/utils වගේ එකම pattern එකක් භාවිතා කරන්න. මේක code base එකේ consistency එකට ගොඩක් වැදගත්.
• ඕනාවට වඩා Alias හදන්න එපා: හැම folder එකකටම alias එකක් හදන එකත් හොඳ නැහැ. ප්‍රධාන folders (e.g., components, utils, hooks, services, styles) වලට විතරක් aliases හදාගන්න.
• Deeply nested folders අයින් කරන්න: පුළුවන් තරම් file structure එක සරලව තියාගන්න. ගොඩක් ගැඹුරට folders තියෙන එකෙන් code එක හොයාගන්නත්, maintain කරන්නත් අමාරු වෙනවා. (src/components/ui/buttons/primary/PrimaryButton.jsx වගේ එකකට වඩා src/components/ui/PrimaryButton.jsx වගේ එකක් හොඳයි.)

index.js / index.ts files භාවිතා කරන්න: Folder එකක් ඇතුලේ තියෙන files ටිකක් export කරන්න index.js file එකක් භාවිතා කරන්න පුළුවන්.

// components/ui/index.js
export * from './Button';
export * from './Input';
export * from './Modal';

එතකොට import කරද්දී මෙහෙම කරන්න පුළුවන්:

import { Button, Input } from '@/components/ui';

මේක තවත් code එක clean කරන්න උදව් වෙනවා.

සාරාංශය සහ Call to Action

ඉතින් යාළුවනේ, මේ guide එකෙන් අපි Next.js project එකක Absolute Imports සහ Module Aliases කියන්නේ මොනවද, ඒවා install කරන්නේ කොහොමද, ඒවා භාවිතා කරලා project එකක code quality එක වැඩි කරගන්නේ කොහොමද කියලා විස්තරාත්මකව ඉගෙන ගත්තා.

Absolute Imports භාවිතා කිරීමෙන් ඔයාලගේ code base එක වඩාත් පිරිසිදු, කියවීමට පහසු, සහ maintain කිරීමට පහසු වෙනවා. ඒ වගේම refactoring කිරීමේදී ඇතිවන ගැටළු අවම කරගන්නත් පුළුවන්.

දැන් ඔයාලා දන්නවා මේක කොච්චර වටිනවද කියලා. අදම ඔයාලගේ Next.js project වල මේ feature එක implement කරලා බලන්න. වැඩ කරද්දී මොනවා හරි ප්‍රශ්න ආවොත්, පහලින් comment එකක් දාන්න. අපි උදව් කරන්න ලෑස්තියි!

මතක තියාගන්න, හොඳ developer කෙනෙක් වෙන්න නම් අලුත් දේවල් ඉගෙන ගන්න එකයි, හොඳ practices implement කරන එකයි ගොඩක් වැදගත්.

ආයෙත් මේ වගේ වටිනා tutorial එකකින් හමුවෙමු! Happy Coding!