1. What is Next.js?
BeginnerAnswer: React framework for production with SSR and SSG
Next.js is a React framework that provides server-side rendering, static site generation, routing, and other production features out of the box.
All interview guides
Next.js Interview Questions and Answers
24 questions that come up in Next.js technical interviews, each with the answer and an explanation of why it is right.
Test yourself — 90 question bank2. What is the App Router (Next.js 13+)?
AdvancedAnswer: New routing based on app directory with Server Components
App Router (Next.js 13+) uses app directory with React Server Components, streaming, nested layouts. Co-exists with pages router.
3. How do you create an API route?
IntermediateAnswer: Create file in pages/api with handler function
Create a file in pages/api. Export default function: export default function handler(req, res) { res.status(200).json() }.
4. What are Client Components?
AdvancedAnswer: Components marked with 'use client' directive
Client Components use client JS and interactivity. Mark with 'use client' directive at top. Required for hooks, events, browser APIs.
5. What is the layout.js file?
AdvancedAnswer: Shared UI wrapping route segments in App Router
layout.js in App Router wraps route segments. Nested layouts possible. State preserved during navigation. Root layout wraps entire app.
6. What is dynamic routing?
IntermediateAnswer: Routes with parameters using [param] syntax
Dynamic routes use [param] syntax. pages/post/[id].js matches /post/1, /post/2, etc. Access via useRouter or context.params.
7. How do you create a catch-all route?
IntermediateAnswer: Use [...slug].js
Catch-all routes use [...slug].js. Matches /post/a, /post/a/b, /post/a/b/c. params.slug is array. Optional: [[...slug]].js.
8. What is the purpose of _document.js?
BeginnerAnswer: Customizes HTML document structure
_document.js customizes the HTML document structure (html, head, body tags). Used for custom fonts, meta tags, and scripts.
9. What is the error.js file in App Router?
AdvancedAnswer: Error boundary wrapping route segments
error.js defines error boundary for route segment. Catches errors in Server Components. Must be Client Component with 'use client'.
10. How do you navigate between pages?
BeginnerAnswer: Use Link component from next/link
Use the Link component from next/link for client-side navigation: <Link href="/about">About</Link>. Provides prefetching.
11. What is streaming in Next.js?
AdvancedAnswer: Progressively renders UI as it becomes ready
Streaming progressively renders and sends UI to client as it becomes ready. Improves perceived performance. Built into App Router.
12. What is the Suspense component used for?
AdvancedAnswer: Shows fallback while async component loads
Suspense shows fallback UI while async component loads. Enables streaming and granular loading states. Core to App Router.
13. How do you programmatically navigate?
IntermediateAnswer: Use router.push()
Use router.push('/path') for programmatic navigation. router.replace() for replacing history. Get router from useRouter().
14. What is Route Groups in App Router?
AdvancedAnswer: Route organization without affecting URL using (folder)
Route Groups organize routes without affecting URL. Use (folder) syntax. Example: (marketing) and (shop) groups, but URLs have no prefix.
15. What is SSG in Next.js?
BeginnerAnswer: Static Site Generation
SSG (Static Site Generation) pre-renders pages at build time. HTML generated once, reused on each request. Best for performance.
16. What is SSR in Next.js?
BeginnerAnswer: Server-Side Rendering
SSR (Server-Side Rendering) generates HTML on each request on the server. Fresh data on every request but slower than SSG.
17. What is the revalidate option?
IntermediateAnswer: Seconds to wait before regenerating page (ISR)
revalidate in getStaticProps enables ISR. Value is seconds to wait before regenerating: revalidate: 60 regenerates at most once per minute.
18. What is parallel routing?
AdvancedAnswer: Renders multiple pages in same layout simultaneously
Parallel routing renders multiple pages simultaneously in same layout. Use @folder slots. Enables complex layouts like dashboards.
19. What is route handlers in App Router?
AdvancedAnswer: Custom request handlers like API routes
Route handlers are custom request handlers in app directory. Use route.js with GET, POST, etc. exports. Replaces API routes.
20. What is shallow routing?
IntermediateAnswer: Changes URL without re-running data fetching
Shallow routing changes URL without re-running getStaticProps, getServerSideProps. Use router.push(url, as, { shallow: true }).
21. What is the fallback option in getStaticPaths?
IntermediateAnswer: Controls behavior for paths not generated at build
fallback controls non-pre-rendered paths. false: 404. true: render fallback then static. 'blocking': wait for generation. Used with getStaticPaths.
22. What is metadata in App Router?
AdvancedAnswer: SEO metadata defined via metadata object or generateMetadata
Metadata defines SEO tags via metadata object or generateMetadata function. Automatically merges and deduplicates. Replaces Head component.
23. What are redirects in Next.js?
IntermediateAnswer: URL redirects configured in next.config.js
Redirects in next.config.js map old paths to new ones. Support permanent and temporary redirects. Example: redirects: async () => [{ source, destination, permanent }].
24. What are rewrites?
IntermediateAnswer: Map URLs to different destinations without changing browser URL
Rewrites proxy requests to different URLs without browser seeing it. Configured in next.config.js. Useful for API proxying.
Ready to test yourself?
The full Next.js bank has 90 questions across 3 difficulty levels — timed, shuffled, and scored.
Take the Next.js quiz