Q1. Explain SSR, SSG, ISR and CSR in Next.js.
These describe when HTML is produced. CSR ships a minimal shell plus a JS bundle; the browser fetches data and renders, so first paint is slower and SEO weaker, but navig...
Technical Question Bank · Peer-Reviewed
Job Interview Questions and Answers Directory
Search and filter frequently asked interview questions across technical, programming, and behavioral domains. Tailor your interview preparation by difficulty for freshers or experienced developers (188 available).
Active:
Tag: nextjs ×
Q2. What are the main differences between the App Router and the Pages Router?
The Pages Router uses files under pages/. Each file exports a default component, data comes from getStaticProps, getServerSideProps or getStaticPaths, and _app and _docum...
Q3. What is the difference between Server Components and Client Components?
In the App Router components are Server Components by default. They run only on the server, can be async, can read databases or secrets directly, and send no JavaScript t...
Q4. How does data fetching and caching work in the App Router?
You fetch inside async Server Components using the extended fetch: ```ts const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60, tags: ['posts'...
Q5. How do dynamic routes and generateStaticParams work?
Dynamic segments use bracket folders: app/blog/[slug]/page.tsx receives params as a prop, which is a Promise in recent versions. Catch-all routes use [...slug] and option...
Q6. What are Route Handlers and how do they differ from API Routes?
Route Handlers live in app/api/.../route.ts and export HTTP-method functions such as GET, POST, PUT, DELETE and PATCH. They receive a standard Request and return a Respon...
Q7. How do you handle metadata and SEO in the App Router?
You export a static metadata object or a generateMetadata async function from a layout or page. It can set title, description, canonical URL, Open Graph, Twitter cards an...
Q8. What is Next.js middleware and when should you use it?
Middleware in middleware.ts at the project root runs before a request is completed, on the Edge runtime, and can rewrite, redirect, set headers or return a response direc...
Q9. How do the different Next.js caches and revalidation layers work?
Next.js has several cache layers. The Data Cache stores individual fetch results and can be tagged. The Full Route Cache stores rendered HTML and RSC payloads for static ...
Q10. What causes hydration mismatches and how do you fix them?
Hydration is React attaching event handlers to server-rendered HTML. A mismatch happens when the server HTML differs from the client's first render, and React warns and r...