Next JS Interview Questions & Answers | Preplance

1. What is Next.js?

Difficulty: EasyType: MCQTopic: Next.js Introduction

A React framework for building full-stack web applications with server-side capabilities
A CSS framework for styling React components
A state management library like Redux
A testing library for React

Next.js is a React framework that provides features like server-side rendering, static site generation, file-based routing, API routes, and built-in optimizations for building production-ready web applications. It extends React with backend capabilities, eliminates complex configuration, and provides excellent developer experience with features like fast refresh and automatic code splitting. Next.js is maintained by Vercel and has become one of the most popular frameworks for building modern React applications.

Correct Answer: A React framework for building full-stack web applications with server-side capabilities

2. What is a key difference between Next.js and Create React App?

Difficulty: EasyType: MCQTopic: Next.js vs React

3. How does routing work in Next.js Pages Router?

Difficulty: EasyType: MCQTopic: File-based Routing

Routes are automatically created based on the file structure in the pages directory
You must manually configure routes in a routes.js file
Routing requires installing React Router
Routes are defined in package.json

Next.js uses file-based routing where every file in the pages directory automatically becomes a route, with the file path mapping to the URL path without requiring any configuration. For example, pages/about.js creates the /about route, and pages/blog/post.js creates /blog/post. This convention-over-configuration approach simplifies routing, makes the application structure intuitive, and eliminates the need for route configuration files.

Correct Answer: Routes are automatically created based on the file structure in the pages directory

4. Why should you use the Next.js Link component instead of an anchor tag?

Difficulty: EasyType: MCQTopic: Link Component

Link provides client-side navigation with prefetching for better performance
Anchor tags don't work in Next.js
Link is required by Next.js to work
Anchor tags cause security issues

The Link component enables client-side navigation between pages without full page reloads, making navigation instant and preserving application state, and it automatically prefetches linked pages in the viewport for even faster navigation. Using regular anchor tags causes full page refreshes, losing the benefits of React's virtual DOM and client-side routing. Link also handles scroll position, supports route transitions, and provides better performance through code splitting and prefetching strategies.

Correct Answer: Link provides client-side navigation with prefetching for better performance

5. What does the Next.js Image component automatically provide?

Difficulty: MediumType: MCQTopic: Image Optimization

Automatic image optimization, lazy loading, and responsive images
Only image compression
Just lazy loading
Only format conversion

The Next.js Image component automatically optimizes images by serving them in modern formats like WebP, resizing images for different screen sizes, lazy loading images as they enter the viewport, and preventing Cumulative Layout Shift with automatic size handling. It optimizes images on-demand rather than at build time, serves appropriately sized images for each device, and can work with both local and remote images. This dramatically improves page load performance and Core Web Vitals scores without manual intervention.

Correct Answer: Automatic image optimization, lazy loading, and responsive images

6. What is the purpose of the Head component in Next.js Pages Router?

Difficulty: EasyType: MCQTopic: Head Component

To modify the HTML head section and add meta tags for SEO
To create page headers with navigation
To style the top of the page
To manage user authentication

The Head component from next/head allows you to modify the HTML head element to add meta tags, title tags, Open Graph tags, canonical URLs, and other metadata important for SEO and social media sharing. You can use Head in any page or component, and if multiple components render the same meta tag, the last one wins. This makes it easy to customize metadata per page without touching the HTML template directly.

Correct Answer: To modify the HTML head section and add meta tags for SEO

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

Difficulty: MediumType: MCQTopic: App vs Pages Router

App Router uses React Server Components and the app directory
Pages Router is faster than App Router
App Router doesn't support routing
They are exactly the same

App Router introduced in Next.js 13 uses the app directory and leverages React Server Components as the default, allowing components to run on the server and stream rendering, while Pages Router uses the traditional pages directory with client-side React components. App Router provides better performance through streaming and partial rendering, improved layouts and templates system, built-in loading and error states, and more granular data fetching. Both routers can coexist in the same project during migration.

Correct Answer: App Router uses React Server Components and the app directory

8. How do you create a dynamic route in Next.js Pages Router?

Difficulty: MediumType: MCQTopic: Dynamic Routes

Use square brackets in the filename like [id].js
Use curly braces in the filename like {id}.js
Use parentheses in the filename like (id).js
Use angle brackets in the filename like <id>.js

Dynamic routes are created by wrapping the dynamic segment name in square brackets in the filename, like pages/blog/[slug].js which matches /blog/hello, /blog/world, etc, and the dynamic value is accessible through the router query object. You can also create catch-all routes with [...slug].js that match multiple segments, or optional catch-all with [[...slug]].js. This pattern enables creating pages for dynamic content like blog posts, user profiles, or product pages without manually creating files for each route.

Correct Answer: Use square brackets in the filename like [id].js

9. What are the main advantages of using Next.js over a plain React application?

Difficulty: EasyType: SubjectiveTopic: Next.js Benefits

Next.js provides server-side rendering and static site generation out of the box for better SEO and faster initial page loads, eliminates the need for configuring routing with its file-based system, includes built-in API routes for creating backend endpoints, and offers automatic code splitting and optimization for better performance. It also provides excellent developer experience with Fast Refresh for instant feedback, automatic TypeScript support, built-in CSS and Sass support, and powerful Image and Script components that optimize assets automatically. These features make Next.js production-ready without extensive configuration, whereas plain React requires adding multiple libraries and custom setup to achieve similar capabilities.

10. Explain the typical folder structure of a Next.js application and the purpose of key directories.

Difficulty: MediumType: SubjectiveTopic: Project Structure

A typical Next.js project has a pages or app directory for routes, public directory for static assets served at the root URL like images and fonts, components directory for reusable React components, styles directory for CSS files, and lib or utils for utility functions. The pages/_app.js file wraps all pages and is used for global styles and providers, while pages/_document.js customizes the HTML document structure. The public folder content is accessible at the root path, so public/logo.png is available at /logo.png. In App Router projects, the app directory contains page.js, layout.js, loading.js, and error.js files that define routes and their UI states.

11. How do you use the Link component in Next.js and what props does it accept?

Difficulty: EasyType: SubjectiveTopic: Link Component Usage

You import Link from next/link and wrap it around any clickable element, passing the href prop with the destination path like Link href='/about' Go to About Link. The Link component accepts props like href for the destination, prefetch to control prefetching behavior (enabled by default), replace to replace the current history entry instead of adding new one, scroll to control scrolling to top after navigation, and shallow for client-side routing without re-running data fetching methods. The child can be any element and will receive the onClick handler automatically, and you can style the child element normally while Link handles the routing logic.

12. What are the key props of the Next.js Image component and when should you use each?

Difficulty: MediumType: SubjectiveTopic: Image Component Deep Dive

The Image component requires src for the image path, alt for accessibility, and either width and height for static images or fill for responsive containers. Use priority prop for images to prevent lazy loading, quality to control compression (default 75), placeholder with blur for loading states that requires blurDataURL or automatic blur for static imports, sizes to specify how wide the image will be at different breakpoints for responsive images, and loading='eager' for images that must load immediately. Use fill when the image should fill its parent container (requires parent to have position relative), and use the loader prop to customize image optimization URLs when using external image hosts like Cloudinary or Imgix.

13. How do you manage metadata and SEO in Next.js Pages Router vs App Router?

Difficulty: MediumType: SubjectiveTopic: Metadata Management

