Next.js Advanced

Essential Git commands for everyday development — clone, commit, push, pull, and branch management.

Last Updated: May 2, 2026

Next.js advanced patterns: server components, streaming, ISR, middleware, route handlers, and App Router data fetching strategies.

Server vs Client Components

Server Component (default)	Client Component ('use client')
Runs on server, never ships JS	Runs in browser, hydrated on client
Can be async — fetch data directly	Must use hooks for data fetching
No hooks, event handlers, browser APIs	Full access to hooks, events, localStorage

loading.js

Per-route loading UI shown during page navigation.

error.js

Error boundary for a route segment.

React.Suspense

Stream parts of a page independently.

Method	Description
`fetch()` in server component	Next.js caches and deduplicates automatically
`cache: 'no-store'`	Opt out of fetch caching for dynamic data
`next: { revalidate: N }`	ISR — revalidate page every N seconds
`revalidatePath(path)`	On-demand revalidation from server action

middleware.ts

Runs before every request — auth checks, redirects, A/B testing.

route.ts

Build API endpoints inside the App Router.

Pro Tip: Deduplicate fetch requests by passing the same URL — Next.js caches identical fetches automatically.