📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Switch Guides
HTML5 Cheat Sheet CSS3 Cheat Sheet JavaScript ES6+ Bootstrap 5 PHP 8 Reference MySQL / SQL Git & GitHub Python 3 React.js Hooks Tailwind CSS Node.js Core Docker & Containers TypeScript MongoDB NoSQL Linux / Bash Redis GraphQL Regex Mastery Next.js 14+ Kubernetes (K8s)
Page Sections
Next.js Reference

Next.js 14+

App Router, Server Components, SSR/SSG, API routes, and data fetching.

All Topics

App Router Architecture

app/page.tsx
The default export of page.tsx is the UI for that route segment. Replaces pages/.
Example: app/dashboard/page.tsx → /dashboard route
layout.tsx
Shared UI wrapping child routes. Persists across navigations — doesn't re-render.
Example: app/dashboard/layout.tsx // wraps all /dashboard/* pages
loading.tsx / error.tsx
Automatic Suspense boundary / error boundary for the route segment.
Example: app/users/loading.tsx // shows skeleton while data loads
Route Groups (folder)
Folders in parentheses (group) organize routes without affecting URL structure.
Example: app/(marketing)/about/page.tsx → /about
[slug] / [[...slug]]
Dynamic segment / catch-all segments. Accessed via props.params.slug.
Example: app/posts/[id]/page.tsx → /posts/123
Parallel Routes @slot
Render multiple pages in the same layout simultaneously (dashboards, modals).
Example: app/@modal/(.)post/[id]/page.tsx // intercepting route modal

Server & Client Components

'use client'
Marks component as Client Component — runs in browser, can use hooks, events, browser APIs.
Example: 'use client'; export default function Counter() { const [c, setC] = useState(0); }
Server Component (default)
Renders on server only — can directly await DB/API calls, no bundle cost, no hooks.
Example: async function Page() { const data = await db.posts.findMany(); return <List data={data}/>; }
Passing Server → Client
Server components can only pass serializable props to Client components (no functions/classes).
Example: <ClientButton label={serverData.title} /> // string OK, fn NOT OK
'use server' (Server Actions)
Mark async functions as Server Actions — called from Client without writing API routes.
Example: 'use server'; export async function createPost(fd: FormData) { await db.insert(...) }
Suspense + streaming
Wrap async Server Components in Suspense to stream HTML progressively to the browser.
Example: <Suspense fallback={<Skeleton/>>}><SlowComponent/></Suspense>
taint API
Mark sensitive server objects/values so Next.js throws if they're passed to Client Components.
Example: experimental_taintObjectReference("No secrets client-side", secretObj)

Data Fetching & Caching

fetch(url, { cache })
Extended fetch with cache control. 'force-cache'=SSG, 'no-store'=SSR, next.revalidate=ISR.
Example: fetch('/api/posts', { next: { revalidate: 60 } }) // ISR every 60s
generateStaticParams()
Define which dynamic params to pre-render at build time (replaces getStaticPaths).
Example: export async function generateStaticParams() { return posts.map(p => ({slug: p.slug})) }
revalidatePath / revalidateTag
Purge cached data on-demand from Server Actions or Route Handlers.
Example: import { revalidatePath } from 'next/cache'; revalidatePath('/posts')
unstable_cache()
Cache the result of any async function (e.g. DB queries) with tags and TTL.
Example: const getPosts = unstable_cache(() => db.posts.findMany(), ['posts'], { tags: ['posts'], revalidate: 300 })
Request Memoization
Identical fetch() calls in a single render pass are automatically deduplicated by React.
Example: // Both calls below make only ONE HTTP request per render: await getUser(); await getUser();
cookies() / headers()
Read request cookies/headers in Server Components and Server Actions (dynamic APIs).
Example: import { cookies } from 'next/headers'; const token = cookies().get('token')

API Routes & Middleware

app/api/route.ts
Route Handlers — export GET, POST, PUT, DELETE functions directly. Replaces pages/api/.
Example: export async function GET(req: Request) { return Response.json({ ok: true }) }
NextRequest / NextResponse
Edge-compatible extensions of Request/Response with helpers for cookies, geo, etc.
Example: return NextResponse.redirect(new URL('/login', req.url))
middleware.ts (root)
Runs before every request on the Edge — for auth, redirects, A/B testing, geo-routing.
Example: export const config = { matcher: ['/dashboard/:path*', '/api/:path*'] }
Edge Runtime
Run routes/middleware at the CDN edge with minimal cold starts — faster globally.
Example: export const runtime = 'edge' // in route.ts or page.tsx

Optimization & Metadata

next/image <Image>
Automatic WebP/AVIF conversion, lazy loading, responsive sizes — zero CLS.
Example: <Image src="/hero.jpg" width={1200} height={630} alt="Hero" priority />
next/font
Zero-layout-shift font loading with automatic self-hosting and CSS variable injection.
Example: const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
generateMetadata()
Dynamic metadata (title, OG, twitter) per page — async, can fetch data.
Example: export async function generateMetadata({ params }) { return { title: (await getPost(params.slug)).title } }
next/link prefetch
Prefetches linked pages in viewport — near-instant navigation. Disable with prefetch={false}.
Example: <Link href="/about" prefetch={false}>About</Link>
Bundle Analyzer
Visualize bundle size with @next/bundle-analyzer to identify and eliminate large dependencies.
Example: ANALYZE=true npm run build // generates treemap HTML report
instrumentation.ts
Runs once when the Next.js server starts — wire up OpenTelemetry or monitoring SDKs.
Example: export async function register() { await setupTelemetry() }