Learning Next.jsRouting & Rendering
A learning project covering Next.js fundamentals, App Router, layouts, dynamic routing, data loading, image optimization, metadata, rendering, hydration, and Server & Client Components.
What I Learned
Next.js Concepts
Concepts and features practiced while learning Next.js fundamentals and rendering.
Pages & Routing
Create pages, understand file-based routing, and navigate between routes using Next.js Link.
Layouts
Build basic layouts, dynamic layouts, and nested layouts for different sections of an application.
Dynamic Routing
Create dynamic routes and use route parameters to display individual blog details.
Data Loading
Load data and display dynamic content such as blog posts and food details.
Image Optimization
Use the Next.js Image component to optimize and display images efficiently.
Metadata & Not Found
Work with custom metadata, not-found pages, and better page experiences.
CSR & SSR
Understand Client-Side Rendering, Server-Side Rendering, and how Next.js renders pages.
Hydration
Understand how React hydration connects server-rendered HTML with client-side React. Client component inside Server component.
Server & Client Components
Learn the difference between Server Components and Client Components in Next.js.
Rendering Fundamentals
Understanding How Next.js Renders
This section of the project focuses on understanding how rendering works in modern web applications and how Next.js uses Server and Client Components.
CSR
Client-Side Rendering and loading data inside Client Components.
SSR
Server-Side Rendering and understanding how content can be rendered on the server.
Hydration
Understanding how React connects server-rendered HTML with client-side behavior.
Dynamic Blog System
Practice dynamic routing, route parameters, data loading, layouts, images, metadata, and blog detail pages.
View blogs →Food Details
Practice loading data with Client Components and displaying dynamic food details.
View foods →