Fundamentals

Fundamentals Questions

Q1.What is the difference between server components and client components in Next.js?+

Server components render on the server, never ship JavaScript to the browser, and can directly access databases and file systems. Client components render on the browser and handle interactivity (hooks, event handlers, browser APIs). By default, components in the App Router are server components. Add 'use client' directive to make them client components. Use server components for data fetching and client components for interactivity.

Q2.Explain the Next.js App Router vs Pages Router.+

Pages Router: pages/ directory, file-based routing, getServerSideProps/getStaticProps for data fetching. App Router: app/ directory, nested layouts, server components by default, async components for data fetching, loading.tsx/error.tsx conventions, and server actions. App Router is the modern approach and what companies use for new projects.

Q3.What is streaming in Next.js and why is it useful?+

Streaming allows sending HTML in chunks as it becomes ready, rather than waiting for the entire page. Use loading.tsx or Suspense boundaries to show fallback UI while slow data fetches complete. This improves perceived performance — users see content immediately while expensive operations finish in the background.

Q4.Explain Next.js caching strategies.+

Next.js has four cache layers: Request Memoization (deduplicates identical fetch calls in a single render), Data Cache (persists fetch results across requests), Full Route Cache (caches rendered HTML), and Router Cache (client-side prefetch cache). Understanding when each applies and how to opt out (cache: 'no-store', revalidate) is essential for predictable behavior.

Q5.What are server actions in Next.js?+

Server actions are async functions that run on the server, triggered from client components via form actions or event handlers. Defined with 'use server' directive. They replace API routes for mutations — form submissions, database writes, revalidation. They support progressive enhancement (work without JavaScript) and integrate with React's useFormState and useOptimistic hooks.

Framework-Specific

Framework-Specific Questions

Q6.How does data fetching work in the Next.js App Router?+

In server components, use async/await directly — the component itself is an async function that fetches data. Use fetch with caching options: cache: 'force-cache' (static), cache: 'no-store' (dynamic), or next: { revalidate: 60 } (ISR). For client components, use SWR or TanStack Query. Database queries with Prisma work directly in server components.

Q7.Explain Next.js middleware and common use cases.+

Middleware runs before every request at the edge. Defined in middleware.ts at the project root. Use cases: authentication redirects, locale detection, A/B testing, bot detection, and request rewriting. Middleware uses the Web API (Request, Response, NextResponse) and runs in the Edge Runtime with limited Node.js API access.

Q8.How does next/image optimize images?+

next/image provides automatic image optimization: lazy loading by default, responsive srcset generation, format conversion (WebP, AVIF), blur placeholder support, and size optimization. Images are optimized on-demand and cached. Required width and height props prevent Cumulative Layout Shift. Use fill for responsive images with unknown dimensions.

Q9.What is ISR (Incremental Static Regeneration) and when would you use it?+

ISR regenerates static pages at runtime after a specified interval. Set with revalidate option on fetch or route segment config. First visitor after the interval gets the stale page, triggers regeneration in the background, and subsequent visitors get the fresh page. Use ISR for content that changes periodically — product pages, blog posts, marketing pages.

Q10.How do you handle SEO in Next.js?+

Use the Metadata API in layout.tsx or page.tsx to set title, description, Open Graph tags, and Twitter cards. Add JSON-LD structured data with script tags. Use generateMetadata for dynamic pages. next/image prevents CLS. Server-rendered content is crawlable by default. Use generateSitemap for sitemap generation and robots.ts for crawler directives.

Want to master these concepts hands-on?

CodingClave's Next.js training in Lucknow covers all these topics with practical projects and mock interviews.

Learn Next.js at CodingClave

Project / Practical

Project / Practical Questions

Q11.How would you structure a large Next.js application?+

Use route groups (parentheses folders) to organize without affecting URLs. Create a components/ folder for shared UI, lib/ for utilities and database, and actions/ for server actions. Co-locate component-specific files with their route. Use parallel routes for dashboard layouts. Keep server and client components clearly separated.