In Pages Router, you use the Head component from next/head to add meta tags, title, and other head elements per page, and you can use it in multiple components where the last rendered value takes precedence. In App Router, you export a metadata object or generateMetadata function from page.js or layout.js files, which provides type-safe metadata that Next.js automatically merges and optimizes. App Router's approach is more powerful with support for dynamic metadata, automatic Open Graph and Twitter card generation, and better type safety, while Pages Router's Head component is simpler but requires manual management. Both approaches ensure proper SEO with customizable title, description, keywords, Open Graph tags, canonical URLs, and structured data.

14. Explain how nested routes work in Next.js and provide an example structure.

Difficulty: MediumType: SubjectiveTopic: Routing Fundamentals

Nested routes in Next.js mirror the folder structure where subdirectories create nested URL paths, so pages/blog/index.js creates /blog and pages/blog/[slug].js creates /blog/any-slug for dynamic blog posts. You can nest as deeply as needed with pages/blog/category/[category]/[post].js creating /blog/category/tech/my-post routes. In App Router, folders define route segments and each folder can have its own layout.js that wraps child routes, creating persistent layouts that don't unmount on navigation. For example, app/dashboard/layout.js wraps all /dashboard routes including /dashboard/settings and /dashboard/profile, allowing shared UI and state across related pages.

15. How do you serve and reference static files like images, fonts, and documents in Next.js?

Difficulty: EasyType: SubjectiveTopic: Static Assets

Static files are placed in the public directory at the root of your project and can be referenced starting from the base URL using /filename.ext, so a file at public/logo.png is accessible at /logo.png in your code and in the browser. Never name the public folder anything else as Next.js specifically looks for this directory, and all files inside are served statically without processing. For images, use the Image component with src='/logo.png' to get automatic optimization, and for fonts or documents, reference them directly in Link components or import them in CSS files. The public directory should not be nested and must be at the root level of your Next.js project.

16. What happens behind the scenes when you navigate using Link vs a regular anchor tag in Next.js?

Difficulty: HardType: SubjectiveTopic: Client vs Server Navigation

When using Link, Next.js performs client-side navigation by fetching only the JavaScript and data needed for the new page without a full page reload, preserving React state and providing instant transitions through the browser's History API. Link also prefetches pages in the viewport during idle time so navigation feels instant, and it intelligently code-splits so only necessary JavaScript loads. Regular anchor tags cause full page refreshes, losing all React state, re-downloading all JavaScript and CSS, re-initializing the app, and resulting in slower navigation with visible white flashes. The browser completely unloads the current page and loads the new one from scratch, which is inefficient and provides poor user experience compared to Link's seamless client-side transitions.

17. What is Server-Side Rendering (SSR) in Next.js?

Difficulty: EasyType: MCQTopic: Server-Side Rendering

Rendering pages on the server for each request
Rendering pages only once at build time
Rendering pages only in the browser
Rendering pages without any server

Server-Side Rendering means the HTML for a page is generated on the server for each incoming request, ensuring users always get the most up-to-date content and improving SEO since search engines receive fully rendered HTML. SSR is ideal for pages with frequently changing data or personalized content that differs per user. The server generates the complete HTML, sends it to the browser, and then React hydrates it to make it interactive, providing fast initial page loads with dynamic content.

Correct Answer: Rendering pages on the server for each request

18. What is Static Site Generation (SSG) in Next.js?

Difficulty: EasyType: MCQTopic: Static Site Generation

Generating HTML pages at build time that are reused for each request
Generating HTML on every request
Generating HTML only in the browser
Never generating HTML

Static Site Generation pre-renders pages at build time, creating HTML files that are served instantly from a CDN without running server code on each request, resulting in the fastest possible page loads and best performance. SSG is perfect for content that doesn't change often like marketing pages, blogs, documentation, or e-commerce product pages. The same pre-built HTML is served to all users until the next build, making it extremely fast and cost-effective.

Correct Answer: Generating HTML pages at build time that are reused for each request

19. When is getServerSideProps called in Next.js?

Difficulty: MediumType: MCQTopic: getServerSideProps

On every request to the page on the server
Only once at build time
Only in the browser
Never automatically

getServerSideProps runs on the server for every request to fetch data before rendering the page, ensuring users always see the most current data but requiring server processing time for each visit. This function never runs in the browser, receives request context like params and query strings, and can access databases or APIs that require server-side credentials. Use getServerSideProps when data must be fresh on every request or depends on user-specific information like authentication.

Correct Answer: On every request to the page on the server

20. What does getStaticProps do in Next.js?

Difficulty: MediumType: MCQTopic: getStaticProps

Fetches data at build time for static generation
Fetches data on every request
Fetches data in the browser after page load
Never fetches any data

getStaticProps runs at build time during next build to fetch data that will be baked into the HTML pages, allowing you to pre-render pages with data from APIs, databases, or the filesystem for maximum performance. The function only runs on the server and never in the browser, letting you safely use server-only code like database queries or reading the filesystem. Combined with ISR revalidation, getStaticProps enables static pages that can update periodically without rebuilding the entire site.

Correct Answer: Fetches data at build time for static generation

21. What is the purpose of getStaticPaths in Next.js?

Difficulty: HardType: MCQTopic: getStaticPaths

To specify which dynamic routes should be pre-rendered at build time
To fetch data for static pages
To create API routes
To handle client-side routing

getStaticPaths tells Next.js which dynamic route paths to generate at build time by returning an array of path objects, and it must be used with getStaticProps on pages with dynamic routes like [id].js when using SSG. The paths array specifies which specific parameter values should be pre-rendered, and the fallback option controls behavior for paths not returned: false means 404 for unlisted paths, true generates pages on-demand, and 'blocking' generates pages server-side without showing a fallback. This enables statically generating pages for dynamic routes like blog posts or products.

Correct Answer: To specify which dynamic routes should be pre-rendered at build time

22. What is Incremental Static Regeneration (ISR) in Next.js?

Difficulty: MediumType: MCQTopic: ISR

Updating static pages after build time without rebuilding the entire site
Generating all pages on every request
Never updating pages after build
Regenerating the entire site periodically

ISR allows you to update static pages after deployment by specifying a revalidate value in getStaticProps, which tells Next.js to regenerate the page in the background after that many seconds have passed since the last request. The first user after revalidation time still sees the old page instantly while Next.js regenerates it, and subsequent users see the fresh content, combining the speed of SSG with the freshness of SSR. ISR is perfect for content that updates occasionally but not frequently, like e-commerce products, blog posts, or news articles.

Correct Answer: Updating static pages after build time without rebuilding the entire site

23. What is the main SEO advantage of SSR over Client-Side Rendering (CSR)?

Difficulty: MediumType: MCQTopic: CSR vs SSR

Search engines receive fully rendered HTML immediately
SSR is always faster than CSR
SSR doesn't require JavaScript
SSR doesn't need a server

With SSR, search engine crawlers receive complete HTML content on the first request without waiting for JavaScript to execute, ensuring all content is indexed properly, while CSR sends an empty HTML shell requiring JavaScript execution to render content that crawlers may not wait for. SSR provides better SEO because meta tags, titles, and structured data are present in the initial HTML response. This is crucial for content discovery, social media sharing previews, and search rankings, though modern crawlers like Google can execute JavaScript, the initial HTML approach is more reliable.

Correct Answer: Search engines receive fully rendered HTML immediately

24. Can you use different rendering methods for different pages in the same Next.js application?

Difficulty: HardType: MCQTopic: Hybrid Rendering

Yes, each page can choose SSG, SSR, or CSR independently
No, the entire app must use one rendering method
Only in production mode
Only with special configuration

