Next.js හැඳින්වීම: ඇයි Next.js වැදගත් වෙන්නේ? - SC Guide

ආයුබෝවන් කට්ටියටම! කොහොමද ඉතින්? අද අපි කතා කරන්න යන්නේ Web Development ලෝකයේ ගොඩක් දෙනෙක්ගේ කතාබහට ලක්වෙලා තියෙන, ඒ වගේම ගොඩක් වැදගත් tool එකක් ගැන. ඒ තමයි Next.js. ඈ? Next.js? ඒ මොකක්ද? React එක්ක තව මොකටද අලුත් එකක්? මෙන්න මේ වගේ ප්‍රශ්න ගොඩක් දෙනෙක්ට ඇති වෙන්න පුළුවන්.

සරලවම කිව්වොත්, Next.js කියන්නේ React Application හදන එක ඊළඟ මට්ටමට (next level එකට) අරන් යන framework එකක්. සාමාන්‍ය React වලින් අපිට ලස්සන, interactive user interfaces හදන්න පුළුවන්. ඒත් production environment එකකට ගිහාම එන සමහර අභියෝග, විශේෂයෙන්ම Search Engine Optimization (SEO) සහ performance වගේ දේවල් වලට Next.js අපිට ගොඩක් උදව් වෙනවා. මේ guide එකෙන් අපි Next.js කියන්නේ මොකක්ද, ඇයි මේක මෙච්චර වැදගත් වෙන්නේ, আর කොහොමද අපේ පළවෙනි Next.js project එක පටන් ගන්නේ කියලා බලමු. එහෙනම්, සෙට් වෙමු!

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

ඔයා දැනටමත් React එක්ක වැඩ කරලා තියෙනවා නම්, ඔයා දන්නවා ඇති React කියන්නේ UI library එකක් කියලා. ඒකෙන් අපිට Components හදලා, ඒවා එකට එකතු කරලා complex user interfaces ගොඩනගන්න පුළුවන්. ඒත් React වලට විතරක්, production-ready application එකක් හදන්න අවශ්‍ය හැමදේම නැහැ. උදාහරණයක් විදියට, Routing (වෙබ් පිටු අතර navigate කරන එක) handle කරන්න, build process එක optimize කරන්න, හෝ server-side rendering (SSR) වගේ දේවල් කරන්න, අපි අමතර tools සහ libraries පාවිච්චි කරන්න ඕනේ.

මෙන්න මේ වෙලාවේ තමයි Next.js බිමට බහින්නේ. Next.js කියන්නේ React වලට උඩින් හදපු full-stack React framework එකක්. Vercel කියන ආයතනය විසින් හදපු මේක, React application එකක් production එකට deploy කරන එක ගොඩක් පහසු කරනවා. එයාලා අපිට Out-of-the-box solution එකක් දෙනවා, SSR, Static Site Generation (SSG), API routes, file-system based routing වගේ ගොඩක් දේවල් එක්ක.

හිතලා බලන්න, සාමාන්‍ය React app එකක් Browser එකේ load වෙද්දි, මුලින්ම හිස් HTML file එකක් load වෙලා, ඊට පස්සේ JavaScript ගොඩක් run වෙලා UI එක generate වෙනවා. මේකට අපි කියන්නේ Client-Side Rendering (CSR) කියලා. මේක SEO වලට එච්චර හොඳ නැහැ, මොකද search engines වලට මුලින්ම පේන්නේ හිස් HTML එකක් නිසා. Next.js මේ ගැටලුව විසඳනවා, HTML content එක Server එකේදී generate කරලා client එකට යවනවා. මේක තමයි SSR. මේ ගැන තව ටිකක් විස්තරාත්මකව බලමු.

ඇයි Next.js පාවිච්චි කරන්නේ? (Why Next.js?)

Next.js පාවිච්චි කරන්න ගොඩක් හේතු තියෙනවා. මේවා තමයි React වලට සාපේක්ෂව Next.js වල තියෙන ප්‍රධාන වාසි.

1. Search Engine Optimization (SEO) වැඩි දියුණු කිරීම

