1. What is Next.js?

Next.js is a popular React framework designed for building scalable, production-ready web applications. It provides features like server-side rendering, static site generation, and API routes.

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

Key features of Next.js include:

• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• Incremental Static Regeneration (ISR)
• API Routes
• File-based routing
• Image Optimization
• Automatic code splitting

3. How is Next.js different from React.js?

While React.js is a library for building UIs, Next.js is a framework built on top of React, providing additional features such as SSR, SSG, and routing out of the box.

4. What are the advantages of using Next.js over React.js?

Next.js offers:

• Better SEO performance through SSR.
• Built-in routing with file-based routing.
• Static site generation for faster page loads.
• Automatic code-splitting, leading to better performance.

5. How does Server-Side Rendering (SSR) work in Next.js?

SSR in Next.js allows pages to be rendered on the server at request time, ensuring that the page's content is available to search engines and improving the initial load time.

6. What is Static Site Generation (SSG) in Next.js, and when would you use it?

SSG generates HTML at build time for fast loading and improved SEO. It’s ideal for pages that don’t change often, such as blogs or marketing pages.

7. What are API routes in Next.js, and how do they work?

API routes allow you to build backend functionality directly in your Next.js app. These are serverless functions that handle HTTP requests like GET, POST, PUT, etc.

8. What is Incremental Static Regeneration (ISR) in Next.js, and how is it different from SSG?

ISR enables static content to be updated after the site has been built, allowing you to regenerate pages in the background while serving static content to users.

9. How do you handle dynamic routes in Next.js?

Dynamic routes in Next.js are handled using brackets ([]). For example, pages/[id].js will create dynamic routes based on the id parameter.

10. How does code splitting work in Next.js?

Next.js automatically splits code by page. This means only the necessary code for each page is loaded, improving performance and reducing bundle size.

11. What is the difference between Static Rendering (SSG) and Server Rendering (SSR) in Next.js?

• SSG generates HTML at build time and serves it for faster page loads.
• SSR generates HTML on the server for each request, ensuring dynamic content.

12. What is the App Router in Next.js?

The App Router in Next.js is a new routing system introduced to simplify the routing mechanism, offering enhanced flexibility and control compared to the Pages Router.

13. How do layouts work with the App Router?

Layouts in the App Router allow you to structure reusable components across multiple pages, making it easier to manage UI consistency and shared components.

14. What is the difference between the app directory and the pages directory?

The app directory is used with the new App Router and supports features like layouts, loading states, and more advanced routing capabilities. The pages directory is used in the traditional Pages Router.

15. What are Server Components and Client Components in Next.js?

• Server Components are rendered on the server and sent as HTML.
• Client Components are rendered on the client and allow for interactivity.

16. How does Next.js improve SEO compared to traditional client-side rendering?

Next.js supports SSR and SSG, which generates pre-rendered HTML content, making it more SEO-friendly compared to traditional client-side rendering (CSR).

17. How does Next.js handle environment variables?

Environment variables are handled via .env files (e.g., .env.local) and can be accessed in both the client and server-side code using process.env.

18. How do you create dynamic API routes in Next.js?

Dynamic API routes are created by using the same bracket notation ([param]) in the pages/api directory.

19. What is Middleware in Next.js, and how do they work?

Middleware allows you to run code before a request is completed, enabling features like authentication, logging, or redirecting users.

20. What are React Server Components, and how are they used in Next.js?

React Server Components allow parts of the UI to be rendered on the server, reducing the client-side JavaScript bundle size.

21. How React Server Components Work:

React Server Components allow rendering on the server, improving performance by sending only necessary JavaScript to the client.

22. How to Use React Server Components in Next.js:

To use React Server Components in Next.js, create a .server.js file in the appropriate directory, allowing the component to be rendered server-side.

23. Benefits of Using React Server Components:

• Reduced client-side JS.
• Better performance.
• Improved scalability.

24. What is next/link, and how does it differ from a standard tag?

next/link is a React component for client-side navigation, providing prefetching and reducing page reloads, unlike a standard <a> tag.

25. What is next/image, and what are its advantages?

next/image automatically optimizes images for better performance, including resizing, lazy loading, and WebP support.

26. What are rewrites in Next.js, and how do they work?

Rewrites allow you to map an incoming request path to a different destination without changing the URL in the browser.

27. What is the next.config.js file, and what is its role?

next.config.js is a configuration file in Next.js that allows you to customize the build process, routing, environment variables, and more.

28. How does Next.js handle image optimization?

Next.js optimizes images by automatically resizing, compressing, and serving them in the most appropriate format for the client.

