1. #1

   Juniorfundamentals

   What is Next.js and what does it add on top of React?

   Next.js is a React framework adding file-based routing, server rendering, data fetching, bundling, and production optimisations out of the box.

2. #2

   Mid-levelroutingapp-router

   What is the difference between the App Router and the Pages Router?

   The App Router (app/) uses React Server Components, nested layouts, and streaming; the Pages Router (pages/) is the older client-centric model with getServerSideProps.

3. #3

   Mid-levelrenderingdata-fetching

   What is the difference between SSG, SSR, and ISR?

   SSG pre-renders at build time, SSR renders per request, and ISR serves static pages that revalidate and regenerate in the background on a schedule.

4. #4

   Mid-levelrscapp-router

   When should a component be a Server Component vs a Client Component in Next.js?

   Default to Server Components for data and static UI; add "use client" only where you need state, effects, browser APIs, or event handlers.

5. #5

   Mid-leveldata-fetchingcaching

   How does data fetching and caching work in the App Router?

   Server Components fetch with async/await; the extended fetch API caches by default and you control revalidation with cache options or the revalidate export.

6. #6

   Mid-levelapiapp-router

   What are Route Handlers in Next.js?

   Route Handlers are server endpoints defined in route.ts files that export HTTP-method functions (GET, POST) and return Web Response objects.

7. #7

   Mid-levelseometadata

   How do you manage SEO metadata in the App Router?

   Export a static metadata object or an async generateMetadata function from a page or layout; Next.js renders the corresponding head tags.

8. #8

   Mid-levelmiddlewareedge

   What is Next.js middleware used for?

   Middleware runs before a request completes, at the edge, to rewrite, redirect, or set headers/cookies — common for auth gating, locale, and A/B routing.

9. #9

   Seniormutationsapp-router

   What are Server Actions and how do they change mutations?

   Server Actions are async functions marked "use server" that run on the server and can be called from components/forms, removing the need for manual API endpoints.

10. #10

    Seniorstreamingperformance

    How do streaming and Suspense improve Next.js performance?

    The server streams ready HTML immediately and sends slower, Suspense-wrapped parts as they resolve, improving TTFB and perceived load time.