Top 150+ Most Asked Next.js Interview 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.

0%

Overall Progress

0/175

1.What is Next.js and why should we use it?

2.What are the main features of Next.js?

3.What is the difference between Next.js and React?

4.What is the difference between Next.js and Create React App?

5.How do you create a Next.js application?

6.What is file-based routing in Next.js?

7.How do you create a new page in Next.js?

8.What is the pages directory?

9.What is the app directory in Next.js 13+?

10.What is the difference between Pages Router and App Router?

11.What is the Link component? How is it different from <a> tag?

12.How do you navigate between pages programmatically?

13.What is the useRouter hook?

14.What is the Image component in Next.js?

15.Why should you use next/image instead of <img>?

16.What is the Head component used for?

17.How do you add custom meta tags?

18.What is the _app.js file?

19.What is the _document.js file?

20.What is the difference between _app.js and _document.js?

21.How do you add global CSS in Next.js?

22.What are CSS Modules?

23.How do you use Tailwind CSS with Next.js?

24.What is the public folder used for?

25.How do you serve static files?

26.What is Server-Side Rendering (SSR)?

27.What is Static Site Generation (SSG)?

28.What is Client-Side Rendering (CSR)?

29.What is Incremental Static Regeneration (ISR)?

30.What is the difference between SSR, SSG, CSR, and ISR?

31.When should you use SSR vs SSG vs ISR?

32.What is getStaticProps()? When do you use it?

33.What is getServerSideProps()? When do you use it?

34.What is getStaticPaths()? When do you use it?

35.What is the revalidate property in getStaticProps?

36.What are the different fallback options: false, true, and 'blocking'?

37.What happens when fallback: true is used?

38.What happens when fallback: 'blocking' is used?

39.Can you use getStaticProps with dynamic routes?

40.What data can you return from getStaticProps and getServerSideProps?

41.What is the context parameter in these data fetching methods?

42.Can you use browser APIs in getServerSideProps?

43.What are Server Components in Next.js 13+?

44.What are Client Components in Next.js 13+?

45.What is the difference between Server and Client Components?

46.What is the 'use client' directive?

47.What is the 'use server' directive?

48.When should you use Server Components vs Client Components?

49.Can Server Components use hooks like useState or useEffect?

50.How do you fetch data in Server Components?

51.What are dynamic routes in Next.js?

52.How do you create a dynamic route with [id].js?

53.What are catch-all routes [...slug].js?

54.What are optional catch-all routes [[...slug]].js?

55.How do you access route parameters?

56.What is router.query vs router.pathname?

57.How do you get query parameters from the URL?

58.What is shallow routing?

59.What is the difference between router.push() and router.replace()?

60.How do you implement nested routes?

61.What are route groups in App Router (folderName)?

62.What are parallel routes in Next.js?

63.What are intercepting routes?

64.How do you create protected routes?

65.What is router.back() and router.forward()?

66.How do you prefetch pages in Next.js?

67.What is automatic prefetching with Link?

68.How do you disable prefetching?

69.What is the scroll prop in Link component?

70.How do you handle 404 pages?

71.What are API routes in Next.js?

72.How do you create an API route?

73.What is the pages/api directory?

74.How do you handle different HTTP methods (GET, POST, PUT, DELETE)?

75.How do you access request body and query parameters?

76.What are Route Handlers in App Router?

77.What is the route.js file in App Router?

78.How do you handle CORS in API routes?

79.How do you implement authentication in API routes?

80.Can you use middleware with API routes?

81.What is middleware in Next.js?

82.How do you create middleware?

83.What is the middleware.js file?

84.What can you do in middleware?

85.How do you protect routes using middleware?

86.What is next.config.js?

87.How do you configure environment variables?

88.What is the difference between .env.local and .env.production?

89.What is the NEXT_PUBLIC_ prefix for environment variables?

90.How do you configure redirects in Next.js?

91.How do you configure rewrites in Next.js?

92.What is the difference between redirects and rewrites?

93.How do you add custom headers?

94.What is the basePath configuration?

95.How do you configure internationalization (i18n)?

96.How does Next.js optimize images?

97.What are the props of next/image component?

98.What is the priority prop in Image component?

99.What is the loading prop (lazy vs eager)?

100.What is automatic code splitting in Next.js?

101.How does Next.js handle bundle optimization?

102.What is the next/dynamic import?

103.How do you implement lazy loading with dynamic()?

104.What is the ssr: false option in dynamic imports?

105.What is next/font? How does it optimize fonts?

106.What is the next/script component?

107.What are the different script loading strategies?

108.What is Edge Runtime vs Node.js Runtime?

109.What is Streaming in Next.js?

110.What is React Suspense with Next.js?

111.What is the loading.js file in App Router?

112.What is the error.js file in App Router?

113.How do you handle errors in Server Components?

114.What is the not-found.js file?

115.How do you create custom 500 error pages?

116.How does caching work in Next.js?

117.What is the fetch() API in Next.js 13+?

118.What are the caching options: force-cache, no-store, revalidate?

119.What is the difference between cache: 'force-cache' and cache: 'no-store'?

120.What is revalidate in fetch options?

121.What is revalidatePath() function?

122.What is revalidateTag() function?

123.How do you implement on-demand revalidation?

124.What are Server Actions in Next.js?

125.How do you create Server Actions?

126.How do you use Server Actions with forms?

127.What is the useFormStatus hook?

128.What is the useFormState hook?

129.How do you handle mutations with Server Actions?

130.What is the difference between Server Actions and API Routes?

131.How do you implement SEO in Next.js?

132.What is the metadata object in App Router?

133.What is the generateMetadata() function?

134.How do you implement dynamic metadata?

135.How do you add Open Graph tags?

136.How do you add Twitter Card tags?

137.What is robots.txt generation?

138.What is sitemap.xml generation?

139.How do you implement structured data (JSON-LD)?

140.How do you handle canonical URLs?

141.How do you implement authentication in Next.js?

142.What is NextAuth.js?

143.How do you configure providers in NextAuth?

144.How do you protect pages with authentication?

145.How do you implement JWT authentication?

146.How do you store authentication tokens?

147.What are HTTP-only cookies?

148.How do you implement CSRF protection?

149.What are security headers in Next.js?

150.How do you prevent XSS attacks?

151.How do you build a Next.js application for production?

152.What is the difference between next dev, next build, and next start?

153.How do you analyze bundle size?

154.What is the @next/bundle-analyzer package?

155.How do you deploy Next.js on Vercel?

156.Can you deploy Next.js on AWS, Netlify, or custom servers?

157.What is static export (output: 'export')?

158.What are the limitations of static export?

159.How do you deploy Next.js with Docker?

160.What is the standalone output mode?

161.What is the layout.js file in App Router?

162.What is nested layouts?

163.What is route group layouts?

164.What is the template.js file?

165.What is the difference between layout.js and template.js?

166.How do you share data between layouts and pages?

167.What are loading UI and Streaming?

168.What is parallel routes and slots (@folder)?

169.How do you implement modal routes?

170.What is the default.js file in parallel routes?

171.How do you handle race conditions in data fetching?

172.What is React Server Components caching?

173.How do you implement optimistic UI updates?

174.What is the unstable_cache API?

175.How do you debug Next.js applications?