29. What is Next.js’s hybrid rendering?

Hybrid rendering in Next.js allows you to use SSR, SSG, or ISR on a per-page basis, providing flexibility in how content is rendered.

30. What are the main benefits of hybrid rendering in Next.js?

Hybrid rendering offers the ability to combine different rendering strategies to maximize performance, SEO, and flexibility.

31. Explain how data fetching works in Next.js.

Data fetching in Next.js can be done using getStaticProps (SSG), getServerSideProps (SSR), or getInitialProps.

32. How do you manage state in a Next.js application?

State management in Next.js can be done using React's useState and useContext, or with libraries like Redux, Recoil, or Zustand.

33. How does routing work in Next.js?

Routing in Next.js is based on the file system. The files in the pages directory automatically become routes.

34. How can you handle nested routing in Next.js?

Nested routing is handled by creating subdirectories inside the pages directory. For example, pages/blog/[id].js supports dynamic routes.

35. What is the purpose of the public folder in a Next.js project?

The public folder is used for static assets like images, fonts, or other files that can be accessed directly via URL.

36. How do you create a custom 500 error page in Next.js?

To create a custom 500 error page, create a pages/_error.js file and customize the error handling for both 404 and 500 errors.

37. How does file-based routing work in Next.js?

File-based routing automatically maps files in the pages directory to routes based on their file names and structure.

38. What are the options for styling components in Next.js?

You can style components using traditional CSS, CSS-in-JS libraries like styled-components, or CSS modules.

39. How does TypeScript work with Next.js?

Next.js has built-in support for TypeScript. You can create a tsconfig.json file, and it will automatically detect and work with TypeScript files.

40. How can you configure TypeScript in Next.js?

Simply add a tsconfig.json file to your project root. Next.js will automatically configure TypeScript for you, and you can start using .ts and .tsx files.

(This pattern will continue for all 103 questions)

41. How can you optimize performance in a Next.js app?

• Use next/image for images
• Use SSR or SSG where appropriate
• Enable lazy loading for components
• Use dynamic imports and code splitting
• Minimize third-party libraries

42. What is ISR (Incremental Static Regeneration) and how do you use it?

ISR allows you to update static content after the site is built using revalidate in getStaticProps.

43. How do you handle redirects in Next.js?

Redirects are configured in next.config.js using the redirects() function.

44. What is the difference between getStaticProps and getServerSideProps?

• getStaticProps: Fetches data at build time.
• getServerSideProps: Fetches data on each request.

45. How do you use environment variables in Next.js?

Store variables in .env.local, and access them with process.env.MY_VAR. Prefix with NEXT_PUBLIC_ to use them in the client.

46. How do you add custom headers in Next.js?

Use headers() in next.config.js to add custom HTTP headers.

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

It’s a built-in component that optimizes images with lazy loading, resizing, and format conversion.

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

Using next/link, prefetching is enabled by default on visible links. You can also manually enable it with prefetch={true}.

49. What is the difference between useRouter and Link?

• useRouter: Hook to access routing methods.
• Link: Component for client-side navigation.

50. How can you implement middleware in Next.js?

Add a middleware.ts file in the root or a route directory to intercept requests and modify behavior.

51. What is Edge Middleware in Next.js?

Runs on the edge (closer to users) for faster response times, used for auth, redirects, rewrites, etc.

52. How can you protect routes in Next.js?

Use middleware or HOCs to check authentication before rendering protected routes.

53. How do you set up API rate limiting in Next.js?

Use libraries like express-rate-limit or custom logic inside API routes to track and limit requests.

54. What is ISR's revalidate property?

It defines how often a page should be regenerated in seconds.

55. How do you deploy a Next.js app?

You can deploy to Vercel, Netlify, or any server that supports Node.js. Vercel is the recommended platform.

56. How can you use Next.js with Tailwind CSS?

Install Tailwind, add it to postcss.config.js, and import it in your main CSS file.

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

• next dev: Starts the dev server
• next build: Builds the app for production
• next start: Starts the production server

58. What’s new in Next.js 13/14/15?

Includes App Router, Server Components, Layouts, React 18 support, and better performance tools.

59. How does ISR help improve performance?

ISR delivers static pages but allows them to be updated in the background, improving freshness and speed.

60. How do you handle errors in API routes?

Use try-catch blocks, return proper status codes and messages, and log errors.

61. How can you add analytics to a Next.js app?

Use tools like Google Analytics, Plausible, or Vercel Analytics, often via custom _app.tsx.

62. How to create a custom App component?

Create _app.js or _app.tsx inside the pages directory to override default App behavior.

