Why would you choose Next.js over pure React for a consumer-facing project?

Next.js adds SSR and SSG on top of React, improving SEO and initial load performance which are critical in consumer-facing applications. It also provides routing, image optimization, and API routes built in, reducing stack configuration decisions.

What is the difference between SSR, SSG, and ISR in Next.js and when would you use each one?

SSR generates the page on each request on the server, ideal for personalized or highly dynamic content. SSG generates the page at build time, ideal for static content with maximum performance. ISR combines both by regenerating static pages in the background according to an interval, ideal for content that changes but not in real time.

What advantage does the Next.js App Router offer over the Pages Router?

The App Router introduces native React Server Components, nested layouts, streaming with Suspense, and a data fetching model closer to React. It allows components that run exclusively on the server without sending JavaScript to the client, improving performance.

When would you use Next.js API routes instead of a separate backend?

For lightweight backend logic like webhooks, contact forms, proxies to external APIs, or simple endpoints that don't justify a separate service. For complex business logic or independent backend teams, a dedicated server is more suitable.

What problem does the Next.js Image component solve compared to a standard img tag?

It automatically optimizes image format and size based on the user's device, implements native lazy loading, prevents layout shift with reserved dimensions, and serves images in modern formats like WebP, significantly improving performance and Core Web Vitals.

How does Next.js handle routing and what advantage does it offer over React Router?

Next.js uses file system-based routing where the folder structure defines routes automatically. It eliminates manual route configuration, supports nested layouts, dynamic routes, and route groups without additional configuration.

For what projects does Next.js have a clear advantage over other frontend frameworks?

In projects where SEO is critical like e-commerce, blogs, or landing pages, when optimal initial load performance is needed, or when a unified full-stack setup with React is desired without maintaining a separate backend for lightweight logic.

What is Incremental Static Regeneration and what problem does it solve?

It allows updating static pages generated at build time without needing to rebuild the entire site. When a user accesses an expired page, Next.js serves the cached version while regenerating the new one in the background, combining SSG performance with SSR freshness.

What is the difference between Server Components and Client Components in the Next.js App Router?

Server Components run exclusively on the server, don't send JavaScript to the client, and can directly access databases or APIs without exposing credentials. Client Components are hydrated in the browser and are necessary for interactivity, local state, and access to browser APIs. They are marked with the 'use client' directive.

How would you handle data fetching in the Next.js App Router?

In Server Components using fetch directly with Next.js cache extensions that allow configuring revalidation by time or by tag. In Client Components using React Query or SWR for cache and loading states. The App Router model favors server-side fetching to reduce waterfalls.

What are Route Handlers in Next.js and how would you use them?

They are the equivalent of API routes in the App Router, defined in route.ts files that export functions with HTTP method names. They are used for webhooks, authentication endpoints, proxies to external services, or any backend logic that doesn't justify an independent server.

How would you implement authentication in a Next.js application?

With NextAuth.js or Auth.js that integrate multiple OAuth providers, session handling with JWT or database, and route protection middleware. The session can be verified in Server Components, Next.js middleware, or Route Handlers depending on the context where authorization is needed.

How does Next.js middleware work and what would you use it for?

It runs on the Edge before the request reaches the page or Route Handler. It is used for authentication, geolocation-based redirects, A/B testing, header modification, or any logic that must execute on each request with minimal latency.

How would you optimize the Core Web Vitals of a Next.js application?

Using the Image component for automatic optimization, fonts with next/font to eliminate typographic layout shift, lazy loading of heavy components with dynamic imports, minimizing client-side JavaScript with Server Components, and analyzing the bundle with @next/bundle-analyzer.

When would you use dynamic imports in Next.js and what benefit do they provide?

To load heavy components only when they are needed, like rich text editors, charting libraries, or components that are only shown conditionally. They reduce the initial bundle improving load time. With ssr: false, components that require browser APIs can be loaded.

How would you manage environment variables in Next.js differentiating client and server?

Variables prefixed with NEXT_PUBLIC_ are available on the client and embedded in the bundle. Variables without that prefix are only available on the server. Secrets should never be exposed with the NEXT_PUBLIC_ prefix as they would be visible in the client-side JavaScript.

How would you structure a large Next.js application with multiple business domains?

By organizing code in the App Router by feature with domain folders containing their pages, components, hooks, and services. A service layer centralizes communication with external APIs. Server Components are used by default and Client Components only where interactivity is necessary.

How would you implement an efficient caching strategy in Next.js for dynamic content?

Using fetch with time-based revalidate for content that changes periodically, tag-based revalidation with revalidateTag for explicit invalidation after mutations, and full route caching with the Full Route Cache. On the client side, React Query adds an additional cache layer to reduce requests.

What architectural considerations would you have when using React Server Components in a large project?