Next.js allows hybrid rendering where each page can independently choose the best rendering strategy by exporting getStaticProps for SSG, getServerSideProps for SSR, or neither for CSR, mixing strategies based on each page's requirements. This flexibility lets you use SSG for your marketing pages and blog for maximum speed, SSR for user dashboards with personalized data, and CSR for highly interactive admin panels, all in the same application. This per-page optimization is a key advantage of Next.js over traditional single-strategy frameworks.

Correct Answer: Yes, each page can choose SSG, SSR, or CSR independently

25. Compare SSR, SSG, and ISR: when should you use each rendering strategy?

Difficulty: MediumType: SubjectiveTopic: Rendering Strategies Comparison

Use SSR with getServerSideProps when data must be fresh on every request or is user-specific like dashboards, personalized feeds, or real-time data, accepting slower initial loads for guaranteed current content. Use SSG with getStaticProps for content that rarely changes like marketing pages, documentation, or blog posts to achieve the fastest possible load times and lowest server costs by pre-rendering at build time. Use ISR when content updates periodically but not constantly like e-commerce products, news articles, or social media feeds, combining SSG's speed with the ability to update content without full rebuilds by setting a revalidate period. Consider that SSG with ISR offers the best of both worlds for most content sites, SSR is necessary for truly dynamic per-request data, and CSR works for interactive features that don't need SEO.

26. How do you use getServerSideProps and what data does it receive in its context parameter?

Difficulty: MediumType: SubjectiveTopic: getServerSideProps Usage

You export an async function called getServerSideProps from a page component that receives a context object containing params for dynamic route parameters, query for URL query strings, req and res for the HTTP request and response objects, and other properties like resolvedUrl and locale. The function must return an object with props that will be passed to the page component, and you can return notFound true to show a 404 page or redirect object to redirect users to another page. Access cookies, headers, and authentication information through the request object, fetch data from databases or APIs using server-side credentials, and perform any server-side logic before rendering, but remember this runs on every request so expensive operations impact performance.

27. Explain the revalidate option in getStaticProps and how ISR works behind the scenes.

Difficulty: HardType: SubjectiveTopic: getStaticProps Configuration

The revalidate option in getStaticProps specifies the number of seconds after which Next.js should attempt to regenerate the page in the background, implementing ISR by serving stale content instantly while regenerating fresh content asynchronously. When a request comes after the revalidate period, the user still sees the cached version immediately for fast response, Next.js triggers a background regeneration on the server, and once complete, the cache updates so subsequent requests see the new version. If regeneration fails, the old cached version continues serving to ensure availability, and you can set revalidate to false or omit it for pure SSG with no regeneration, or use on-demand revalidation with revalidatePath or revalidateTag for more control. This approach provides static-like performance with near-real-time content updates without constant server rendering costs.

28. How do you implement getStaticPaths with fallback options and what does each fallback value do?

Difficulty: HardType: SubjectiveTopic: getStaticPaths Implementation

Implement getStaticPaths by returning an object with paths array containing objects with params matching your dynamic route segments, and a fallback option controlling behavior for non-pre-rendered paths. With fallback false, any path not in the paths array returns 404, useful for known finite sets like a small product catalog. With fallback true, unlisted paths render a fallback version first using router.isFallback, then Next.js generates the page client-side and caches it, good for large datasets where pre-rendering everything is impractical. With fallback 'blocking', Next.js waits to serve the full page server-side on first request without showing a fallback state, then caches it for subsequent requests, providing better UX when you don't want to show loading states. Combine getStaticPaths with getStaticProps to fetch data for each path, and use ISR revalidation to update pre-generated pages periodically.

29. What are the different ways to fetch data in Next.js and when should you use each approach?

Difficulty: MediumType: SubjectiveTopic: Data Fetching Patterns

Use getStaticProps for data that can be fetched at build time and shared across users for best performance with SSG, getServerSideProps for request-specific or frequently changing data that must be fresh on every visit, client-side fetching with useEffect or SWR for data that doesn't need SEO or can load after initial render like user dashboards or interactive features, and API routes for backend logic that needs server-side execution. In App Router, use Server Components to fetch data directly in components on the server eliminating the need for getStaticProps or getServerSideProps, use fetch with next revalidate option for ISR-like behavior, and Client Components with 'use client' for interactive data fetching. Choose based on requirements for SEO, freshness, personalization, and performance, with server-side approaches for SEO-critical content and client-side for post-render interactivity.

30. How do you create a dynamic blog post page that uses getStaticPaths and getStaticProps together?

Difficulty: HardType: SubjectiveTopic: Dynamic Routes with Data

Create a file like pages/blog/[slug].js where getStaticPaths fetches all possible blog post slugs from your CMS or filesystem and returns them in the paths array with params: { slug: 'post-1' } format, and set an appropriate fallback strategy. Then getStaticProps receives the slug from context.params, fetches that specific post's data from your CMS or API, and returns it as props to the page component which renders the blog post content. Handle fallback states by checking router.isFallback in the component to show a loading state when fallback is true, and implement error handling for invalid slugs by returning notFound: true from getStaticProps. Add ISR by including revalidate in getStaticProps return to update posts periodically, and consider using fallback 'blocking' if you frequently add new posts to generate them on-demand without rebuilding the entire site.

31. Explain the difference between time-based revalidation and on-demand revalidation in Next.js.

Difficulty: HardType: SubjectiveTopic: Revalidation Strategies

Time-based revalidation uses the revalidate option in getStaticProps specifying seconds after which Next.js should check for updates, automatically regenerating pages in the background when the time expires and a request arrives, suitable for content that updates on a predictable schedule. On-demand revalidation uses the revalidatePath or revalidateTag API routes methods to programmatically trigger page regeneration immediately when content changes, like when a webhook from your CMS signals updated content, providing instant updates without waiting for the revalidate timer. On-demand revalidation is more efficient and provides better UX since users see fresh content immediately after changes rather than waiting for the next revalidation window, but requires setting up webhooks or API routes to trigger revalidation. Use time-based for regular predictable updates and on-demand for immediate updates when content changes, and combine both approaches for robust content synchronization.

32. What are the performance implications of using SSR vs SSG and how do they affect user experience?

Difficulty: MediumType: SubjectiveTopic: Performance Optimization

SSG provides the fastest user experience with instant page loads since HTML is pre-generated and served from CDN edges close to users, eliminates server processing time, and costs less to scale since pages are static files. SSR requires server processing on every request adding latency measured in hundreds of milliseconds, needs server capacity that scales with traffic, and costs more to operate, but guarantees fresh content and enables personalization. The performance difference is most noticeable on slower servers or high-traffic scenarios where SSG can serve millions of requests easily while SSR requires proportional server resources. For best results, use SSG with ISR for most content to get static performance with periodic updates, reserve SSR for truly dynamic pages that must be personalized or must have real-time data, and optimize SSR pages by caching database queries, using edge functions, and implementing efficient data fetching strategies.

33. What is the main directory used for the App Router in Next.js 13+?

Difficulty: EasyType: MCQTopic: App Router Introduction

app directory
pages directory
src directory
routes directory

The App Router uses the app directory at the root of your project as the new routing convention introduced in Next.js 13, replacing or coexisting with the traditional pages directory. The app directory uses React Server Components by default, provides better layouts system, built-in loading and error states, and nested routing with folders and special files like page.js, layout.js, loading.js, and error.js. You can use both app and pages directories simultaneously during migration, allowing gradual adoption of the new features.

Correct Answer: app directory

