Cloudflare Next JS Interview Questions

1. 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.

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

Difficulty: HardType: MCQTopic: Caching

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().

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

Difficulty: MediumType: MCQTopic: Font Optimization

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.

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

Difficulty: MediumType: MCQTopic: Middleware

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.

Master Interviews
Anywhere, Anytime

Quick overview

Cloudflare · Next JS questions (4)

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

Continue your preparation

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

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

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

Master Interviews Anywhere, Anytime

Cloudflare Next JS interview questions

Quick overview

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

Continue your preparation

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

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

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

Master Interviews
Anywhere, Anytime