Defining from the start which components need interactivity to mark them as Client Components, avoiding prop drilling of server data into deep client components by using composition, and not importing client-only libraries in Server Components to avoid breaking the render tree.

How would you deploy a Next.js application outside of Vercel while maintaining all its functionalities?

Using the standalone output to generate an autonomous Node.js server, correctly configuring cache headers, implementing ISR support with a storage backend like Redis or S3, and managing the Edge Runtime with alternatives like Cloudflare Workers if edge functions are needed.

How would you implement internationalization in a large-scale Next.js application?

Using Next.js's built-in i18n support with automatic locale detection, combined with next-intl or next-i18next for translation management. Routes are organized by locale in the App Router and middleware handles redirection based on the user's preferred language.

How would you ensure observability of a Next.js application in production?

By integrating OpenTelemetry with Next.js's native support for distributed traces, using Vercel Web Analytics or tools like Datadog for performance metrics, implementing error tracking with Sentry, and monitoring Core Web Vitals with the SpeedInsights component.

Not understanding when to use Server Components vs Client Components

Marking all components with 'use client' by default eliminates the benefits of the App Router. Not understanding the difference and its implications on performance and architecture reflects not having actually worked with the Next.js App Router.

Not distinguishing between rendering strategies and when to apply each one

Not being able to articulate when to use SSR, SSG, or ISR based on project requirements reflects a superficial understanding of Next.js. It is one of the most frequent interview questions and an incorrect answer leads to architectures with suboptimal performance.

Not knowing the implications of exposing environment variables to the client

Prefixing variables containing secrets like private API keys with NEXT_PUBLIC_ exposes them in the client bundle. This frequent security error reflects not understanding how Next.js manages environment variables.

Not justifying Next.js over pure React or Remix with technical criteria

Choosing Next.js by default without evaluating if the project needs SSR or if Remix would be more suitable reflects a lack of judgment. Being able to articulate what Next.js specifically contributes for the project's use case is expected.

Not knowing the App Router's caching system and its levels

Next.js has multiple cache layers that interact with each other. Not understanding Request Memoization, the Data Cache, the Full Route Cache, and the Router Cache generates unexpected behaviors in production that are difficult to debug.

Not considering user experience during loading with Suspense and loading states

Not implementing loading.tsx or Suspense boundaries on routes with data fetching generates poor user experiences with blank screens. It is an expected practice in Next.js applications with App Router in production.

Next.js

The React framework for production web applications

Next.js is a React framework developed by Vercel that extends its capabilities with server-side rendering, static generation, file system-based routing, image optimization, and API routes. It is the preferred solution when combining React's power with performance, SEO, and an opinionated project structure ready for production is needed.

ReactTypeScriptSSRSSG

Market demand

Next.js is the most adopted React framework for production projects. It has high demand in startups, product companies, and agencies building web applications where performance and SEO are priorities alongside React's development experience.

Most used React framework in productionHigh demand in startups and agenciesStandard for React apps with SEO

Technical requirements

Intermediate

Requires solid mastery of React with hooks, modern JavaScript, and web rendering concepts. Familiarity with TypeScript, HTTP, and SSR and SSG concepts is essential to leverage Next.js in real production projects.

Use cases

Real Projects

Next.js is used to develop:

Web applications with SEO and performance requirements
E-commerce platforms
Content sites with static generation
Full-stack applications with integrated API routes

Types of Company

Next.js is adopted by:

Startups with consumer-facing digital products
Digital agencies with modern web projects
E-commerce and digital media companies
Companies migrating React applications to production with SSR

Production Scenarios

Next.js is widely used in production environments such as:

Landing pages and marketing sites with static generation
Platforms with dynamic content and critical SEO
Full-stack applications with lightweight backend in API routes
E-commerce with statically generated product pages

Scalability

Next.js offers multiple mechanisms to scale applications:

Incremental Static Regeneration for updatable content without rebuild
Edge Runtime for functions with minimal global latency
Automatic Image Optimization with the Image component
Streaming with React Server Components for progressive loading

Advantages and Disadvantages

Advantages

Combines SSR, SSG, and ISR in a single framework with minimal configuration.

App Router with React Server Components for modern performance and architecture.

Vercel ecosystem with optimized deployment and observability tools.

Disadvantages

Complexity increases significantly when mixing Server and Client Components.

Strong coupling with Vercel to take advantage of all its functionalities.

Frequent updates and paradigm shifts require constant follow-up.

Comparison

Advantages of React (SPA)

Greater simplicity without additional rendering layers
Full control over the frontend architecture
No coupling with specific infrastructure

Considerations

Pure React is suitable for internal applications or dashboards without SEO requirements. Next.js adds real value when initial performance, SEO, or full-stack in a single project are needed.