Question 1

What is Next.js and what problems does it solve?

Accepted Answer

Next.js is a React framework for production that provides server-side rendering, static site generation, API routes, and automatic code splitting. It solves React's SEO limitations and simplifies building full-stack applications.

Question 2

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

Accepted Answer

Pages Router uses pages/ directory with file-based routing and getServerSideProps/getStaticProps. App Router uses app/ directory with React Server Components, layouts, and the new fetch-based data fetching pattern.

Question 3

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

Accepted Answer

SSR renders pages on every request for dynamic content. SSG pre-renders at build time for static content. ISR combines both—static pages that revalidate in the background after a specified interval.

Question 4

How does file-based routing work in Next.js?

Accepted Answer

Files in pages/ or app/ directory automatically become routes. page.js in app/about/ creates /about route. Dynamic routes use [param] brackets, catch-all routes use [...slug], and optional catch-all use [[...slug]].

Question 5

What are React Server Components in Next.js?

Accepted Answer

Server Components render on the server without sending JavaScript to the client. They can directly access databases, fetch data, and reduce bundle size. In App Router, all components are Server Components by default.

Question 6

How do you fetch data in the Next.js App Router?

Accepted Answer

Use async/await directly in Server Components with fetch(). Next.js extends fetch with caching and revalidation options. For client-side fetching, use useEffect or libraries like SWR and React Query.

Question 7

What is Incremental Static Regeneration (ISR)?

Accepted Answer

ISR allows static pages to update after deployment without rebuilding the entire site. Set revalidate time in fetch options or page config—Next.js regenerates pages in the background when they become stale.

Question 8

How does the Next.js Image component optimize images?

Accepted Answer

The Image component automatically resizes, optimizes formats (WebP/AVIF), lazy loads, and prevents layout shift. It serves appropriately sized images based on device viewport and supports blur placeholders.

Question 9

What is automatic code splitting in Next.js?

Accepted Answer

Next.js automatically splits code by route—each page only loads its required JavaScript. Shared dependencies are extracted into common chunks. Use dynamic imports with next/dynamic for component-level splitting.

Question 10

How do Route Handlers work in the App Router?

Accepted Answer

Route Handlers in app/api/ replace API routes. Create route.ts files that export HTTP method functions (GET, POST, PUT, DELETE). They support Web Request/Response APIs and streaming responses.

Question 11

What is middleware in Next.js and how do you use it?

Accepted Answer

Middleware runs before requests are completed. Create middleware.ts at project root to handle authentication, redirects, headers, or rewrites. Use the matcher config to specify which routes it applies to.

Question 12

How do you implement authentication in Next.js?

Accepted Answer

Use NextAuth.js (Auth.js) for OAuth, credentials, or magic links. Protect routes with middleware checking session cookies. For App Router, use server-side session checks in layouts or server components.

Question 13

What are parallel and intercepting routes?

Accepted Answer

Parallel routes (@folder) render multiple pages simultaneously in the same layout—useful for dashboards. Intercepting routes ((..)folder) show content in a modal while preserving the URL for direct navigation.

Question 14

How do you configure environment variables in Next.js?

Accepted Answer

Use .env.local for local secrets, .env for defaults. Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Server-only variables are only available in server code and API routes.

Question 15

What is the Link component and how does it improve performance?

Accepted Answer

The Link component enables client-side navigation between routes. It prefetches linked pages in the background, making navigation instant. Use it instead of anchor tags for internal links.

Next.js Fundamentals(4 questions)

What is Next.js and what problems does it solve?

What are the key features of Next.js?

What is the difference between Next.js and Create React App?

What is the difference between the Pages Router and the App Router in Next.js?

Testing and Debugging(3 questions)

How do you test Next.js applications?

What tools are available for debugging Next.js apps?

How do you handle errors in Next.js with error boundaries?

Routing(6 questions)

How does file-based routing work in Next.js?

What are dynamic routes and how do you create them?

How do you create catch-all routes in Next.js?

What are route groups and how do you use them in the App Router?

How do you create parallel routes in Next.js?

What are intercepting routes and when would you use them?

Rendering Strategies(6 questions)

What is the difference between SSR, SSG, and ISR in Next.js?

How does getStaticProps work and when would you use it?

How does getServerSideProps work and when would you use it?

What is Incremental Static Regeneration (ISR) and how do you implement it?

What are React Server Components and how does Next.js use them?

What is the default rendering behavior in the App Router?

Data Fetching(5 questions)

How do you fetch data in Next.js App Router?

What is the difference between fetching data in Server Components vs Client Components?

How does Next.js handle request memoization?

What are the caching strategies available in Next.js?

How do you revalidate cached data in Next.js?

API Routes(4 questions)

How do you create API routes in Next.js?

What is the difference between API routes in Pages Router vs Route Handlers in App Router?

How do you handle different HTTP methods in Route Handlers?

What are middleware functions and how do you use them?

Performance Optimization(5 questions)

How does Next.js optimize images with the Image component?

What is automatic code splitting in Next.js?

How does Next.js handle font optimization?

What is the Link component and how does it improve performance?

How do you implement lazy loading in Next.js?

Styling(3 questions)

What styling options are available in Next.js?

How do you use CSS Modules in Next.js?

How do you configure Tailwind CSS with Next.js?

Deployment and Configuration(4 questions)

How do you deploy a Next.js application?

What is the difference between static export and server deployment?

How do you configure environment variables in Next.js?

What is the next.config.js file used for?

Authentication and Security(3 questions)

How do you implement authentication in Next.js?

What are the best practices for securing API routes?

How do you handle CORS in Next.js?