Master Next.js Interviews: Basic to Advanced Questions

Prepare for your Next.js interview with these 30 carefully curated questions covering conceptual, practical, and scenario-based topics. Questions progress from basic to advanced, suitable for freshers, 1-3 years, and 3-6 years experienced developers.[1][2]

Basic Next.js Interview Questions (1-10)

1. What is Next.js and why use it over regular React?

Next.js is a React framework that provides server-side rendering, static site generation, built-in routing, and API routes. It improves performance, SEO, and developer experience compared to client-side React apps.[1][2]

2. How do you create a new Next.js project?

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

This command scaffolds a production-ready Next.js application with TypeScript, ESLint, and Tailwind CSS support.[2][3]

3. What are the file-based routing conventions in Next.js?

Pages are created in the pages/ or app/ directory. File names become routes: pages/about.js → /about, pages/blog/[id].js → dynamic route /blog/:id.[1][3]

4. What is the purpose of next/script component?

The <Script> component optimizes third-party script loading with strategies like lazyOnload, beforeInteractive, and afterInteractive to improve performance.[3]

5. How do you enable TypeScript in Next.js?

Rename your jsconfig.json to tsconfig.json or use create-next-app with --typescript flag. Next.js automatically configures TypeScript compilation.[3]

6. What are environment variables in Next.js?

Environment variables are loaded via .env.local files. Prefix with NEXT_PUBLIC_ for client-side access: NEXT_PUBLIC_API_URL.[3]

7. What is React Strict Mode in Next.js?

Strict Mode helps identify unsafe code patterns by intentionally double-invoking certain functions during development. Enabled by default in next.config.js.[3]

8. How do you handle programmatic navigation in Next.js?

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/dashboard');
  };
  
  return Go to Dashboard;
}

[3]

9. What is the difference between push() and replace() in useRouter?

push() adds a new entry to browser history (back button works). replace() replaces current history entry (no back button).[3]

10. What is a singleton router in Next.js?

Next.js maintains a single router instance across the application, preventing multiple router instances and ensuring consistent navigation behavior.[3]

Intermediate Next.js Interview Questions (11-20)

11. Explain getStaticProps vs getServerSideProps

	getStaticProps	getServerSideProps
Execution Time	Build time	Every request
Performance	Fast (pre-rendered)	Slower (server-rendered)
Dynamic Data	Static at build	Fully dynamic
SEO	Excellent	Good

[2]

12. What is getStaticPaths and when to use it?

getStaticPaths defines dynamic paths for SSG during build time. Required for dynamic routes using getStaticProps. Returns paths array and fallback strategy.[2][3]

13. What are the fallback options in getStaticPaths?

• false: 404 for undefined paths
• true: Render fallback UI while generating page
• 'blocking': Wait for page generation before serving

[2]

14. What are API Routes in Next.js?

API Routes enable serverless backend functionality. Create files in pages/api/. Each file becomes an API endpoint handling HTTP methods.[1][3]

15. How do you create an API route in Next.js?

// pages/api/users.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ users: [] });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

[6]

16. What is middleware in Next.js?

Middleware runs before cached content is served, enabling authentication, redirects, and request rewriting at the edge. Created in middleware.js at project root.[1][3]

17. How do you implement error boundaries in Next.js?

Use React error boundaries for client-side errors and Next.js error pages (_error.js, 404.js) for server-side errors. Wrap components with error boundary classes.[2][5]

18. What is next/dynamic and why use it?

next/dynamic enables code splitting by dynamically importing components. Reduces initial bundle size and improves loading performance.[1][3]

19. How do you implement custom error pages?

// pages/404.js
export default function Custom404() {
  return 
Page Not Found
;
}

// pages/_error.js
export default function Error({ statusCode }) {
  return 
Error: {statusCode}
;
}

[1]

20. What is Incremental Static Regeneration (ISR)?

ISR allows updating static pages after build without full rebuild. Add revalidate seconds to getStaticProps return value.[2]

Advanced Next.js Interview Questions (21-30)

21. Explain the Next.js build process

Next.js build process: TypeScript compilation → bundling → optimization → static generation → server bundle creation → outputs optimized static files and server functions.[1]

22. How do you optimize images in Next.js?

Use the built-in <Image> component with automatic optimization, lazy loading, and WebP/AVIF format conversion. Supports priority prop for LCP images.[2]

23. What are Server Actions in Next.js 13+?

Server Actions enable direct server function calls from client components using "use server" directive. Simplifies form handling and mutations.[4]

24. How do you handle authentication tokens securely?

• Store JWT in httpOnly cookies
• Use middleware for token validation
• Implement refresh token rotation
• Never store tokens in localStorage

[3]

25. Explain code splitting techniques in Next.js

• Automatic page-based splitting
• next/dynamic for components
• Lazy loading with Intersection Observer
• Dynamic imports for heavy libraries

[1][2]

26. Scenario: At Swiggy, how would you implement real-time order updates?

Use API routes with Server-Sent Events (SSE) or WebSockets. Implement optimistic updates with SWR/React Query, fallback to polling for reconnection.[1]

27. What security practices should you follow in Next.js API routes?

• Validate/sanitize inputs
• Rate limiting
• CORS configuration
• HTTPS enforcement
• Secret management

[3]

28. Scenario: Zoho needs dynamic dashboard with heavy data. Approach?

// Use ISR + React Query
export async function getStaticProps() {
  return {
    props: { initialData: await fetchDashboard() },
    revalidate: 60 // 1 minute
  };
}

// Client-side infinite scroll with React Query

[1]

29. How do you debug hydration errors in Next.js?

• Ensure server/client render match
• Avoid browser-only APIs during SSR
• Use useEffect for client-only code
• Check suppressHydrationWarning

[4]

30. Performance: Optimize Salesforce-like dashboard loading

• Skeleton screens during loading
• ISR for dashboard data
• Pagination + virtual scrolling
• Route-based code splitting
• Image optimization + lazy loading

Atlassian teams use this approach for Jira dashboard performance.[2]