⚡ Next.js එකෙන් Modern Web Apps හදමු – Full Guide 🇱🇰

ඔබ React වලින් projects හදනව නම්, Next.js කියන framework එක use කිරීමෙන් ඔයාගේ application එක SEO-friendly, faster, සහ production-ready වේ. මේ post එකෙන් අපි බලමු Next.js කියන්නෙ මොකද්ද, එය භාවිතා කරලා කොහොමද complete web apps හදන්නෙ කියලා.

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

Next.js කියන්නේ React-based framework එකක්, තමයි Vercel එකෙන් develop කරලා තියෙන්නෙ. මෙහි තියෙන coolest features කිහිපයක්:

• Server-side rendering (SSR)
• Static site generation (SSG)
• Client-side rendering (CSR)
• API routes (backend support)
• Image optimization
• File-based routing
• Automatic code splitting

🧠 Why Use Next.js?

• ✅ Better SEO (search engine-friendly pages)
• ✅ Fast Performance
• ✅ Built-in API support
• ✅ Automatic routing
• ✅ Free & Fast deployment with Vercel

📁 Basic Project Structure

කෙටි වශයෙන් බලමු Next.js එකේ folder structure එක:

my-next-app/  
├── app/  
│   ├── index.tsx  
│   ├── about.tsx  
│   └── api/  
│       └── hello.ts  
├── public/  
├── styles/  
├── components/  
├── next.config.js  
└── package.json  
 

• app/ → Routes (index.tsx → /, about.tsx → /about)
• api/ → API Routes (Next.js built-in backend)
• public/ → Static files (images, icons)
• components/ → Reusable UI blocks

⚙️ Start a New Project

ඔයාට නව Next.js project එකක් create කරන්න:

npx create-next-app@latest my-next-app  
cd my-next-app  
npm run dev  

➡️ Visit your site: http://localhost:3000

🛣️ Routing – Page System එක

Next.js automatically creates routes using the pages folder.

Example:

• pages/index.tsx → Home page /
• pages/about.tsx → About page /about
• pages/blog/[slug].tsx → Dynamic route like /blog/my-first-post

Dynamic Route Example:

import { useRouter } from 'next/router'  
 
export default function BlogPost() {  
  const router = useRouter()  
  const { slug } = router.query  
 
  return <h1>Reading: {slug}</h1>  
}

🌐 SSR සහ SSG

Server-side Rendering (SSR) – Request වෙලා එන data:

export async function getServerSideProps() {  
  const res = await fetch('https://api.example.com/data')  
  const data = await res.json()  
 
  return { props: { data } }  
}

Static Site Generation (SSG) – Build time එකේ data ගන්න:

export async function getStaticProps() {  
  const res = await fetch('https://api.example.com/posts')  
  const posts = await res.json()  
 
  return { props: { posts } }  
}

🧪 API Routes – Built-in backend

Next.js එකෙන්ම ඔයාට backend routes දාන්න පුළුවන්. ඒකට pages/api/ folder එක use කරන්න.

Example – pages/api/hello.ts

export default function handler(req, res) {  
  res.status(200).json({ message: 'Hello from Next.js API!' })  
}

Browser එකෙන් බලන්න: http://localhost:3000/api/hello

📦 Deployment with Vercel (FREE!)

1. Push your project to GitHub
2. Visit vercel.com > Login with GitHub
3. Import your repo
4. Click Deploy

🎉 App එක live වෙලා තියෙනව globally – Free hosting!

🧑‍💻 Use Cases – What Can You Build?

• Personal portfolios
• Blog platforms (with MDX!)
• Company landing pages
• SaaS apps
• Dashboards
• AI tools (combine with APIs like Ollama, Supabase)

🖤 My Favorite Things in Next.js

• Image component – optimized, lazy-loaded
• App Router – introduced in Next 13+
• Middleware support
• API + Frontend in one
• Super SEO-friendly architecture

🏁 Conclusion

Next.js කියන්නේ React වලින් apps හදන අයට must-learn framework එකක්. මේකෙන් ඔයාට modern web apps easy & fast හදාගන්න පුළුවන්.

🔥 Stay Modern. Stay Fast. Code with Next.js ⚡