Q12.How do you implement authentication in a Next.js App Router application?+

Use NextAuth.js (Auth.js) for OAuth or credentials auth. Store session in a JWT or database. Protect routes with middleware.ts that checks session and redirects unauthorized users. In server components, use getServerSession to access user data. In client components, use useSession hook. Create auth-specific route groups for login/register pages.

Q13.Describe how you would build an API with Next.js Route Handlers.+

Create route.ts files in the app/api/ directory. Export named functions for HTTP methods: GET, POST, PUT, DELETE. Use NextRequest for request parsing and NextResponse for responses. Add middleware for auth. Use Zod for request validation. For most mutations, prefer server actions over API routes — they are simpler and type-safe.

Problem Solving

Problem Solving Questions

Q16.How would you optimize a Next.js application for Core Web Vitals?+

LCP: optimize images with next/image, use priority for above-fold images, preload fonts. FID/INP: minimize client-side JavaScript, use server components, defer non-critical scripts. CLS: set explicit image dimensions, use font-display: swap, reserve space for dynamic content. Monitor with Vercel Analytics or Lighthouse CI.

Q17.How would you implement a multi-tenant SaaS with Next.js?+

Use middleware to detect tenant from subdomain or path. Dynamic routes with [tenant] segment for tenant-specific pages. Store tenant config in database, cache in middleware. Separate tenant data with a tenantId column. Use Next.js rewrite rules to map subdomains to dynamic routes. Deploy on Vercel with wildcard domains.

Frequently Asked Questions

Common Questions

What topics are asked in Next.js interviews?+

React fundamentals, server vs client components, App Router, data fetching, caching strategies, SEO optimization, middleware, and deployment. Companies also test TypeScript and performance optimization skills.

Are Next.js interviews harder than React interviews?+

Next.js interviews add server-side concepts (SSR, ISR, server components, streaming) on top of React knowledge. They are more comprehensive but not necessarily harder if you understand the framework.

Does CodingClave prepare students for Next.js interviews?+

Yes. The 6-month Next.js program at CodingClave in Lucknow includes mock interviews covering App Router, server components, and deployment scenarios.

Is Next.js App Router asked in interviews or Pages Router?+

In 2026, most interviews focus on the App Router. Companies building new products use App Router exclusively. Understanding the differences helps if asked, but focus your preparation on App Router.

What salary can I expect after clearing a Next.js interview?+

₹4-8 LPA for freshers. Remote Next.js roles pay ₹7-16 LPA. Next.js specialists command a premium over plain React developers.

Should I prepare system design for Next.js interviews?+

Basic architecture questions are common: when to use SSR vs SSG vs ISR, how to structure a Next.js project, caching strategies. Full system design is expected only for senior roles.

How do I show Next.js skills in interviews?+

Deploy a project on Vercel. Show Lighthouse scores (aim for 90+). Demonstrate server components, data fetching, and SEO features. Walk through your architecture decisions.

Can I use Next.js interview prep for React interviews too?+

Yes. Next.js interviews include React questions. The additional Next.js knowledge gives you an advantage in React interviews because it shows deeper understanding of rendering and performance.

Related Resources

Explore More Resources

PHP Laravel Interview Questions 2026

Top 15 PHP Laravel interview questions with answers for freshers and experienced...

Python Django Interview Questions 2026

Top 15 Python Django interview questions with answers for freshers. Prepare for ...

MERN Stack Interview Questions 2026

Top 15 MERN Stack interview questions with answers for freshers. MongoDB, Expres...

MEAN Stack Interview Questions 2026

Top 15 MEAN Stack interview questions with answers. Angular, Node.js, Express, M...

Get Started

Learn Next.js at CodingClave Lucknow

Join our practical-based Next.js training in Lucknow. 28-day, 45-day, and 6-month programs with projects, mentorship, and job assistance.

Apply Now WhatsApp Us View Next.js Course

Next.js Interview Questions and Answers 2026

Top 15 Next.js interview questions with answers for freshers. Server components, App Router, SSR, and ISR questions for 2026 interviews.