Web Development
Next.js Questions Comprehensive collection of Next.js interview questions covering fundamentals, the App Router, rendering strategies (SSR, SSG, ISR), and core components. Essential for modern web developers.
1. What is Next.js and why should we use it? Beginner 2. What are the main features of Next.js? Beginner 3. What is the difference between Next.js and React? Beginner 4. What is the difference between Next.js and Create React App? Beginner 5. How do you create a Next.js application? Beginner 6. What is file-based routing in Next.js? Beginner 7. How do you create a new page in Next.js? Beginner 8. What is the pages directory? Beginner 9. What is the app directory in Next.js 13+? Intermediate 10. What is the difference between Pages Router and App Router? Intermediate 11. What is the Link component? How is it different from <a> tag? Beginner 12. How do you navigate between pages programmatically? Beginner 13. What is the useRouter hook? Beginner 14. What is the Image component in Next.js? Beginner 15. Why should you use next/image instead of <img>? Beginner 16. What is the Head component used for? Beginner 17. How do you add custom meta tags? Intermediate 18. What is the _app.js file? Intermediate 19. What is the _document.js file? Intermediate 20. What is the difference between _app.js and _document.js? Advanced 21. How do you add global CSS in Next.js? Beginner 22. What are CSS Modules? Beginner 23. How do you use Tailwind CSS with Next.js? Beginner 24. What is the public folder used for? Beginner 25. How do you serve static files? Beginner 26. What is Server-Side Rendering (SSR)? Intermediate 27. What is Static Site Generation (SSG)? Intermediate 28. What is Client-Side Rendering (CSR)? Intermediate 29. What is Incremental Static Regeneration (ISR)? Intermediate 30. What is the difference between SSR, SSG, CSR, and ISR? Advanced 31. When should you use SSR vs SSG vs ISR? Advanced 32. What is getStaticProps()? When do you use it? Intermediate 33. What is getServerSideProps()? When do you use it? Intermediate 34. What is getStaticPaths()? When do you use it? Intermediate 35. What is the revalidate property in getStaticProps? Intermediate 36. What are the different fallback options: false, true, and 'blocking'? Advanced 37. What happens when fallback: true is used? Advanced 38. What happens when fallback: 'blocking' is used? Advanced 39. Can you use getStaticProps with dynamic routes? Intermediate 40. What data can you return from getStaticProps and getServerSideProps? Intermediate 41. What is the context parameter in these data fetching methods? Advanced 42. Can you use browser APIs in getServerSideProps? Advanced 43. What are Server Components in Next.js 13+? Intermediate 44. What are Client Components in Next.js 13+? Intermediate 45. What is the difference between Server and Client Components? Advanced 46. What is the 'use client' directive? Intermediate 47. What is the 'use server' directive? Advanced 48. When should you use Server Components vs Client Components? Advanced 49. Can Server Components use hooks like useState or useEffect? Intermediate 50. How do you fetch data in Server Components? Intermediate 51. What are dynamic routes in Next.js? Beginner 52. How do you create a dynamic route with [id].js? Beginner 53. What are catch-all routes [...slug].js? Intermediate 54. What are optional catch-all routes [[...slug]].js? Intermediate 55. How do you access route parameters? Beginner 56. What is router.query vs router.pathname? Intermediate 57. How do you get query parameters from the URL? Beginner 58. What is shallow routing? Advanced 59. What is the difference between router.push() and router.replace()? Beginner 60. How do you implement nested routes? Intermediate 61. What are route groups in App Router (folderName)? Intermediate 62. What are parallel routes in Next.js? Advanced 63. What are intercepting routes? Advanced 64. How do you create protected routes? Intermediate 65. What is router.back() and router.forward()? Beginner 66. How do you prefetch pages in Next.js? Intermediate 67. What is automatic prefetching with Link? Intermediate 68. How do you disable prefetching? Beginner 69. What is the scroll prop in Link component? Beginner 70. How do you handle 404 pages? Beginner 71. What are API routes in Next.js? Beginner 72. How do you create an API route? Beginner 73. What is the pages/api directory? Beginner 74. How do you handle different HTTP methods (GET, POST, PUT, DELETE)? Intermediate 75. How do you access request body and query parameters? Intermediate 76. What are Route Handlers in App Router? Intermediate 77. What is the route.js file in App Router? Intermediate 78. How do you handle CORS in API routes? Advanced 79. How do you implement authentication in API routes? Advanced 80. Can you use middleware with API routes? Advanced 81. What is middleware in Next.js? Intermediate 82. How do you create middleware? Intermediate 83. What is the middleware.js file? Intermediate 84. What can you do in middleware? Advanced 85. How do you protect routes using middleware? Advanced 86. What is next.config.js? Beginner 87. How do you configure environment variables? Beginner 88. What is the difference between .env.local and .env.production? Intermediate 89. What is the NEXT_PUBLIC_ prefix for environment variables? Intermediate 90. How do you configure redirects in Next.js? Intermediate 91. How do you configure rewrites in Next.js? Advanced 92. What is the difference between redirects and rewrites? Advanced 93. How do you add custom headers? Intermediate 94. What is the basePath configuration? Intermediate 95. How do you configure internationalization (i18n)? Advanced 96. How does Next.js optimize images? Beginner 97. What are the props of next/image component? Intermediate 98. What is the priority prop in Image component? Intermediate 99. What is the loading prop (lazy vs eager)? Beginner 100. What is automatic code splitting in Next.js? Intermediate 101. How does Next.js handle bundle optimization? Advanced 102. What is the next/dynamic import? Intermediate 103. How do you implement lazy loading with dynamic()? Intermediate 104. What is the ssr: false option in dynamic imports? Intermediate 105. What is next/font? How does it optimize fonts? Advanced 106. What is the next/script component? Intermediate 107. What are the different script loading strategies? Advanced 108. What is Edge Runtime vs Node.js Runtime? Advanced 109. What is Streaming in Next.js? Advanced 110. What is React Suspense with Next.js? Intermediate 111. What is the loading.js file in App Router? Beginner 112. What is the error.js file in App Router? Intermediate 113. How do you handle errors in Server Components? Advanced 114. What is the not-found.js file? Beginner 115. How do you create custom 500 error pages? Beginner 116. How does caching work in Next.js? Advanced 117. What is the fetch() API in Next.js 13+? Intermediate 118. What are the caching options: force-cache, no-store, revalidate? Intermediate 119. What is the difference between cache: 'force-cache' and cache: 'no-store'? Intermediate 120. What is revalidate in fetch options? Intermediate 121. What is revalidatePath() function? Advanced 122. What is revalidateTag() function? Advanced 123. How do you implement on-demand revalidation? Advanced 124. What are Server Actions in Next.js? Intermediate 125. How do you create Server Actions? Intermediate 126. How do you use Server Actions with forms? Intermediate 127. What is the useFormStatus hook? Intermediate 128. What is the useFormState hook? Advanced 129. How do you handle mutations with Server Actions? Advanced 130. What is the difference between Server Actions and API Routes? Advanced 131. How do you implement SEO in Next.js? Intermediate 132. What is the metadata object in App Router? Beginner 133. What is the generateMetadata() function? Intermediate 134. How do you implement dynamic metadata? Intermediate 135. How do you add Open Graph tags? Intermediate 136. How do you add Twitter Card tags? Intermediate 137. What is robots.txt generation? Intermediate 138. What is sitemap.xml generation? Intermediate 139. How do you implement structured data (JSON-LD)? Advanced 140. How do you handle canonical URLs? Advanced 141. How do you implement authentication in Next.js? Intermediate 142. What is NextAuth.js? Beginner 143. How do you configure providers in NextAuth? Intermediate 144. How do you protect pages with authentication? Intermediate 145. How do you implement JWT authentication? Advanced 146. How do you store authentication tokens? Intermediate 147. What are HTTP-only cookies? Intermediate 148. How do you implement CSRF protection? Advanced 149. What are security headers in Next.js? Advanced 150. How do you prevent XSS attacks? Advanced 151. How do you build a Next.js application for production? Beginner 152. What is the difference between next dev, next build, and next start? Beginner 153. How do you analyze bundle size? Intermediate 154. What is the @next/bundle-analyzer package? Intermediate 155. How do you deploy Next.js on Vercel? Beginner 156. Can you deploy Next.js on AWS, Netlify, or custom servers? Intermediate 157. What is static export (output: 'export')? Intermediate 158. What are the limitations of static export? Advanced 159. How do you deploy Next.js with Docker? Advanced 160. What is the standalone output mode? Advanced 161. What is the layout.js file in App Router? Beginner 162. What is nested layouts? Intermediate 163. What is route group layouts? Intermediate 164. What is the template.js file? Advanced 165. What is the difference between layout.js and template.js? Advanced 166. How do you share data between layouts and pages? Intermediate 167. What are loading UI and Streaming? Advanced 168. What is parallel routes and slots (@folder)? Advanced 169. How do you implement modal routes? Expert 170. What is the default.js file in parallel routes? Expert 171. How do you handle race conditions in data fetching? Advanced 172. What is React Server Components caching? Advanced 173. How do you implement optimistic UI updates? Advanced 174. What is the unstable_cache API? Expert 175. How do you debug Next.js applications? Intermediate