A hands-on Next.js learning project focused on App Router, routing, rendering, data loading, Server & Client Components, image optimization, metadata, and modern Next.js fundamentals.
This repository documents my journey through the Next.js Foundation, Routing, and Rendering Basics modules.
Instead of learning concepts only through theory, I implemented them through small features, reusable components, dynamic routes, data-driven pages, and practical UI experiences.
The project focuses on understanding how Next.js works behind the scenes while building with the modern App Router architecture.
💡 Learning Philosophy:
Learn the concept → Build it → Break it → Understand it → Improve it.
This repository contains both practical implementations and learning notes from my Next.js journey.
| Resource Notes | Description | Live Link |
|---|---|---|
| 🧭 Routing | Pages, layouts, navigation, dynamic routes, and route handling | View |
| 📘 Rendering | CSR, SSR, hydration, Server Components, Client Components, and data loading | View |
🧠 Learn the concept → Build it → Experiment → Understand it
|
|
|
|
| # | Topic | Focus |
|---|---|---|
| 01 | ⚡ Next.js Fundamentals | What Next.js is and why it is used |
| 02 | 🏗️ Next.js Project Structure | Understanding the App Router structure |
| 03 | 🧭 Pages & Routing | Creating routes with folders |
| 04 | 🔗 Navigation | Using Link for client-side navigation |
| 05 | 🧩 Layouts | Shared UI with layout.tsx |
| 06 | 🪆 Nested Layouts | Creating layouts for specific route segments |
| 07 | 🧬 Dynamic Routing | Building routes with [id] parameters |
| 08 | 📝 Dynamic Blog Pages | Rendering pages from data |
| 09 | 🚫 Not Found Pages | Handling missing routes and resources |
| 10 | 🖼️ Image Optimization | Working with the Next.js Image component |
| 11 | 🌐 Remote Images | Configuring external image sources |
| 12 | 🔍 Metadata | Adding SEO-friendly page metadata |
| 13 | ⚙️ Dynamic Metadata | Using generateMetadata() |
| 14 | 🖥️ Server Components | Understanding server-side components |
| 15 | 💻 Client Components | Using "use client" for interactivity |
| 16 | 🔄 CSR vs SSR | Understanding rendering strategies |
| 17 | 💧 Hydration | Understanding server/client synchronization |
| 18 | 📡 Data Fetching | Loading API data in Next.js |
| 19 | 🍔 Data-Driven Food Pages | Building listing and dynamic detail pages |
| 20 | 🧪 use() API |
Exploring modern React data loading |
NEXT.JS
│
┌──────────────┴──────────────┐
│ │
ROUTING RENDERING
│ │
┌──────┼──────┐ ┌──────┼──────┐
│ │ │ │ │ │
Static Dynamic Layouts CSR SSR Hydration
│ │ │ │ │ │
└──────┴──────┘ └──────┴──────┘
│ │
└──────────────┬──────────────┘
│
DATA FETCHING
│
┌──────┴──────┐
│ │
Server Client
Fetching Loading
│ │
└──────┬──────┘
│
UI + SEO
│
┌─────────┴─────────┐
│ │
Metadata Images
│ │
└─────────┬─────────┘
│
🚀 NEXT.JS APP
A dedicated blog section demonstrates:
- Static blog data
- Dynamic blog routes
- Blog detail pages
- Dynamic metadata
- Custom Not Found handling
- Reusable post components
The users section demonstrates dynamic routing and external API data.
/users
│
├── User 1
├── User 2
├── User 3
│
└── /users/[userId]
│
└── User Details
The food section demonstrates a more complete data-driven experience.
Food API
│
▼
lib/foods.ts
│
├───────────────┐
▼ ▼
Foods Page Food Details
│ │
FoodCard [foodId]
│
▼
notFound()
│
▼
Food Not Found UI
The food feature demonstrates:
- API data fetching
- Shared data functions
- Dynamic routes
- Dynamic metadata
- Food cards
- Food details
notFound()- Remote images
- Responsive UI
This project explores the Next.js Image component and its important properties.
<Image
src={food.image_link}
alt={food.dish_name}
fill
sizes="(max-width: 768px) 100vw, 50vw"
/>Concepts explored:
Image
├── src
├── alt
├── width / height
├── fill
├── sizes
├── priority
├── loading
├── quality
├── placeholder
└── blurDataURL
The project also explores Next.js metadata APIs.
export const metadata = {
title: "About",
description: "About my Next.js learning journey",
};export async function generateMetadata({
params,
}) {
const food = await getFoodById(params.foodId);
return {
title: food?.dish_name ?? "Food Not Found",
};
}One of the key concepts explored in this project is the relationship between Server and Client Components.
Dashboard
│
┌─────────┴─────────┐
│ │
Server Component Client Component
│ │
Server UI useState()
Data Fetching onClick()
Metadata Interactivity
const DashboardPage = async () => {
const data = await fetchData();
return <Dashboard data={data} />;
};"use client";
const Counter = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
};app/
├── about/
│ ├── image/
│ │ └── component/
│ └── page.tsx
│
├── blogs/
│ ├── [postId]/
│ │ └── page.tsx
│ ├── layout.tsx
│ ├── not-found.tsx
│ └── page.tsx
│
├── foods/
│ ├── [foodId]/
│ │ └── page.tsx
│ ├── not-found.tsx
│ └── page.tsx
│
├── users/
│ ├── [userId]/
│ │ └── page.tsx
│ └── page.tsx
│
├── dashboard/
│ └── page.tsx
│
├── not-found.tsx
├── layout.tsx
└── page.tsx
components/
├── FoodCard.tsx
├── NavLink.tsx
└── ...
lib/
└── foods.ts
types/
└── food.ts
| Technology | Purpose |
|---|---|
| ⚡ Next.js | React framework & App Router |
| ⚛️ React | UI development |
| 🔷 TypeScript | Type-safe development |
| 🎨 Tailwind CSS | Responsive styling |
| 🌐 Fetch API | Data fetching |
| 🖼️ Next/Image | Image optimization |
| 🔍 Metadata API | SEO & page metadata |
| 🧭 App Router | Routing & layouts |
| 📡 REST APIs | External data |
| 🎯 Daisy UI | Interface visuals |
The project uses a modern dark interface with:
- 🌑 Dark slate surfaces
- 💗 Pink accents
- 💜 Violet gradients
- 🟠 Orange highlights
- 🧊 Glassmorphism
- ✨ Subtle hover effects
- 📱 Mobile-first layouts
- 🧩 Reusable components
- 🎯 Consistent spacing
- 🖼️ Responsive image layouts
Slate Background
↓
Glass Surface
↓
Pink / Violet Accent
↓
Soft Glow
↓
Micro Interaction
↓
Premium UI
git clone https://github.com/marleyDip/Programming-Hero_Milestone-06_Module-33-34_Next.js-Foundation-Routing-and-Rendering-Basics.gitcd Programming-Hero_Milestone-06_Module-33-34_Next.js-Foundation-Routing-and-Rendering-Basicsnpm installnpm run devhttp://localhost:3000
Module 33
│
├── ✅ Next.js Fundamentals
├── ✅ App Structure
├── ✅ Routing
├── ✅ Navigation
├── ✅ Layouts
├── ✅ Dynamic Routes
├── ✅ Image Optimization
├── ✅ Not Found
├── ✅ Metadata
└── ✅ Google Fonts
Module 34
│
├── ✅ Rendering
├── ✅ CSR / SSR
├── ✅ Hydration
├── ✅ Server Components
├── ✅ Client Components
├── ✅ Data Loading
├── ✅ Dynamic Data
└── ✅ React use() API
The goal of this project is not simply to build another website.
It is to understand the fundamentals of modern Next.js development by implementing each concept in a practical way.
Learn
↓
Understand
↓
Implement
↓
Experiment
↓
Debug
↓
Refactor
↓
Build Better
Passionate about building modern, scalable, and user-focused web applications while continuously improving JavaScript, TypeScript, React, problem-solving, and full-stack development skills.
If you find this learning journey useful, feel free to explore the repository and follow along.
