Interview Questions & Next.js Projects

Interviewers want clear trade-offs, not buzzwords. Practice saying why you chose Server Components, Auth.js, or ISR in a real project.

Common interview questions (with short answers)

Interviewers want clear trade-offs, not buzzwords. Practice saying why you chose Server Components, Auth.js, or ISR in a real project.

Real-life example: Interview answers are like explaining a cricket shot — not only "I hit a six," but footwork, timing, and why that shot vs a single.

What is the App Router? — File-system routing under app/ with layouts, Server Components by default, and nested UI.
Server vs Client Components? — Server Components fetch and render on the server with no client JS bundle cost; Client Components handle state, effects, and browser APIs after "use client".
What are Server Actions? — Async functions marked "use server" that run on the server, often from forms, without hand-writing a REST endpoint.
SSR vs SSG vs ISR? — SSR renders per request; SSG at build time; ISR revalidates static pages on a timer or tag after deploy.
How does next/image help? — Automatic sizing, lazy loading, and modern formats to improve LCP and reduce bytes.
How do you protect routes? — middleware/proxy redirects plus auth() checks in pages and Server Actions; never trust the client alone.
JWT vs database session? — JWT is stateless and hard to revoke early; DB sessions are revocable and need storage.
What is caching in Next fetch? — Default caching/revalidate options control Data Cache; use no-store for personalized data.
How do you do SEO in Next? — metadata / generateMetadata, semantic HTML, sitemap.ts, robots.ts, fast Core Web Vitals.
Middleware limitations? — Edge runtime limits; good for redirects and cookie checks, not heavy DB work or large dependencies.

Tip: For each answer, add one sentence from a project you built — "In my dashboard I used auth() in the layout and revalidateTag after updates."

Project ideas to practice

Ship small but complete apps. Deploy them. Write a README with screenshots and decisions.

Real-life example: Portfolio projects are tasting menus — three strong dishes beat a fridge full of unfinished leftovers.

Blog — MDX or CMS, generateMetadata, sitemap, tags, RSS optional
Dashboard — auth-protected routes, charts (lazy), Server Actions for settings
E-commerce mini — product list, cart in cookies/DB, checkout stub, image optimization
Auth app — Auth.js Google + credentials optional, role-based UI, middleware matcher

README checklist for a portfolio Next app

## Stack
- Next.js App Router, TypeScript, Tailwind
- Auth.js, MongoDB (or Postgres)

## Features
- [ ] Login + protected /dashboard
- [ ] CRUD for main resource
- [ ] Metadata + sitemap
- [ ] Deployed on Vercel

## What I learned
- When I used Server Actions vs Route Handlers
- How I handled caching and revalidation