Server vs Client Component (5 min)
Given an app/profile/page.tsx screen with a button and local state, decide which file needs 'use client' and explain why in 2-3 lines.
Frontend / Knowledge library
Next.js
react framework for full-stack web apps
Why learn Next.js?
Next.js removes repetitive React infrastructure work by combining routing, rendering modes (SSR/SSG/ISR), backend endpoints, and performance defaults (images, fonts, code splitting) into one production-ready framework.
Where it came from
2016: Released by ZEIT (now Vercel) to simplify server-rendered React apps. 2019–2020: Static generation and Incremental Static Regeneration (ISR) became core capabilities. 2021: Next.js 12 introduced the SWC compiler and Edge Middleware. 2022: Next.js 13 introduced the App Router and React Server Components model. 2023+: App Router matured with stronger streaming, caching, and server-action workflows.
- 2016: Released by ZEIT (now Vercel) to simplify server-rendered React apps.
- 2019–2020: Static generation and Incremental Static Regeneration (ISR) became core capabilities.
- 2021: Next.js 12 introduced the SWC compiler and Edge Middleware.
- 2022: Next.js 13 introduced the App Router and React Server Components model.
- 2023+: App Router matured with stronger streaming, caching, and server-action workflows.
Build your understanding
Work through these exercises in order. Try the task before opening a reference.
- Given an app/profile/page.tsx screen with a button and local state, decide which file needs 'use client' and explain why in 2-3 lines.
- Create app/posts/[slug]/page.tsx that fetches a post by slug. If fetch fails, render notFound(). Keep UI to title + short body preview.
- Design a page that serves cached content but refreshes every 60 seconds. Briefly justify when ISR is better than full SSR for this case.
- Build app/api/notes/route.ts with GET and POST. Return JSON, validate required fields, and use proper HTTP status codes.
- You observe slow first load and large JS bundle. List 3 Next.js-specific fixes and map each fix to a measurable metric (LCP, TTFB, JS KB).
More ways to practice
Dynamic Route + 404 Handling (10 min)
Create app/posts/[slug]/page.tsx that fetches a post by slug. If fetch fails, render notFound(). Keep UI to title + short body preview.
ISR Strategy for a News Feed (12 min)
Design a page that serves cached content but refreshes every 60 seconds. Briefly justify when ISR is better than full SSR for this case.
Route Handler API Guard (12 min)
Build app/api/notes/route.ts with GET and POST. Return JSON, validate required fields, and use proper HTTP status codes.
Performance Triage (8 min)
You observe slow first load and large JS bundle. List 3 Next.js-specific fixes and map each fix to a measurable metric (LCP, TTFB, JS KB).
Documentation and sources
- Official Docs (nextjs.org)
- Learn Next.js (nextjs.org)
- App Router Docs (nextjs.org)
- Pages Router Docs (nextjs.org)
- Deploying on Vercel (nextjs.org)
Catalog research notes
- App Router is now the primary direction for new projects, with nested layouts and streaming-first UX.
- Turbopack development workflows continue to improve local build and refresh speed.
- Server Components patterns are more mainstream: server by default, client only when needed.
- Recent releases refined caching controls and async request handling in route logic.
- Ongoing alignment with newer React releases and modern TypeScript tooling remains a core focus.
Connect the ideas
Alternatives
Explore next
Real World Example
Unified Inventory Dashboard for Regional Logistics
A regional logistics firm managing distributed warehouse inventory across multiple time zones.
The business problem
The firm struggles with high latency and inconsistent data states when using separate frontend and backend services, leading to inventory synchronization errors during peak shipping hours.
How this topic solves it
By adopting the Next.js App Router, the firm can unify their frontend and backend logic into a single full-stack application, utilizing React Server Components to fetch inventory data directly on the server before rendering, thereby reducing client-side processing overhead.
- Initialize a new Next.js project using the App Router architecture.
- Create Server Components to interface directly with the centralized inventory database.
- Implement data fetching logic within the server-side components to ensure fresh state.
- Deploy the unified application to a single environment to maintain consistent routing and API handling.
This diagram illustrates how the App Router centralizes inventory requests.
User interface requesting inventory data
Executes Server Components and fetches data
Source of truth for stock levels
- Client Browser → Request Page → Next.js Server
- Next.js Server → Direct Query → Inventory Database
- Inventory Database → Return Data → Next.js Server
- Next.js Server → Rendered UI → Client Browser
Implementation example
This code demonstrates the App Router capability of fetching data directly within a component, mapping to the solution of unifying frontend and backend logic.
// Example of a Server Component fetching data directly
async function InventoryList() {
// Fetching data on the server avoids client-side API waterfalls
const data = await fetch('https://api.logistics.internal/stock');
const inventory = await data.json();
return <ul>{inventory.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}Expected business outcome
A more cohesive development workflow and improved data consistency, as the server-side logic eliminates the need for complex client-side state synchronization between disparate services.
Limitations and checks
The primary trade-off is the increased complexity of managing server-side execution environments; developers must monitor server logs and resource utilization to ensure that heavy data fetching does not block the main event loop.