34. What is the default component type in the App Router?

Difficulty: MediumType: MCQTopic: Server Components

Server Components
Client Components
Static Components
Dynamic Components

In the App Router, all components are React Server Components by default, meaning they render on the server and their code is never sent to the client, reducing bundle size and enabling direct database access. Server Components can async fetch data, access backend resources directly, keep sensitive information like API keys secure on the server, and automatically deduplicate requests. To use client-side features like hooks, event handlers, or browser APIs, you must explicitly mark components with the 'use client' directive at the top of the file.

Correct Answer: Server Components

35. How do you mark a component as a Client Component in the App Router?

Difficulty: EasyType: MCQTopic: Client Components

Add 'use client' directive at the top of the file
Place it in a client folder
Export it as clientComponent
Use a .client.js extension

You mark a component as a Client Component by adding the 'use client' string directive at the very top of the file before any imports, which tells Next.js that this component and its children should hydrate on the client and have access to browser APIs, hooks, and interactivity. Client Components are necessary for useState, useEffect, event handlers, browser-only APIs, or third-party libraries that rely on client-side features. The directive creates a boundary, and any components imported into a Client Component become Client Components too, so use it strategically at the component tree level where interactivity begins.

Correct Answer: Add 'use client' directive at the top of the file

36. What is special about layout.js in the App Router?

Difficulty: MediumType: MCQTopic: Layouts

It wraps pages and persists across navigation without re-rendering
It renders on every page load
It only works for the homepage
It replaces all page components

layout.js defines UI that wraps page components and persists across route changes within that segment without unmounting or re-rendering, maintaining state and avoiding expensive re-initialization. Layouts are nested, so a layout in app/dashboard/layout.js wraps all dashboard routes while inheriting the root app/layout.js wrapper. Layouts receive a children prop containing the nested page or layout, can fetch data asynchronously, and enable shared UI like navigation bars, sidebars, or headers that don't reset when users navigate between pages in that section.

Correct Answer: It wraps pages and persists across navigation without re-rendering

37. What file do you create to show a loading state for a route segment in App Router?

Difficulty: EasyType: MCQTopic: Loading UI

loading.js
loader.js
spinner.js
pending.js

Create a loading.js file in a route segment that automatically wraps the page in a React Suspense boundary, showing the loading UI while the page content loads asynchronously. Next.js automatically handles the Suspense integration, streaming the loading UI immediately while the page or layout fetches data, then replacing it with the actual content when ready. This provides instant feedback to users during navigation or data fetching, works with both Server and Client Components, and enables streaming server rendering for better perceived performance.

Correct Answer: loading.js

38. How does error.js work in the App Router?

Difficulty: MediumType: MCQTopic: Error Handling

It creates an Error Boundary that catches runtime errors in nested routes
It only handles 404 errors
It prevents all errors from occurring
It logs errors to the console

error.js automatically creates a React Error Boundary around route segments that catches JavaScript errors during rendering, in event handlers, or in nested components, displaying the error UI instead of breaking the entire application. The error component receives error and reset props, where error contains error details and reset is a function to retry rendering the segment. Error boundaries are nested like layouts, so errors bubble up to the nearest parent error boundary, and error.js must be a Client Component marked with 'use client' since it needs interactivity for the reset function.

Correct Answer: It creates an Error Boundary that catches runtime errors in nested routes

39. What is the purpose of parentheses in folder names like (marketing) in the App Router?

Difficulty: HardType: MCQTopic: Route Groups

Creates route groups for organization without affecting the URL path
Makes routes private and protected
Creates dynamic routes
Creates API routes

Wrapping a folder name in parentheses like (marketing) creates a route group that organizes routes logically without adding the folder name to the URL path, allowing multiple layouts for different sections or organizing routes by feature. Route groups enable having different layouts for different route segments without affecting URLs, opting specific routes into different layouts, and splitting your application into sections for better code organization. For example, app/(marketing)/about and app/(shop)/products both appear at /about and /products in the URL while having different layouts from their respective group folders.

Correct Answer: Creates route groups for organization without affecting the URL path

40. What do @ prefixed folders like @team and @analytics represent in App Router?

Difficulty: HardType: MCQTopic: Parallel Routes

Parallel routes that render simultaneously in the same layout
Private routes that require authentication
API route handlers
Client-side only routes

Folders prefixed with @ define parallel routes called slots that can render simultaneously in the same layout as separate named children props, enabling complex UI patterns like dashboards with multiple independent sections. A layout can receive multiple slot props like children, team, and analytics and render them in different positions, each with their own loading and error states that are isolated from others. Parallel routes enable conditionally rendering slots based on state, independently loading different sections, and creating modals or split views by intercepting routes into slots.

Correct Answer: Parallel routes that render simultaneously in the same layout

41. What are the main advantages of React Server Components in Next.js App Router?

Difficulty: MediumType: SubjectiveTopic: Server Components Benefits

Server Components dramatically reduce JavaScript bundle size by keeping component code on the server and only sending rendered HTML to the client, improving load times especially on slower devices or connections. They enable direct access to backend resources like databases, filesystems, or internal services without creating API routes, keeping sensitive data and logic secure on the server, and eliminating the data fetching waterfall by fetching data where it's needed. Server Components can stream rendering progressively sending content as it becomes available for better perceived performance, automatically deduplicate identical requests across the component tree, and use async/await directly in components without useEffect complexity. This architecture shift results in faster applications with less client-side JavaScript while maintaining the component-based development model React developers love.

42. When should you use Client Components vs Server Components and what are the restrictions of each?

Difficulty: HardType: SubjectiveTopic: Client vs Server Components

Use Server Components as the default for most components especially those that fetch data, display static content, or don't require interactivity, keeping them on the server to reduce bundle size and improve performance. Use Client Components when you need useState, useEffect, event handlers, browser APIs like localStorage or window, interactive features, or third-party libraries that depend on React hooks or browser environment. Server Components cannot use hooks, handle events, access browser APIs, or use client-side only libraries, but can directly access databases and server resources, while Client Components can't directly access server-side resources and must fetch data through API routes or Server Actions. You can compose them by importing Server Components into Client Components as children props rather than direct imports, maintaining the server-only code in Server Components while adding interactivity at the edges with Client Components for optimal performance.

43. Explain how nested layouts work in App Router and how they differ from the Pages Router approach.

Difficulty: MediumType: SubjectiveTopic: Layout System

In App Router, layouts are nested hierarchically where each segment can have its own layout.js that wraps its children, and all parent layouts automatically wrap child layouts creating a composed layout system. The root app/layout.js is required and must contain html and body tags wrapping everything, then each nested route segment like app/dashboard/layout.js adds its own wrapper preserved during navigation within that section. This differs from Pages Router's single _app.js and _document.js approach where you had one global wrapper requiring custom logic for per-page layouts, whereas App Router's nested layouts maintain state across navigations, support multiple root layouts through route groups, and enable partial rendering where only the changing segment re-renders. Layouts can fetch data, be Server or Client Components, and colocate related UI without prop drilling through intermediate pages.

44. How do you implement loading states in App Router using loading.js and Suspense?

Difficulty: MediumType: SubjectiveTopic: Loading States

Create a loading.js file that exports a component showing your loading UI like a spinner or skeleton, which Next.js automatically wraps around the page.js in a Suspense boundary to display while content loads. You can have multiple loading.js files at different route segments for granular loading states, and the nearest loading boundary shows while that segment loads. For more control, manually wrap specific components in Suspense boundaries with custom fallbacks to stream different parts of the page independently, showing instant feedback for fast sections while slower data fetches continue. The streaming approach sends the HTML shell immediately with loading states, then progressively streams in content as it becomes available, dramatically improving perceived performance especially on slow network connections or expensive data fetching operations.

