Skip to main content

JavaScript Frameworks

Next.js Interview Questions and Answers

Explore Next.js interview questions covering routing, server and client components, rendering, caching, metadata, security, and deployment.

  1. 01
    Latest question

    How do Server Components and Client Components differ?

    Question codetsx
    'use client'

export default function ProductPage() {
  const [product, setProduct] = useState(null)
  useEffect(() => {
    fetch('/api/products/42').then((response) => response.json()).then(setProduct)
  }, [])
}

    Server Components render on the server and can access server-side resources without sending their component code to the browser. Client Components are required for state, effects, event handlers, and browser-only APIs, and are marked by a client boundary.

    Answer codetsx
    export default async function ProductPage() {
  const product = await getProduct(42)

  return <ProductDetails product={product} />
}
  2. 02

    What is the purpose of layouts in the App Router?

    Layouts define shared UI around route segments and preserve that UI across navigation where possible. Nested layouts let applications align shared navigation, providers, and shells with URL structure.

  3. 03

    When would a route be statically rendered or dynamically rendered?

    Static rendering is useful when output can be reused between requests, while dynamic rendering is needed when output depends on request-time information or deliberately uncached data. The decision should follow freshness, personalization, and cost requirements.

  4. 04

    How should secrets be kept out of the browser bundle?

    Read secrets only in server-side modules and avoid variables or imports that are exposed to client boundaries. Treat public environment-variable prefixes as intentionally browser-visible and validate server-only integrations through route handlers or server actions.

  5. 05

    How is page metadata handled in Next.js?

    Static metadata can be exported directly, while route-dependent metadata can be generated from parameters and fetched content. Canonicals, social cards, titles, and descriptions should reflect the actual indexable route.

  6. 06

    What should be checked when a Next.js page is slow?

    Separate server response time, data dependencies, JavaScript cost, image delivery, fonts, and client rendering. Use route and browser traces so caching or rendering changes address the measured bottleneck.

Continue preparing

Related interview guides

ReactJavaScriptNode.jsDevOps

Need delivery capability?

Pair technical understanding with the right specialist.

Hire Next.js talent
Have a quick question?Chat on WhatsAppNext.js Interview Questions and Answers | Quinoid