Next.js Explained
I’m Arjun Saxena, a passionate software developer specializing in web engineering. I believe in writing code that creates real solutions to real problems. I love building efficient, user-friendly applications and constantly push myself to learn new technologies. Beyond coding, I enjoy sharing knowledge and growing together with others in the tech community.
Modern React Framework for Real-World Applications (Beginner Friendly)
React is great for building UI, but Next.js takes React to production level.
It solves common problems like SEO, performance, routing, and backend APIs — all in one place.
In this blog, you’ll learn:
React vs Next.js (simple comparison)
SSG vs SSR (when to use what)
Dynamic routing & file-based navigation
API routes in Next.js
Server Actions (Next.js modern feature)
All explained in a very easy, example-based way.
React vs Next.js (Simple Difference)
Think of It Like This 🧠
React → UI library (building blocks)
Next.js → Full-featured framework (house + plumbing + electricity)
Key Differences
| Feature | React | Next.js |
| Routing | Manual (React Router) | File-based |
| SEO | Needs extra work | Built-in |
| Rendering | Client-side only | SSG, SSR, ISR |
| Backend | Separate server | Built-in API routes |
| Performance | Good | Excellent |
📌 Next.js is built on top of React, not a replacement.
Rendering in Next.js (Big Concept)
Before showing pages, Next.js decides where and when HTML is generated.
Two most important strategies:
SSG – Static Site Generation
SSR – Server-Side Rendering
SSG vs SSR (Very Important)
SSG – Static Site Generation 🏗️
What It Means
HTML is generated at build time
Same content for every user
Example: Blog Website 📝
/blog/how-nextjs-works
Content doesn’t change often
Very fast loading
Perfect for SEO
Why Use SSG?
✔ Super fast
✔ Cheap hosting
✔ Best for blogs, docs, landing pages
SSR – Server-Side Rendering ⚙️
What It Means
HTML is generated on every request
Content can be different per user
Example: Product Page 🛒
/product/iphone-15
Prices, stock, offers change
Needs fresh data
Why Use SSR?
✔ Always up-to-date data
✔ Good SEO
✔ Personalized pages
One-Line Rule
Static content → SSG | Dynamic content → SSR
File-Based Routing in Next.js 📂
No More Router Configuration
In Next.js, folder = route.
Example Folder Structure
app/
├─ page.js → /
├─ blog/
│ └─ page.js → /blog
├─ about/
│ └─ page.js → /about
✔ No router setup
✔ Clean & predictable
Dynamic Routing in Next.js 🔁
Used when URL changes based on data.
Example: Blog Posts
app/blog/[slug]/page.js
Now URLs like:
/blog/what-is-nextjs
/blog/ssg-vs-ssr
Accessing Dynamic Params
export default function BlogPage({ params }) {
return <h1>{params.slug}</h1>;
}
📌 Perfect for:
Blog posts
Product pages
User profiles
API Routes in Next.js 🔌
Backend Inside Frontend
Next.js allows you to create backend APIs inside the same project.
Example API Route
app/api/users/route.js
export async function GET() {
return Response.json({ users: ["Arjun", "Rahul"] });
}
Now this API is available at:
/api/users
✔ No Express needed
✔ Full-stack in one repo
Real-World Use of API Routes
Login & signup
Fetch data from database
Payment handling
Form submissions
Server Actions ⚡
Modern Way to Handle Server Logic
Server Actions allow you to:
Run server-side code directly from components
No need to:
Create separate API routes
Write fetch calls manually
Simple Server Action Example
"use server";
export async function addUser(formData) {
const name = formData.get("name");
// save to database
}
Using Server Action in Component
<form action={addUser}>
<input name="name" />
<button>Add</button>
</form>
✔ Cleaner
✔ More secure
✔ Less boilerplate
When to Use Server Actions?
✔ Form submissions
✔ Database operations
✔ Auth logic
✔ Server-only tasks
Typical Next.js Project Structure 🏗️
app/
├─ page.js
├─ layout.js
├─ api/
├─ blog/
└─ components/
When Should You Use Next.js?
Use Next.js if:
SEO matters
Performance matters
You want full-stack in one app
You’re building real-world products