කලින් කිව්වා වගේ, සාමාන්‍ය React (CSR) app එකක මුලින්ම load වෙන්නේ හිස් HTML එකක්. Search engine crawlers (Google Bot වගේ) මේ හිස් HTML එක දැක්කම, ඔයාගේ page එකේ තියෙන content එක මොකක්ද කියලා තේරුම් ගන්න එයාලට අමාරු වෙනවා. ඒ නිසා ඔයාගේ page එක search results වල පහලට යනවා, නැත්නම් පේන්නෙම නැතුව යනවා.

Next.js මේකට විසඳුම් දෙකක් දෙනවා: Server-Side Rendering (SSR) සහ Static Site Generation (SSG). මේ දෙකම Pre-rendering වර්ග.

• Server-Side Rendering (SSR): ඔයාගේ page එකට request එකක් ආවම, Server එකේදී සම්පූර්ණ HTML page එක generate කරලා client එකට යවනවා. ඒ නිසා Browser එකට එනකොටම content එක තියෙනවා. Search engines වලට මේක පහසුවෙන් read කරන්න පුළුවන්.
• Static Site Generation (SSG): Build කරන වෙලාවේදී (application එක deploy කරන වෙලාවේදී) සම්පූර්ණ HTML pages generate කරනවා. මේවා Content Delivery Network (CDN) එකක host කරන්න පුළුවන්. User request එකක් ආවම, Server එකෙන් dynamic ව generate කරනවට වඩා, මේ static HTML file එක ඉක්මනින් client එකට යවන්න පුළුවන්. මේකෙන් speed එක ගොඩක් වැඩි වෙනවා. Blog posts, documentation වගේ, නිතර වෙනස් නොවන content තියෙන pages වලට SSG ගොඩක් හොඳයි.

2. Performance එක වැඩි කිරීම

SEO වලට අමතරව, Next.js ඔයාගේ application එකේ performance එක වැඩි කරන්නත් ගොඩක් දේවල් කරනවා:

• Automatic Code Splitting: Next.js automatically ඔයාගේ JavaScript code එක පොඩි chunks වලට කඩනවා. ඒ නිසා user කෙනෙක් page එකකට ගියාම, ඒ page එකට අවශ්‍ය code එක විතරක් load වෙනවා. අනවශ්‍ය code load නොවෙන නිසා application එක ඉක්මනින් load වෙනවා.
• Image Optimization: Next.js වලට තමන්ගේම <Image> component එකක් තියෙනවා. මේකෙන් images automatically optimize කරනවා (webp වගේ efficient formats වලට convert කරනවා, responsive sizes වලට adjust කරනවා). ඒ වගේම Lazy Loading (user screen එකට image එක එනකම් load නොවී ඉන්න එක) වගේ දේවලුත් automatically කරනවා.
• Fast Refresh: Development mode එකේදී code එකේ වෙනසක් කරද්දි, application එක full reload නොවී, වෙනස් වෙච්ච component එක විතරක් update වෙනවා. මේකෙන් developer experience (DX) එක ගොඩක් හොඳ වෙනවා.

3. Developer Experience (DX) වැඩි කිරීම

Next.js developersලාටත් ගොඩක් පහසුකම් සලසනවා:

• File-system Based Routing: Routing හදන එක Next.js වල ගොඩක් සරලයි. ඔයා pages folder එක ඇතුළේ file එකක් හදනවා නම් (උදාහරණයක් විදියට pages/about.js), Next.js automatically ඒක /about කියන route එකට map කරනවා. ඒ වගේම dynamic routes (pages/posts/[id].js වගේ) හදන එකත් පහසුයි.
• API Routes: Next.js එකෙන් ඔයාට තමන්ගේම API endpoints හදන්නත් පුළුවන්. ඒකත් pages/api folder එක ඇතුළේ file එකක් හැදුවම වැඩ කරනවා. ඒ කියන්නේ, ඔයාට full-stack application එකක් එකම project එක ඇතුළේ හදන්න පුළුවන්. Backend එකට වෙනම framework එකක් (Node.js, Express වගේ) පාවිච්චි කරන්න අවශ්‍ය වෙන්නේ නැහැ.
• TypeScript Support: Next.js වලට built-in TypeScript support එකක් තියෙනවා. ඒකෙන් type safety එක වැඩි කරගන්න පුළුවන්.