45. How do you implement error handling with error.js and what props does it receive?

Difficulty: HardType: SubjectiveTopic: Error Boundaries

Create an error.js file that must be marked with 'use client' directive at the top, exporting a component that receives error object containing the caught error with message and stack properties, and reset function to attempt recovering by re-rendering the segment. The error boundary catches errors in nested pages, layouts, and components but not in the layout.js of the same segment (use a parent error.js for that) or in the root layout (use global-error.js for that). Implement retry logic with the reset function that triggers re-rendering, display user-friendly error messages while logging details to error tracking services, and create a hierarchy of error boundaries at different route levels for granular error handling. Error boundaries don't catch errors in event handlers or async code outside rendering, so wrap those in try-catch and handle separately.

46. What are practical use cases for route groups and how do you implement multiple layouts with them?

Difficulty: HardType: SubjectiveTopic: Route Groups Use Cases

Route groups enable having different layouts for different sections like (marketing) with a public layout and (app) with an authenticated dashboard layout, both living at the root URL level without affecting paths. Create folders like app/(marketing)/layout.js for marketing pages and app/(app)/layout.js for application pages, where each can have completely different navigation, styling, or authentication requirements. Use route groups to organize routes by feature like (admin), (customer), (public) for better code structure, implement A/B testing with different layouts, or opt certain routes out of the root layout by creating multiple root layouts in different groups. The parentheses convention keeps your folder structure organized while maintaining clean URLs, and you can nest route groups for even more granular organization.

47. How do you implement parallel routes with @folder slots and what are their use cases?

Difficulty: HardType: SubjectiveTopic: Parallel Routes Implementation

Implement parallel routes by creating @slot folders like @team and @analytics alongside a layout.js that receives them as props, allowing independent rendering of multiple sections simultaneously with isolated loading and error states. The layout renders each slot where needed like div slot.team div and div slot.analytics div, and each slot can have its own page.js, loading.js, and error.js. Use parallel routes for dashboards showing multiple data sources that load independently, implementing modals by intercepting routes into a @modal slot while keeping the background page in the children slot, creating split views like email clients with @list and @detail, or showing contextual panels that update based on the main content. Parallel routes support conditional rendering with default.js fallbacks when a slot doesn't match the current route, enabling complex UI patterns that were difficult with traditional routing.

48. Explain how streaming and Suspense work together in App Router for progressive rendering.

Difficulty: HardType: SubjectiveTopic: Streaming and Suspense

Streaming allows Next.js to progressively send rendered HTML chunks to the browser as they become ready rather than waiting for the entire page to render, dramatically improving Time to First Byte and perceived performance. Server Components are rendered to a special format that streams to the client, and Suspense boundaries define stream boundaries where content inside the boundary can load asynchronously while the rest of the page renders immediately. When a Server Component suspends for async data fetching, Next.js streams the fallback UI immediately, continues rendering other components, and streams in the resolved content when ready, all without blocking the initial response. This enables showing instant page shells with loading states while expensive data fetches complete, particularly effective for slow database queries, third-party API calls, or large datasets where users see content progressively rather than staring at a blank page, resulting in better engagement and perceived performance even with identical actual load times.

49. Where do you create API routes in the Pages Router?

Difficulty: EasyType: MCQTopic: API Routes

Inside the pages/api directory
Inside the api directory at root
Inside the public/api directory
Inside the src/api directory

API routes are created inside the pages/api directory where each file becomes an API endpoint, with pages/api/hello.js creating the /api/hello endpoint automatically. API route files export a default function that receives request and response objects similar to Express.js, allowing you to handle different HTTP methods, parse request bodies, set response status and headers, and implement backend logic. These routes run only on the server, never in the browser, making them perfect for handling sensitive operations, database queries, or third-party API calls with secret keys.

Correct Answer: Inside the pages/api directory

50. What file name is used for Route Handlers in the App Router?

Difficulty: MediumType: MCQTopic: Route Handlers

route.js or route.ts
api.js or api.ts
handler.js or handler.ts
endpoint.js or endpoint.ts

Route Handlers in App Router use the special file name route.js or route.ts placed in any app directory segment to create API endpoints, replacing the API routes from Pages Router with a more flexible system. You export named functions matching HTTP methods like GET, POST, PUT, DELETE, and PATCH that receive a Request object and return a Response, following the Web standards. Route Handlers can coexist with page.js files in the same segment by being at different paths, support dynamic routes with [param] folders, and can be Server Components for direct data access.

Correct Answer: route.js or route.ts

51. Where should the middleware.js file be placed in a Next.js project?

Difficulty: MediumType: MCQTopic: Middleware

At the root of the project or inside the src directory
Inside the pages directory
Inside the app directory
Inside the public directory

Middleware must be placed in a middleware.js or middleware.ts file at the root of your project (same level as pages or app) or inside the src directory if you're using that structure, and it runs before every request is completed. Middleware allows you to run code before a request is completed to modify the response, redirect, rewrite URLs, add headers, handle authentication, implement A/B testing, or block requests based on conditions. It runs on the Edge Runtime for low latency and can use the matcher config to specify which paths it should run on.

Correct Answer: At the root of the project or inside the src directory

52. What is the main limitation of the Edge Runtime compared to Node.js Runtime?

Difficulty: HardType: MCQTopic: Edge Runtime

Limited access to Node.js APIs and smaller bundle size restrictions
Cannot handle HTTP requests
Cannot use JavaScript
No access to databases

The Edge Runtime is a lightweight JavaScript runtime that runs code closer to users with low latency but has limited access to Node.js APIs like fs, crypto modules, and native dependencies, with strict bundle size limits around 1-4MB. It runs on Vercel's Edge Network or similar CDN infrastructure globally, providing faster response times for geographically distributed users, but cannot use heavy libraries or Node.js-specific features. Use Edge for simple, fast operations like authentication checks, redirects, header manipulation, or lightweight API calls, and use Node.js runtime for complex operations, database connections, or libraries requiring full Node.js capabilities.

Correct Answer: Limited access to Node.js APIs and smaller bundle size restrictions

53. What prefix makes environment variables accessible in the browser in Next.js?

Difficulty: EasyType: MCQTopic: Environment Variables

NEXT_PUBLIC_
PUBLIC_
CLIENT_
BROWSER_

Environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser and can be accessed in client-side code using process.env.NEXT_PUBLIC_VARIABLE_NAME, while variables without this prefix remain server-only for security. Next.js inlines these public variables at build time replacing them with their values, so they become part of your JavaScript bundle. Never put secrets like API keys or database credentials in NEXT_PUBLIC_ variables as they'll be visible to anyone inspecting your frontend code, and use server-only variables for sensitive data accessed through API routes or Server Components.

Correct Answer: NEXT_PUBLIC_

54. How do you handle different HTTP methods in an API route (Pages Router)?

Difficulty: MediumType: MCQTopic: HTTP Methods

Check req.method and handle each method with conditional logic
Create separate files for each method
Use different export names like GET, POST
HTTP methods are handled automatically

In Pages Router API routes, you check the req.method property and use conditional statements or switch cases to handle different HTTP methods like GET, POST, PUT, DELETE within the same handler function. You typically return a 405 Method Not Allowed error for unsupported methods, and can organize code with helper functions for each method. This differs from App Router's Route Handlers where you export separate named functions for each method, making the App Router approach cleaner and more explicit for handling multiple HTTP methods.