63. How to create a custom Document?

Use _document.js to customize the HTML structure, add fonts, or manage the <html> and <body> tags.

64. What are loading UI components in the App Router?

Special files like loading.tsx used to show UI during lazy data fetching or navigation.

65. What is a fallback page in Next.js?

Used during ISR or dynamic routes to show a loading state while a page is being generated.

66. What are dynamic imports?

They allow you to load components on demand using next/dynamic.

67. How does Next.js support internationalization (i18n)?

Define locales and defaultLocale in next.config.js, and Next.js will handle route-based translations.

68. What are Parallel Routes in Next.js?

Allow rendering different layouts or content in parallel within the same page structure.

69. What are Intercepting Routes?

Enable custom rendering for a nested route from a parent segment without full remounting.

70. Can you use Redux with Next.js?

Yes, use next-redux-wrapper to integrate Redux for SSR and SSG support.

71. How do you add meta tags in Next.js?

Use the Head component from next/head to manage <title>, <meta>, etc.

72. How do you fetch data from an external API?

Use fetch, axios, or getServerSideProps/getStaticProps for server-side fetching.

73. How do you handle 404 pages in Next.js?

Create pages/404.js to customize the "Page Not Found" experience.

74. What is next export?

Exports your Next.js app as a static site with no server rendering or dynamic routes.

75. Can you use GraphQL in Next.js?

Yes, with libraries like Apollo Client or urql.

76. How do you handle authentication in Next.js?

Use libraries like next-auth, or custom logic with JWTs, cookies, sessions.

77. Can Next.js be used for mobile apps?

Not directly, but you can build PWAs or use APIs with React Native frontends.

78. What is pre-rendering?

Rendering HTML in advance either at build time (SSG) or request time (SSR).

79. How do you create a sitemap?

Use packages like next-sitemap or write custom scripts to generate one during build.

80. How do you create a robots.txt?

Add it to the public folder or generate it dynamically in API routes or middleware.

81. How to add Google Fonts in Next.js?

Use the <link> tag in _document.js or use @next/font for better performance.

82. How does lazy loading work?

Lazy loading in Next.js loads components/images only when they enter the viewport.

83. How do you test a Next.js app?

Use Jest and React Testing Library for unit/integration tests; Playwright or Cypress for E2E.

84. How do you handle state across pages?

Use global state tools like Redux, Context API, Zustand, or Jotai.

85. Can you use MongoDB with Next.js?

Yes. You can use it via API routes or connect in getServerSideProps.

86. How to create breadcrumbs in Next.js?

Use useRouter to track path and build a breadcrumb component dynamically.

87. How do you improve accessibility?

Use semantic HTML, ARIA labels, and audit with Lighthouse or axe-core.

88. How to add a loading spinner?

Use state to conditionally render a loading spinner or use App Router’s loading.tsx.

89. How to implement dark mode?

Use useState, localStorage, or libraries like next-themes.

90. What is a layout shift and how to prevent it?

It’s when content moves during load. Use defined image dimensions, avoid late-loading fonts.

91. What is hydration?

The process where React makes HTML interactive on the client side.

92. What is the difference between CSR and SSR?

CSR renders in the browser; SSR renders on the server and sends HTML to the browser.

93. What are RSC (React Server Components)?

React components rendered on the server to reduce JS sent to the client.

94. Can you use cookies in Next.js?

Yes. Read/write cookies in API routes, getServerSideProps, or middleware.

95. How do you handle form submissions?

Use client-side fetch to call API routes or use traditional <form> with action set to your route.

96. How to add CORS support?

Add headers in API routes or middleware.

97. What’s the best way to structure a Next.js project?

Use folders like components, pages, lib, styles, public, and hooks for better organization.

98. How do you add custom fonts?

Add them to the public folder or use Google Fonts via _document.js.

99. How to create reusable layouts?

Use layout components and wrap them in _app.js or App Router’s layout.tsx.

100. How do you implement role-based access control?

Check user roles in middleware, API routes, or getServerSideProps.

101. What are the limitations of Next.js?

• Less flexible for dynamic content without SSR
• Limited plugin ecosystem compared to Gatsby
• SSR can increase server costs

102. What are some good libraries to use with Next.js?

• next-auth
• swr
• react-query
• axios
• tailwindcss

103. Why choose Next.js for your next project?

• SEO-friendly
• Fast performance
• SSR/SSG flexibility
• Developer experience

---

Made with ❤️ for modern front-end developers.

I hope this was helpful, and I’d be happy to connect and follow each other!

• LinkedIn