Next.js පටන් ගමු! (Let's start with Next.js!)

දැන් අපි theory කතා කරා ඇති, practical පැත්තට යමු. ඔයාගේ පළවෙනි Next.js project එක හදාගන්නේ කොහොමද කියලා බලමු.

අවශ්‍ය දේවල් (Prerequisites):

Next.js project එකක් පටන් ගන්න කලින්, ඔයාගේ computer එකේ මේ දේවල් install කරලා තියෙන්න ඕනේ:

• Node.js: Next.js වලට Node.js අවශ්‍යයි. Node.js official website එකෙන් stable version එක download කරලා install කරගන්න.
• npm (Node Package Manager) or Yarn: Node.js install කරද්දි npm auto install වෙනවා. Yarn පාවිච්චි කරනවා නම් ඒකත් install කරගන්න.

මේවා හරියට install වෙලාද කියලා බලන්න, Command Prompt (Windows) හෝ Terminal (macOS/Linux) එක open කරලා මේ commands ටයිප් කරන්න:

node -v
npm -v
yarn -v # If you are using Yarn

ඒවාට version numbers ආවොත්, ඔක්කොම හරි!

Next.js Project එකක් හදමු:

Next.js project එකක් හදන්න ගොඩක්ම සරලයි. අපි create-next-app කියන command එක පාවිච්චි කරනවා.

ඔයාට project එක හදන්න ඕන කරන folder එකට ගිහිල්ලා, terminal එක open කරලා මේ command එක ටයිප් කරන්න:

npx create-next-app@latest my-next-app --typescript

මේ command එකෙන් වෙන්නේ මොකක්ද කියලා බලමු:

• npx: මේක npm එක්ක එන tool එකක්. මේකෙන් අපිට packages install නොකරම run කරන්න පුළුවන්.
• create-next-app@latest: Next.js project එකක් initiate කරන්න පාවිච්චි කරන official tool එක. @latest කියන්නේ අලුත්ම version එක පාවිච්චි කරන්න කියන එක.
• my-next-app: මේක ඔයාගේ project එකට දෙන්න යන නම. ඔයාට කැමති නමක් දෙන්න පුළුවන්. මේ නමින් අලුත් folder එකක් create වෙනවා.
• --typescript: ඔයා TypeScript පාවිච්චි කරන්න බලාපොරොත්තු වෙනවා නම් මේ flag එක add කරන්න. ගොඩක් production apps වලට TypeScript පාවිච්චි කරන නිසා මේක හොඳ පුරුද්දක්. (නැතිවම බැරි නැහැ, JavaScript වලින් විතරක් හදන්නත් පුළුවන්.)

මේ command එක run කරාම, Next.js විසින් අලුත් project එකක් create කරනවා, අවශ්‍ය dependencies install කරනවා, ඒ වගේම sample files ටිකකුත් හදනවා. මේකට පොඩි වෙලාවක් යයි.

Development Server එක Run කරමු:

Project එක create වෙලා ඉවර වුණාම, අලුතින් හදපු my-next-app folder එක ඇතුළට යන්න:

cd my-next-app

දැන් development server එක start කරන්න, මේ command එක දෙන්න:

npm run dev

හෝ

yarn dev

මේ command එක run කරාම, ඔයාට terminal එකේ මෙහෙම message එකක් පෙනෙයි:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

දැන් ඔයාට Browser එක open කරලා http://localhost:3000 කියන URL එකට ගියාම, ඔයාගේ පළවෙනි Next.js application එකේ welcome page එක පෙනෙයි.

Project Structure එක:

දැන් අපි Visual Studio Code (VS Code) වගේ code editor එකකින් my-next-app folder එක open කරලා project structure එක බලමු:

• pages/: මේක තමයි ඔයාගේ application එකේ pages හදන ප්‍රධාන folder එක. මේක ඇතුළේ තියෙන index.tsx (හෝ index.js) කියන්නේ home page (/ route) එක. api/ folder එක API routes වලට.
• public/: Images, fonts වගේ static assets තියන්න ඕන folder එක.
• styles/: Global CSS files හෝ CSS Modules තියන්න පුළුවන්.
• components/ (Not by default, but commonly used): ඔයාගේ reusable React components තියන්න මේ වගේ folder එකක් හදාගන්න පුළුවන්.
• next.config.js: Next.js configuration settings තියෙන file එක.
• package.json: Project එකේ dependencies සහ scripts තියෙන file එක.

හොඳම පුරුදු සහ පොදු ගැටළු (Best Practices & Common Issues)

හොඳම පුරුදු:

• Latest Stable Version: හැමවෙලේම Next.js වල අලුත්ම stable version එක පාවිච්චි කරන්න බලන්න. අලුත් features සහ bug fixes තියෙනවා.
• TypeScript පාවිච්චි කරන්න: ඔයාගේ project එක ටිකක් ලොකු වෙනවා නම් හෝ කණ්ඩායමක් එක්ක වැඩ කරනවා නම්, project එක මුලින්ම TypeScript වලින් initiate කරන්න. මේකෙන් errors අඩු කරගන්න පුළුවන්.
• Dependencies Update කරන්න: package.json එකේ තියෙන dependencies නිතර update කරන්න (npm update or yarn upgrade).
• Environment Variables: Sensitive information (API keys වගේ) code එක ඇතුළේ directly ලියන්නේ නැතුව .env.local file එකක් පාවිච්චි කරලා environment variables විදියට තියන්න.

පොදු ගැටළු සහ Troubleshooting:

• "Command not found" for node, npm, or npx: මේක වෙන්නේ Node.js හෝ npm හරියට install වෙලා නැත්නම් හෝ environment path එකට එකතු වෙලා නැත්නම්. Node.js uninstall කරලා ආයෙත් install කරලා බලන්න.
• Port 3000 already in use: ඔයා කලින් Next.js app එකක් run කරලා ඒක close කරලා නැත්නම්, මේ error එක එන්න පුළුවන්. Terminal එකේ Ctrl + C ඔබලා server එක stop කරන්න, නැත්නම් වෙනත් program එකක් port 3000 පාවිච්චි කරනවා නම්, ඒක close කරන්න.
• Dependencies not installed: Project එක clone කරගත්තාම, npm install හෝ yarn install command එක run නොකලොත් මේක වෙන්න පුළුවන්.
• Error messages: Error message එක හොඳට කියවන්න. ගොඩක් වෙලාවට error එකට හේතුවයි, විසඳුමයි ඒක ඇතුළේ තියෙනවා. Stack Overflow, Next.js documentation වගේ තැන්වල බලන්න.

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

ඉතින් යාලුවනේ, මේ guide එකෙන් අපි Next.js කියන්නේ මොකක්ද, ඇයි මේක මේ තරම් වැදගත් වෙන්නේ, ඒ වගේම අපේ පළවෙනි Next.js project එක පටන් ගන්නේ කොහොමද කියලා කතා කළා. Next.js, React developersලාට production-ready application හදන එක ගොඩක් පහසු කරනවා. SEO, performance, සහ developer experience එක වැඩි දියුණු කරන එක තමයි මේකේ ප්‍රධානම වාසි.

දැන් ඔයාට හොඳ foundation එකක් තියෙනවා Next.js එක්ක වැඩ කරන්න පටන් ගන්න. මම recommend කරන්නේ දැන්මම ඔයාගේම project එකක් හදලා, ටික ටික explore කරන්න කියලා. pages folder එක ඇතුළේ අලුත් file එකක් හදලා, localhost:3000/new-page වගේ ගිහිල්ලා බලන්න. තවදුරටත් Next.js documentation එක බලන්න.

ඔයා Next.js එක්ක වැඩ කරලා තියෙනවා නම්, ඔයාගේ අත්දැකීම් මොනවාද? ඔයාට මේ guide එක ගැන ප්‍රශ්න තියෙනවා නම්, පහළින් comment එකක් දාන්න. අපි කට්ටියම එකට ඉගෙන ගනිමු!

එහෙනම්, ඊළඟ guide එකකින් හමුවෙමු! Happy Coding!