Correct Answer: Check req.method and handle each method with conditional logic

55. What is a Server Action in Next.js App Router?

Difficulty: HardType: MCQTopic: Server Actions

An async function that runs on the server and can be called from Client Components
A client-side function that makes API calls
A middleware function
A database query function

Server Actions are async functions marked with 'use server' directive that run on the server but can be called directly from Client Components like regular functions, eliminating the need for separate API routes for many use cases. They provide a seamless way to mutate data, handle form submissions, or perform server-side operations with automatic serialization and progressive enhancement for forms that work without JavaScript. Server Actions can be defined inline in Server Components or in separate files, support TypeScript for type-safe server functions, and integrate with React's useFormStatus and useFormState hooks for optimistic updates and pending states.

Correct Answer: An async function that runs on the server and can be called from Client Components

56. How do you parse JSON request bodies in Next.js API routes?

Difficulty: MediumType: MCQTopic: Request Parsing

req.body is automatically parsed if Content-Type is application/json
Use JSON.parse(req) manually
Install body-parser package
JSON bodies cannot be parsed

Next.js automatically parses request bodies in API routes when the Content-Type header is application/json, making req.body available as a JavaScript object without additional configuration. For other content types like application/x-www-form-urlencoded or multipart/form-data, you may need additional parsing or libraries. In App Router Route Handlers, you use the Request object with methods like await request.json() for JSON bodies or await request.formData() for form submissions, following Web API standards.

Correct Answer: req.body is automatically parsed if Content-Type is application/json

57. Compare API Routes in Pages Router with Route Handlers in App Router: what are the key differences?

Difficulty: MediumType: SubjectiveTopic: API Routes vs Route Handlers

API Routes in Pages Router live in pages/api directory using a default export function receiving req and res Node.js-style objects where you manually set headers and status codes, while Route Handlers in App Router use route.js files with named HTTP method exports returning Web API Response objects following standard fetch patterns. Route Handlers are more modern using Request and Response web standards, support streaming responses naturally, work with the Edge Runtime more easily, and integrate better with Server Components and Server Actions. API Routes are simpler for developers familiar with Express.js patterns and work well for traditional REST APIs, but Route Handlers provide better TypeScript support, cleaner syntax for modern APIs, and better alignment with web standards. Both can coexist in the same project during migration, and you can choose based on whether you're using Pages or App Router.

58. How do you implement authentication middleware in Next.js and what are best practices?

Difficulty: HardType: SubjectiveTopic: Middleware Implementation

Create a middleware.js file that checks authentication by reading cookies or tokens from the request, verifying them against your auth provider, and either allowing the request through, redirecting to login, or returning a 401 response. Use the matcher config to specify protected routes like matcher: ['/dashboard/:path*', '/api/:path*'] to run middleware only where needed, improving performance by not running on every request. Best practices include using the Edge Runtime for fast authentication checks, storing JWTs in httpOnly cookies for security, implementing proper error handling and logging, using NextResponse.redirect for login redirects, and caching auth checks when possible. For more complex auth, integrate with providers like Clerk, Auth0, or NextAuth.js that provide built-in middleware, handle token refresh automatically, and manage session state efficiently across your application.

59. How do you create a POST endpoint using Route Handlers in App Router with request validation?

Difficulty: MediumType: SubjectiveTopic: Route Handler Implementation

Create an app/api/users/route.js file and export an async POST function that receives a Request object, use await request.json() to parse the JSON body, validate the data using a schema validator like Zod or Yup to ensure required fields and correct types, and return appropriate responses using new Response or NextResponse with status codes. Handle errors with try-catch blocks returning 400 for validation errors or 500 for server errors, set proper headers like Content-Type application/json, and consider using TypeScript for type safety throughout. You can access headers with request.headers, query parameters from the URL, and dynamic route params from the function's second parameter, and return NextResponse.json(data, { status: 201 }) for successful creation or NextResponse.json({ error: 'message' }, { status: 400 }) for validation failures.

60. What are the best practices for managing environment variables in Next.js applications?

Difficulty: MediumType: SubjectiveTopic: Environment Variables Best Practices

Use .env.local for local development secrets that should never be committed to Git, .env.production for production-specific variables, and .env for default values shared across environments, with .gitignore properly configured to exclude secret files. Prefix browser-accessible variables with NEXT_PUBLIC_ only when absolutely necessary and understand they're visible to anyone, keeping sensitive keys like database credentials, API secrets, and auth tokens as server-only variables without the prefix. Use environment variable validation on server startup to catch missing or invalid values early, document required variables in a .env.example file for team members, and leverage platforms like Vercel or Railway that provide secure environment variable management with encryption. Consider using a type-safe approach with zod or similar libraries to validate environment variables at build time, and never hardcode secrets in source code or log them in production.

61. How do you connect to a database in Next.js and what are the best practices for connection pooling?

Difficulty: HardType: SubjectiveTopic: Database Integration

Use database clients like Prisma, Drizzle ORM, or direct drivers like pg for PostgreSQL or mysql2 for MySQL, and create a singleton instance of the client to reuse across requests avoiding connection exhaustion. For serverless environments like Vercel, use connection pooling services like PgBouncer, Supabase, or PlanetScale that manage connections efficiently, or use HTTP-based database clients like Prisma Data Proxy or Turso that don't require persistent connections. Best practices include creating a single database client instance in a module that exports it for reuse, never creating new connections on each request, using environment variables for connection strings, implementing proper error handling and timeouts, and considering edge-compatible databases when using Edge Runtime. For App Router, you can query databases directly in Server Components without API routes, but ensure you're not creating multiple connections and handle connection errors gracefully with fallbacks or error boundaries.

62. How do you implement form submission using Server Actions and what advantages do they provide?

Difficulty: HardType: SubjectiveTopic: Server Actions Usage

Create an async function with 'use server' directive that receives FormData as a parameter, extract form values with formData.get('fieldName'), perform server-side validation and mutations like database updates, and return success or error data. Call the Server Action from a form's action prop passing the function directly for progressive enhancement that works without JavaScript, or use useFormState hook for client-side state management with optimistic updates and pending states. Server Actions eliminate the need for separate API routes for form submissions, provide automatic serialization of return values, enable progressive enhancement where forms work before JavaScript loads, integrate with useFormStatus for built-in pending states, and allow direct database mutations from forms with type safety. They simplify form handling significantly compared to traditional approaches requiring manual API calls, state management, and loading indicators, while maintaining security by running all logic on the server.

63. What security considerations should you implement in Next.js API routes and Route Handlers?

Difficulty: HardType: SubjectiveTopic: API Security

Implement authentication and authorization checks at the start of every protected endpoint verifying tokens or sessions before processing requests, validate and sanitize all user inputs to prevent injection attacks using libraries like validator or zod, and use CORS headers properly to restrict which origins can access your APIs. Apply rate limiting to prevent abuse using tools like upstash/ratelimit or custom Redis-based solutions, implement CSRF protection for state-changing operations especially with cookies, and use HTTPS only in production with secure httpOnly cookies for sensitive tokens. Never expose internal errors to clients returning generic messages instead while logging detailed errors server-side, sanitize database queries using parameterized statements or ORMs to prevent SQL injection, and implement proper error handling that doesn't leak sensitive information. Consider using API keys for service-to-service communication, implement request signing for critical endpoints, set appropriate cache headers to prevent sensitive data caching, and regularly audit dependencies for vulnerabilities using npm audit or similar tools.

