Basic Next.js Interview Questions
1. What is Next.js?
Next.js is a React framework that provides server-side rendering, static site generation, and a zero-configuration setup for building fast web applications.[1]
2. What are the main features of Next.js?
Key features include file-based routing, API routes, automatic code splitting, built-in CSS and Sass support, and image optimization.[1][2]
3. How do you create a new Next.js project?
Use the command npx create-next-app@latest my-app to scaffold a new Next.js project with all necessary configurations.[1]
4. What is the purpose of the pages directory in Next.js?
The pages directory enables file-based routing where each file becomes a route. For example, pages/about.js creates the /about route.[1][2]
5. What is the difference between pages and app directory in Next.js?
The pages directory uses file-based routing with data fetching methods like getStaticProps, while the app directory (Next.js 13+) uses React Server Components and a new file convention.[3]
6. What are API Routes in Next.js?
API Routes allow you to build backend API endpoints within the frontend application by creating files in the pages/api directory.[1][2]
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from API Route!' });
}Intermediate Next.js Interview Questions
7. What is Server-Side Rendering (SSR) in Next.js?
SSR renders pages on each request using getServerSideProps, ideal for dynamic content that changes frequently.[1][2]
8. Explain Static Site Generation (SSG) in Next.js.
SSG pre-renders pages at build time using getStaticProps, providing the fastest performance for content that doesn’t change often.[1]
9. What is the difference between getStaticProps and getServerSideProps?
getStaticProps runs at build time or on-demand with revalidation, while getServerSideProps runs on every request, making it slower but more dynamic.[1][2]
// getStaticProps - runs at build time
export async function getStaticProps() {
const data = await fetchData();
return { props: { data } };
}10. What is getStaticPaths and when do you use it?
getStaticPaths generates paths for dynamic routes at build time. It’s required when using getStaticProps with dynamic routes.[1][5]
11. Explain the fallback property in getStaticPaths.
fallback: false shows 404 for unknown paths, fallback: true generates pages on-demand, and fallback: ‘blocking’ serves after generation.[1][5]
12. How do you implement dynamic routing in Next.js?
Create a file like pages/posts/[id].js. Access the dynamic parameter using router.query.id or context.params.id.[1][4]
13. What is next/dynamic and how do you use it?
next/dynamic enables code splitting by dynamically importing components, improving initial load performance.[2]
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));Advanced Next.js Interview Questions
14. What is Incremental Static Regeneration (ISR)?
ISR allows static pages to be regenerated in the background after deployment using the revalidate property in getStaticProps.[1][3]
export async function getStaticProps() {
return {
props: { data },
revalidate: 60 // Regenerate every 60 seconds
};
}15. How does middleware work in Next.js?
Middleware runs before a request is completed and can modify requests, responses, or perform redirects using middleware.js in the root directory.[2][5]
16. What is the purpose of next/script component?
next/script optimizes third-party scripts loading with strategies like beforeInteractive, afterInteractive, and lazyOnload.[2]
17. How do you handle authentication in Next.js API routes?
Validate JWT tokens or session cookies in API route handlers before processing requests.[2]
export default function handler(req, res) {
const token = req.cookies.token;
if (!verifyToken(token)) {
return res.status(401).json({ error: 'Unauthorized' });
}
// Process request
}18. What is React Strict Mode in Next.js?
Strict Mode helps identify unsafe lifecycle methods and deprecated APIs by intentionally double-invoking certain functions during development.[2]
19. How do you optimize images in Next.js?
Use the built-in Image component which automatically optimizes images with lazy loading, responsive sizes, and WebP format support.[1]
20. Explain error boundaries in Next.js.
Error boundaries catch JavaScript errors in the component tree and display fallback UI using componentDidCatch lifecycle method.[1][4]
Scenario-Based Next.js Questions
21. At Zoho, how would you fetch user-specific data for a dashboard page?
Use getServerSideProps to fetch user data server-side based on the session or authentication token for each dashboard request.[1]
22. How would you implement a blog with posts at Flipkart using Next.js?
Use getStaticProps for blog list, getStaticPaths with fallback: true for individual posts, and ISR for automatic content updates.[1][5]
23. For Paytm’s transaction history page, when would you choose SSR over SSG?
Choose SSR for real-time transaction data that changes frequently and requires user-specific information on every request.[1][2]
24. How do you prevent API route access from Salesforce’s public frontend?
Implement token validation and origin checking in API route handlers to ensure only authenticated requests are processed.[2]
Performance & Advanced Topics
25. What are common performance optimization techniques in Next.js?
Code splitting with dynamic imports, Image optimization, ISR, caching strategies, and proper data fetching methods.[1][4]
26. How do you handle environment variables in Next.js?
Create a .env.local file and prefix public variables with NEXT_PUBLIC_. Server-side variables are automatically hidden from the client.[2]
27. What security practices should you follow in Next.js API routes?
Validate and sanitize inputs, use HTTPS, implement rate limiting, secure headers, and proper CORS configuration.[2][4]
28. How do you implement TypeScript in Next.js?
Enable TypeScript by creating a tsconfig.json file or using create-next-app --typescript. Type page props and API handlers.[2]
29. Explain the singleton router pattern in Next.js.
Next.js maintains a single router instance across the application, preventing multiple router instances and ensuring consistent navigation.[2]
30. For Adobe’s large-scale creative platform, how would you scale Next.js?
Use ISR for frequently accessed pages, API routes for dynamic data, edge caching, CDN distribution, and incremental builds for scalability.[1][2]
## Key Citations
[1] GeeksforGeeks Next.js Interview Questions
[2] GitHub mrhrifat/nextjs-interview-questions
[3] Dev.to React.js and Next.js Interview Questions
[4] JoinLeland Top Next.js Questions
[5] MentorCruise Next.js Questions
