React is a powerful library for building user interfaces, but modern web applications require many additional features beyond UI.
Examples include:
Instead of building all of these manually, developers use React frameworks.
Today, the most popular React framework is Next.js.
This module introduces modern React development using Next.js App Router.
A traditional React application usually requires installing many additional libraries for common features.
Examples include:
Next.js provides many of these features out of the box, making development faster and more organized.
Next.js is a React framework developed by Vercel.
It extends React with powerful built-in features for creating modern web applications.
Unlike React, which focuses only on building user interfaces, Next.js provides a complete application framework.
Some of the most important features include:
These features reduce the amount of configuration developers need to perform.
Create a new project using:
npx create-next-app@latest
After installation, the project structure looks similar to:
app/
│
├── page.tsx
├── layout.tsx
├── about/
│ └── page.tsx
│
├── dashboard/
│ └── page.tsx
│
└── api/
The app directory is the heart of modern Next.js applications.
Modern versions of Next.js use the App Router.
The App Router is based on the app/ directory.
Instead of manually defining routes, the folder structure automatically becomes your application's routing system.
The App Router provides several advantages:
It simplifies project organization while improving scalability.
app/
│
├── page.tsx
├── about/
│ └── page.tsx
│
└── contact/
└── page.tsx
Each folder automatically becomes a route.
Next.js uses File-Based Routing.
This means folders and files determine the application's URLs.
Example:
app/page.tsx
becomes
/
and
app/about/page.tsx
becomes
/about
No separate routing configuration is required.
Layouts provide shared UI across multiple pages.
A typical layout contains:
Navbar
│
▼
Page Content
│
▼
Footer
Instead of repeating the same UI on every page, layouts allow it to be defined once.
export default function Layout({
children
}) {
return (
<html>
<body>
{children}
</body>
</html>
);
}
The children prop represents the content of each page.
One of the biggest features of modern Next.js is Server Components.
By default:
Every Component
│
▼
Server Component
Server Components execute on the server before the page is sent to the browser.
A Server Component runs entirely on the server.
Flow:
Server
│
▼
Render HTML
│
▼
Send HTML To Browser
The browser receives ready-to-display HTML.
Advantages include:
Because less JavaScript is sent to the browser, pages often load faster.
export default async function Users() {
const users =
await getUsers();
return (
<div>
{users.length}
</div>
);
}
Since this component runs on the server, it can fetch data directly.
Some features require JavaScript running in the browser.
Examples include:
These require a Client Component.
Add the directive:
"use client";
at the top of the file.
"use client";
import {
useState
}
from "react";
export default function Counter() {
const [
count,
setCount
] = useState(0);
return (
<button
onClick={() =>
setCount(
count + 1
)
}
>
{count}
</button>
);
}
This component executes in the browser because it uses React Hooks.
| Feature | Server Component | Client Component |
|---|---|---|
| Runs On | Server | Browser |
| useState | No | Yes |
| useEffect | No | Yes |
| SEO | Excellent | Good |
| Bundle Size | Smaller | Larger |
Next.js automatically creates routes from folders.
Example:
app/
│
├── page.tsx
├── about/
│ └── page.tsx
│
└── products/
└── page.tsx
Creates:
/
/about
/products
Dynamic routes allow pages to display different content based on URL parameters.
Example URLs:
/products/1
/products/2
/products/3
Folder structure:
app/products/[id]/page.tsx
The folder name inside square brackets becomes the parameter.
export default function Product({
params
}) {
return (
<h1>
{params.id}
</h1>
);
}
If the URL is:
/products/10
then
params.id = "10"
Navigate between pages using the built-in Link component.
import Link
from "next/link";
<Link href="/about">
About
</Link>
Unlike a normal HTML link, this enables fast client-side navigation.
Modern Next.js greatly simplifies data fetching.
Instead of using useEffect, data can often be fetched directly inside a Server Component.
const res =
await fetch(
"https://api.com/users"
);
const users =
await res.json();
export default async function Page() {
const data =
await fetchData();
return (
<div>
{data.name}
</div>
);
}
The page waits for the data before rendering.
Server-side data fetching provides:
Next.js includes built-in caching support.
Data can be:
Example:
await fetch(url, {
next: {
revalidate: 60
}
});
This refreshes cached data every 60 seconds.
Next.js can function as both:
Frontend
+
Backend
API endpoints are created inside the app/api directory.
Example:
app/api/users/route.ts
export async function GET() {
return Response.json({
success: true
});
}
export async function POST() {
return Response.json({
message:
"Created"
});
}
Client
│
▼
API Route
│
▼
Database
│
▼
Response
This allows Next.js to handle backend logic without requiring a separate server.
Middleware runs before a request is completed.
It can inspect or modify requests.
Common use cases include:
middleware.ts
import {
NextResponse
}
from "next/server";
export function middleware() {
return NextResponse.next();
}
This simply allows the request to continue.
Authentication verifies a user's identity.
Common examples include:
Some popular options include:
User Login
│
▼
Authentication
│
▼
Session Created
│
▼
Access Protected Pages
Protected routes restrict access to authenticated users.
Examples include:
/dashboard
/settings
/admin
Only authorized users can access these pages.
Once development is complete, the application must be deployed.
The most popular hosting platform is Vercel, the company behind Next.js.
After pushing code:
git push
Vercel automatically:
Besides Vercel, applications can also be deployed using:
A common production architecture is:
Next.js
│
▼
App Router
│
▼
Server Components
│
▼
API Routes
│
▼
Database
app/
│
├── page.tsx
├── layout.tsx
├── dashboard/
│ └── page.tsx
│
├── products/
│ └── [id]/
│ └── page.tsx
│
├── api/
│ └── users/
│ └── route.ts
│
└── middleware.ts
This structure organizes pages, layouts, APIs, and middleware in one project.
Throughout this course, our primary focus will be:
These are the core technologies used in modern React and Next.js applications.
Prefer the App Router for all new Next.js projects.
Only use Client Components when browser features such as state or event handlers are required.
Organize routes using folders instead of manual route configuration.
Whenever possible, fetch data inside Server Components for better performance and SEO.
Place navigation bars, footers, and shared UI inside layouts to avoid code duplication.
Handle server-side operations such as authentication and database access inside API routes.
| Concept | Purpose |
|---|---|
| Next.js | React Framework |
| App Router | Modern Routing System |
| Server Component | Runs on Server |
| Client Component | Runs in Browser |
| Routing | Navigation |
| Data Fetching | Retrieve Data |
| API Routes | Backend Endpoints |
| Middleware | Request Processing |
| Authentication | User Verification |
| Deployment | Publish Application |
Modern React development is increasingly centered around Next.js.
Next.js
│
▼
App Router
│
▼
Server Components
│
▼
API Routes
│
▼
Authentication
│
▼
Deployment
Next.js has become the standard framework for building scalable, SEO-friendly, and full-stack React applications.
By combining React with built-in routing, server rendering, API routes, and deployment support, Next.js allows developers to build modern web applications with less configuration and better performance.