64. When should you use Edge Runtime vs Node.js Runtime for API routes and what are the tradeoffs?

Difficulty: HardType: SubjectiveTopic: Edge vs Node Runtime

Use Edge Runtime for lightweight operations that benefit from global distribution like authentication checks, redirects, header manipulation, simple API proxying, or geo-based routing where low latency matters more than capabilities. Edge has millisecond cold starts, runs close to users worldwide for consistent performance, and is cost-effective for high-traffic simple operations, but limits you to around 1-4MB bundle sizes, restricts Node.js APIs like fs or native modules, and may have limited execution time around 30 seconds. Use Node.js Runtime for complex operations requiring full Node.js APIs, large dependencies, database connections, file system access, CPU-intensive tasks, or when using libraries incompatible with Edge constraints. Node.js has higher cold start times, runs in specific regions, costs more at scale, but provides full API access and no bundle size restrictions. Consider hybrid approaches where Edge handles initial routing or auth checks then proxies to Node.js functions for heavy lifting, or use Edge for read-heavy operations and Node.js for writes requiring database transactions.

65. What format does Next.js automatically convert images to for better performance?

Difficulty: MediumType: MCQTopic: Image Optimization

WebP and AVIF when supported by the browser
Always PNG
Always JPEG
Always GIF

Next.js automatically converts images to modern formats like WebP and AVIF when the browser supports them, providing significantly smaller file sizes with equivalent or better quality compared to JPEG and PNG. The Image component detects browser capabilities through the Accept header and serves the most efficient format supported, falling back to the original format for older browsers. This automatic format conversion happens on-demand rather than at build time, optimizing images as they're requested and caching the results for subsequent requests.

Correct Answer: WebP and AVIF when supported by the browser

66. What does next/font do to optimize fonts in Next.js?

Difficulty: MediumType: MCQTopic: Font Optimization

Self-hosts fonts and eliminates external network requests
Only loads Google Fonts
Compresses font files
Removes unused fonts

The next/font module automatically downloads fonts at build time and self-hosts them with your application, eliminating external network requests to Google Fonts or other CDNs and improving privacy and performance. It uses CSS size-adjust property to prevent layout shift, automatically optimizes font loading with font-display swap, and generates optimal @font-face declarations. This approach provides better performance than loading fonts from external CDNs, ensures fonts are available even if CDN is down, and complies with privacy requirements by not sending user data to third parties.

Correct Answer: Self-hosts fonts and eliminates external network requests

67. What is the purpose of the Script component in Next.js?

Difficulty: EasyType: MCQTopic: Script Component

To optimize loading of third-party scripts with different strategies
To write inline JavaScript
To create API routes
To handle form submissions

The Script component from next/script optimizes loading of third-party scripts like analytics, ads, or customer support widgets by providing control over loading strategies through the strategy prop. You can choose beforeInteractive to load critical scripts before page becomes interactive, afterInteractive (default) to load after hydration, lazyOnload to load during idle time, or worker to load in a web worker. This prevents third-party scripts from blocking page interactivity, improves Core Web Vitals, and gives you fine-grained control over when scripts execute.

Correct Answer: To optimize loading of third-party scripts with different strategies

68. How does Next.js handle code splitting by default?

Difficulty: MediumType: MCQTopic: Code Splitting

Automatically splits code by routes and dynamically imported components
Puts all code in one bundle
Only splits code in production
Requires manual configuration

Next.js automatically splits your JavaScript code by routes so each page only loads the code it needs, and further splits code for dynamic imports using React.lazy or next/dynamic. This means users only download code for the page they're visiting, not the entire application, significantly reducing initial bundle size and improving load times. Dynamic imports allow lazy loading components that aren't immediately needed, like modals or heavy libraries, loading them only when required and reducing the critical path bundle size.

Correct Answer: Automatically splits code by routes and dynamically imported components

69. What are the different caching layers in Next.js App Router?

Difficulty: HardType: MCQTopic: Caching

Request Memoization, Data Cache, Full Route Cache, and Router Cache
Only browser cache
Only CDN cache
Only server cache

Next.js App Router has four caching mechanisms: Request Memoization deduplicates identical fetch requests in a single render pass, Data Cache stores fetch results across requests and deployments with configurable revalidation, Full Route Cache stores rendered HTML and RSC payload at build time for static routes, and Router Cache stores RSC payload in the browser for client-side navigation. Understanding these layers helps optimize performance by controlling what's cached where and for how long, with options to opt out of caching using cache no-store, revalidate 0, or dynamic functions like cookies() or headers().

Correct Answer: Request Memoization, Data Cache, Full Route Cache, and Router Cache

70. How does Next.js handle internationalization (i18n) in the Pages Router?

Difficulty: MediumType: MCQTopic: Internationalization

Built-in i18n routing configured in next.config.js
Requires external routing library
Manual route creation for each locale
No i18n support

Pages Router provides built-in internationalization routing by configuring locales and defaultLocale in next.config.js, automatically handling locale detection from headers, URL paths, or cookies, and providing locale information through the router. You can use sub-path routing like /en/about or domain routing like en.example.com for different locales, and Next.js automatically redirects based on detected locale preference. The router.locale property gives you access to the current locale in pages, and you can use libraries like next-i18next or react-intl for translation management.

Correct Answer: Built-in i18n routing configured in next.config.js

71. What command builds a Next.js application for production?

Difficulty: EasyType: MCQTopic: Deployment

next build
npm build
next deploy
next production

The next build command creates an optimized production build of your Next.js application, generating static HTML for pages using SSG, bundling and minifying JavaScript and CSS, optimizing images and fonts, and creating a .next directory with all production assets. After building, run next start to serve the production build locally for testing, or deploy the .next directory to your hosting platform. The build process runs getStaticPaths and getStaticProps for static pages, analyzes which routes can be statically generated, and outputs a build summary showing page sizes and rendering types.

Correct Answer: next build

72. How can you analyze your Next.js bundle size?

Difficulty: MediumType: MCQTopic: Bundle Analysis

Use @next/bundle-analyzer plugin
Bundle analysis is automatic
Check the console output only
Next.js doesn't support bundle analysis

The @next/bundle-analyzer plugin creates an interactive treemap visualization of your bundle showing which dependencies and pages consume the most space, helping identify optimization opportunities. Install the package, configure it in next.config.js with environment variable check, and run ANALYZE=true npm run build to generate the visualization. The analyzer shows separate visualizations for client, server, and Edge bundles, helps identify duplicate dependencies, large libraries that could be lazy-loaded, or unused code that could be removed, making bundle optimization data-driven and precise.

Correct Answer: Use @next/bundle-analyzer plugin

73. What are advanced image optimization strategies in Next.js and how do you implement them?

Difficulty: HardType: SubjectiveTopic: Image Optimization Strategies

Implement advanced image optimization by using the priority prop for above-the-fold images to prevent lazy loading and improve LCP, specifying sizes prop to tell the browser how wide the image will be at different breakpoints for responsive images ensuring correct sizes are loaded. Use placeholder with blurDataURL for smooth loading transitions that improve perceived performance, configure custom loader for external image hosts like Cloudinary or Imgix to leverage their optimization features, and use the fill prop with object-fit for responsive images that fill their container. Consider using multiple image formats by configuring image formats in next.config.js, implementing art direction with picture element for different image crops at different sizes, lazy loading images below the fold automatically, and using quality prop strategically where 75 is default but you can lower for decorative images or increase for hero images. Monitor image performance with Lighthouse and Core Web Vitals, and ensure proper image sizing to avoid sending unnecessarily large images to mobile devices.

