NextJs interview questions

Preview Questions

1. What is Next.js?

   Next.js is a production-ready React framework for building full-stack web applications. It provides a structured approach to building scalable applications with server-side rendering, static site generation, and API...

2. What are the rendering methods in Next.js?

   Next.js supports multiple rendering strategies enabling developers to choose the optimal approach for each page. Static Site Generation (SSG) pre-renders pages at build time producing static HTML files. Server-Side...

3. What is getStaticProps in Next.js?

   getStaticProps is a special function enabling static generation with data fetching. It runs at build time fetching data and passing it as props to page components. Data fetched by getStaticProps is cached and served...

4. What is getServerSideProps in Next.js?

   getServerSideProps enables server-side rendering fetching data on each request. It runs on the server before rendering the page returning props to the component. This approach ensures data is always fresh enabling...

5. Explain SSR, SSG, and CSR?

   SSG (Static Site Generation) pre-renders pages at build time producing static files served to all users. This is the fastest approach providing excellent performance but works only for content that doesn't change...

6. What are API Routes in Next.js?

   API Routes enable building backend endpoints within Next.js applications. Any file in the api directory inside pages automatically becomes an API endpoint. API Routes handle HTTP requests returning JSON responses. They...

7. What do you mean by file-based routing in Next.js?

   File-based routing automatically creates routes based on file structure in the pages directory. Every file becomes a route without explicit route definition eliminating routing configuration complexity. Pages directory...

8. How do you perform Image Optimization in Next.js?

   Next.js provides the Image component optimizing images automatically. It serves appropriately sized images for different devices reducing bandwidth and improving load times. The Image component lazy loads images by...