Next.js Interview Questions

## 1. Learning Objectives By the end of this lesson, you will be able to answer common Next.js interview questions, explain architectural tradeoffs, debug production scenarios, and approach machine coding tasks with App Router patterns. Difficulty: Advanced. ## 2. Prerequisites - App Router fundamentals. - Rendering strategies. - Server and Client Components. - Data fetching, mutations, SEO, performance, and deployment. ## 3. Overview Next.js interviews usually test three things: whether you understand the framework model, whether you can make practical rendering and caching choices, and whether you can build a small feature cleanly under time pressure. ## 4. Why This Topic Matters Good answers show judgment. It is not enough to say "use SSR" or "use Server Components"; you need to explain why the choice fits data freshness, personalization, SEO, bundle size, and deployment constraints. ## 5. Real-World Analogy An interview is a code review with a stopwatch. The strongest answers are clear, scoped, and honest about tradeoffs. ## 6. Core Concepts | Area | What Interviewers Look For | |---|---| | Routing | File conventions, dynamic segments, layouts, route groups. | | Rendering | CSR, SSR, SSG, ISR, streaming, and partial static shells. | | Components | Server-first thinking and small client boundaries. | | Data | Server Component fetching, Route Handlers, Server Actions. | | Production | Metadata, performance, env vars, deployment, debugging. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The product page stays server-rendered for data, SEO, and bundle size. Only the cart button becomes a Client Component because it needs an event handler. ## 10. Interactive Playground Practice this timed flow: - 5 minutes: clarify requirements and sketch route structure. - 15 minutes: build the smallest working feature. - 5 minutes: add metadata, loading, and error handling. - 5 minutes: explain tradeoffs and follow-up improvements. ## 11. Common Mistakes | Mistake | Why It Hurts | Better Answer | |---|---|---| | Making everything a Client Component | Ships too much JavaScript. | Server-first, client islands for interaction. | | Using middleware as the only auth layer | Authorization can be bypassed or drift. | Recheck permissions near server data access. | | Caching personalized data globally | Leaks or stale user state. | Scope cache by user or keep dynamic. | | Ignoring metadata | Weak SEO and previews. | Use `metadata` or `generateMetadata`. | | Skipping production build | Misses static generation and type issues. | Run `npm run build`. | ## 12. Best Practices - Start by asking about freshness, personalization, SEO, and interaction. - Prefer Server Components for data and static UI. - Push `"use client"` down to the smallest interactive component. - Use Route Handlers for external APIs and webhooks. - Use Server Actions for form mutations inside the app. - Explain cache invalidation, not just cache creation. ## 13. Browser Compatibility | Topic | Browser Impact | Interview Framing | |---|---|---| | Server Components | Less browser JS | Better startup and lower hydration cost. | | Client Components | Hydrated interaction | Needed for events, state, and browser APIs. | | Streaming | Progressive UI | Improves perceived performance. | ## 14. Interview Questions **Easy:** What is the App Router? Answer: The routing system based on the `app` directory, using folders for route segments and files like `page.tsx`, `layout.tsx`, `loading.tsx`, and `route.ts`. **Easy:** What is a Server Component? Answer: A component that renders on the server by default in the App Router and can fetch data or use server-only resources without shipping its code to the browser. **Medium:** When should you use a Client Component? Answer: Use one for state, event handlers, effects, browser APIs, or client-only hooks. Keep it as small as possible. **Medium:** How do `layout.tsx` and `template.tsx` differ? Answer: Layouts persist across navigation and preserve state; templates remount on navigation and reset state. **Medium:** When would you use Route Handlers instead of Server Actions? Answer: Use Route Handlers for public APIs, webhooks, file uploads, and non-React clients. Use Server Actions for app-owned form and mutation flows. **Hard:** How would you choose between SSG, ISR, SSR, and streaming? Answer: Use SSG for stable public content, ISR for public content that changes periodically, SSR for request-specific or personalized data, and streaming when part of the page is slow but the shell can render early. **Hard:** How do you reduce a large Next.js bundle? Answer: Audit `"use client"` boundaries, move static heavy work to Server Components, lazy-load non-critical widgets, optimize package imports, and verify with analyzer/build output. **Hard:** How do you protect an authenticated dashboard? Answer: Use coarse middleware/proxy redirects if helpful, but enforce authorization inside Server Components, Server Actions, and Route Handlers before accessing user or tenant data. ## 15. Debugging Exercise Bug report: "The dashboard shows another workspace's data when a user changes the URL." Solution The page likely trusts route params without verifying membership. Resolve the authenticated user on the server, check workspace access before every query or mutation, and return `notFound()`, `forbidden()`, or redirect when access fails. ## 16. Practice Exercises - Easy: Explain Server vs Client Components in two minutes. - Medium: Design routes for a blog with tags and author pages. - Hard: Debug a stale product page after an inventory webhook. ## 17. Scenario-Based Challenge An ecommerce product page needs SEO, a live price, recommendations, reviews, and an Add to Cart button. How should you split the page? Walkthrough Render the product shell and SEO data on the server. Use cached or revalidated data for stable content, dynamic server fetching for live price if required, Suspense for slower recommendations/reviews, and a small Client Component for Add to Cart. ## 18. Quick Quiz 1. What directive creates a client boundary? Answer: `"use client"`. 2. What file defines an API endpoint in the App Router? Answer: `route.ts`. 3. What function prebuilds dynamic routes? Answer: `generateStaticParams`. 4. What function refreshes a path after mutation? Answer: `revalidatePath`. 5. What file shows a route loading state? Answer: `loading.tsx`. ## 19. Machine Coding Challenges | Challenge | Requirements | What to Watch | |---|---|---| | Blog engine | `/blog`, `/blog/[slug]`, metadata, tags, 404s. | Static params, stable slugs, metadata. | | Product catalog | `/products`, filters via search params, product detail, cart button. | Server-first data, client cart island. | | SaaS settings | Protected page, settings form, Server Action, revalidation. | Auth checks near data access. | | Docs site | Catch-all docs route, sidebar, search index, previous/next links. | Content registry and static generation. | ## 20. Cheat Sheet | Interview Prompt | Strong Signal | |---|---| | "Why App Router?" | File conventions, layouts, RSC, streaming, Route Handlers. | | "Why Server Components?" | Data close to source, secrets safe, less client JS. | | "Why Client Components?" | Interactivity, browser APIs, hooks. | | "How do you cache?" | Match cache scope to freshness and user boundaries. | | "How do you deploy?" | Build, env vars, platform behavior, logs. | ## 21. Further Reading - Next.js Docs: Server and Client Components. - Next.js Docs: Caching. - Next.js Docs: Upgrading. ## 22. Next Lesson Preview Next, you will take a final quiz that checks the whole Next.js course.