74. How do you optimize font loading in Next.js using next/font to prevent layout shift and improve performance?

Difficulty: MediumType: SubjectiveTopic: Font Loading Performance

Use next/font/google for Google Fonts or next/font/local for custom fonts, which automatically optimizes fonts by downloading them at build time and self-hosting to eliminate external requests and improve privacy. The module automatically applies CSS size-adjust to prevent layout shift by reserving space for the font before it loads, uses font-display swap for fast text rendering with system fonts while custom fonts load, and generates optimal font subsets based on the characters used. Implement font loading by importing the font function, calling it with configuration like weight, subsets, and display, and applying the returned className to your elements. Use variable fonts when possible for smaller file sizes and flexibility, preload critical fonts used above the fold, and consider using fallback fonts with matching metrics to minimize layout shift, which next/font handles automatically with the built-in fallback system.

75. Explain dynamic imports and lazy loading in Next.js and when you should use them.

Difficulty: HardType: SubjectiveTopic: Code Splitting Best Practices

Use dynamic imports with next/dynamic for components that aren't needed immediately, like modals, charts, or heavy third-party libraries, by wrapping them in dynamic function which returns a lazy-loaded component that splits the code into a separate bundle. Configure loading fallbacks with the loading option to show spinners or skeletons while the component loads, disable SSR with ssr false for client-only components that depend on browser APIs, and use suspense true to wrap in React Suspense boundary for better loading state composition. Dynamic imports are perfect for route-based code splitting for large page sections not visible on initial load, conditionally loaded features based on user permissions or feature flags, heavy libraries like rich text editors or data visualization that most users won't need, and reducing the critical path bundle size for faster initial page loads. Avoid over-splitting small components as the overhead of additional HTTP requests can outweigh bundle size savings, and ensure you're measuring actual performance improvements with Core Web Vitals rather than optimizing blindly.

76. Explain the different caching strategies in Next.js and how to configure them for optimal performance.

Difficulty: HardType: SubjectiveTopic: Caching Strategies

Configure caching at multiple levels starting with fetch-level cache control using cache force-cache for maximum caching, no-store to disable caching, or revalidate number for time-based revalidation implementing ISR-like behavior in App Router. Use next revalidate option in fetch to set revalidation time, revalidatePath or revalidateTag for on-demand cache invalidation when data changes, and understand that Route Handlers are not cached by default unlike pages. Implement CDN caching with proper Cache-Control headers using next.response with appropriate max-age and stale-while-revalidate values for edge caching, and use generateStaticParams for dynamic routes to pre-generate popular paths at build time. Configure Full Route Cache by making routes static through removing dynamic functions like cookies() or headers(), use Request Memoization automatically for duplicate fetch calls in component tree, and implement client-side Router Cache awareness where prefetched routes are cached in browser. Balance between freshness and performance by caching stable data aggressively, using shorter revalidation for frequently changing data, and implementing on-demand revalidation for immediate updates when content changes through webhooks or admin actions.

77. How do you implement internationalization in Next.js App Router and what are the best practices?

Difficulty: HardType: SubjectiveTopic: Internationalization Implementation

In App Router, implement i18n using the [lang] dynamic segment approach since built-in i18n routing was removed, creating app/[lang]/layout.js and app/[lang]/page.js to handle different locales with the lang parameter. Use middleware to detect user's preferred locale from Accept-Language header or cookies and redirect to appropriate locale, implement locale switcher that updates the URL and stores preference in cookies, and organize translation files by locale in dictionaries directory. Create a getDictionary function that dynamically imports translation JSON files based on locale for server components, use React context for translations in client components, and implement type-safe translations with TypeScript for autocomplete and error checking. Best practices include using professional translation services or tools like Crowdin for managing translations at scale, implementing proper hreflang tags for SEO, handling right-to-left languages with proper CSS and dir attributes, storing user's locale preference in cookies for persistence, and falling back gracefully to default locale when translations are missing. Consider using libraries like next-intl or next-i18next for more robust features if managing translations manually becomes complex.

78. What tools and techniques should you use to monitor and improve Next.js application performance?

Difficulty: MediumType: SubjectiveTopic: Performance Monitoring

Use Vercel Analytics or Vercel Speed Insights for real user monitoring showing actual Core Web Vitals scores from your users including LCP, FID, CLS, and TTFB, providing insights into real-world performance across different devices and networks. Implement Lighthouse CI in your deployment pipeline to catch performance regressions before production, use React DevTools Profiler to identify slow components and unnecessary re-renders, and leverage Next.js built-in performance metrics with reportWebVitals in _app.js to send metrics to analytics services. Monitor bundle sizes with @next/bundle-analyzer to identify bloat, use Chrome DevTools Performance tab to profile JavaScript execution and identify bottlenecks, and set up error tracking with Sentry or similar services to catch runtime errors affecting user experience. Track key metrics like Time to First Byte, First Contentful Paint, Largest Contentful Paint, and Total Blocking Time, set performance budgets for bundle sizes and page load times, and implement continuous monitoring with alerts when metrics degrade beyond thresholds.

79. How do you optimize Next.js applications for SEO and what features does Next.js provide?

Difficulty: HardType: SubjectiveTopic: SEO Optimization

Optimize SEO by using the Metadata API in App Router to define title, description, Open Graph tags, Twitter cards, and structured data through metadata exports or generateMetadata functions in layouts and pages, ensuring search engines and social platforms display your content properly. Implement proper heading hierarchy with h1 through h6 tags, use semantic HTML elements like article, nav, and section, and ensure all images have descriptive alt attributes for accessibility and SEO. Generate XML sitemaps dynamically with sitemap.js or sitemap.ts files that Next.js serves automatically at /sitemap.xml, create robots.txt with robots.js for crawler directives, and implement proper canonical URLs to prevent duplicate content issues. Use server-side rendering for content-heavy pages to ensure search engines receive fully rendered HTML with all content immediately, implement proper internal linking for better crawlability, add structured data using JSON-LD for rich snippets, and ensure mobile-friendliness with responsive design. Monitor SEO performance with Google Search Console, optimize Core Web Vitals since they're ranking factors, implement internationalization with hreflang tags for multi-language sites, and use next/link for internal navigation to maintain SPA benefits while being crawler-friendly.

80. What are the best practices for deploying Next.js applications to production and what should you consider?

Difficulty: MediumType: SubjectiveTopic: Production Deployment

Deploy to platforms optimized for Next.js like Vercel for zero-configuration deployment with automatic previews, edge functions, and analytics, or use Docker containers for self-hosting with Node.js runtime ensuring you handle static assets and server routes properly. Configure environment variables correctly separating development, staging, and production values, never commit secrets to version control, and use platform-provided secret management. Enable compression with gzip or brotli for text assets, configure proper Cache-Control headers for static assets and API routes, and use a CDN for global content delivery. Set up health checks and monitoring to detect issues quickly, implement proper error tracking with services like Sentry to catch production errors, and configure proper logging for debugging. Consider implementing blue-green deployments or canary releases for zero-downtime updates, set up automatic scaling for traffic spikes, and enable HTTP/2 or HTTP/3 for improved performance. Run next build locally before deploying to catch build errors, test production builds with next start, and implement CI/CD pipelines with automatic testing before deployment. Configure custom domains with SSL certificates, implement security headers with next.config.js, and regularly update dependencies to patch security vulnerabilities.