Blog

25 Next JS Interview Questions You Should Know

Are you preparing for frontend interview? This article will help you go through some of the must know Next JS Interview questions.

Next.js is a popular open-source web development framework built on top of React, created by Vercel. It is designed to enable developers to build server-side rendered (SSR) and static web applications quickly and efficiently.

Next JS Interview Questions

In this article, we will share some next.js MCQ questions with answers that helps you to prepare for your next interview.

NEXT JS Interview Questions with Answers

Q1. In Next.js, which function is used to fetch data at build time?

  • getInitialProps
  • getStaticProps
  • getServerSideProps
  • useEffect
View Answer

getStaticProps

Q2. What does each file in the pages directory correspond to in a Next.js application?

  • A component
  • A route
  • A stylesheet
  • An API endpoint
View Answer

A route

Q3. SSR stands for?

  • Server static resources
  • Server side response
  • Server Side Rendering
  • None of these
View Answer

Server Side Rendering

Q4. Which of the following methods in Next.js is used for server-side rendering on each request?

  • getStaticProps
  • getStaticPaths
  • getServerSideProps
  • getInitialProps
View Answer

getServerSideProps

Q5. Which file is used to define custom server configuration in Next.js?

  • server.js
  • next.config.js
  • customServer.js
  • nextServer.js
View Answer

next.config.js

Q6. How do you enable Incremental Static Regeneration in Next.js?

  • By using getStaticProps with revalidate key
  • By using getServerSideProps
  • By using getInitialProps
  • By using useEffect
View Answer

By using getStaticProps with revalidate key

Q7. Which file is used to customize the HTML document in Next.js?

  • _app.js
  • _document.js
  • index.js
  • _html.js
View Answer

_document.js

Q8. Which of the following is a valid way to define dynamic routes in Next.js?

  • [param].js
  • {param}.js
  • (param).js
  • [{param}].js
View Answer

[param].js

Q9. getStaticProps() function runs at?

  • Runtime
  • Compile time
  • Build time
  • Both
View Answer

Build time

Q10. Does getStaticProps have access to the incoming request?

  • Yes
  • No
View Answer

No

Q11. Which method would you use to fetch data on the client-side in a Next.js component?

  • getStaticProps
  • getServerSideProps
  • getInitialProps
  • useEffect
View Answer

useEffect

Q12. How can you enable API routes in a Next.js application?

  • By creating files in the /api directory
  • By configuring apiRoutes in next.config.js
  • By creating files in the /api directory and configuring routes in server.js
  • By using createApiRoute function
View Answer

By creating files in the /api directory

Q13. What is the use of the next/link component?

  • To fetch data from APIs
  • To handle navigation between pages
  • To manage global state
  • To optimize images
View Answer

To handle navigation between pages

Q14. Which Next.js feature allows pre-rendering and updating static content without rebuilding the entire site?

  • Server-side rendering
  • Client-side rendering
  • Incremental Static Regeneration
  • Dynamic imports
View Answer

Incremental Static Regeneration

Q15. How can you define environment variables in a Next.js project?

  • Using .env.local file
  • Using environment.json file
  • Using next.config.js file
  • Using config.env file
View Answer

Using .env.local file

Q16. Which hook is used to access router object in a Next.js functional component?

  • useRouter
  • useNavigation
  • useRoute
  • useHistory
View Answer

useRouter

Q17. What is the use of the public directory in a Next.js project?

  • To store API route handlers
  • To store static assets
  • To store server-side logic
  • To store global styles
View Answer

To store static assets

Q18. How to create nested routes in Next.js?

  • By creating nested folders inside the pages directory
  • By configuring routes in next.config.js
  • By creating nested folders inside the api directory
  • By using createRoute function
View Answer

By creating nested folders inside the pages directory

Q19. How do you add a custom 404 error page in Next.js?

  • Create a _404.js file in the pages directory
  • Create a 404.js file in the pages directory
  • Configure customErrorPage in next.config.js
  • Use the error404 component
View Answer

Create a 404.js file in the pages directory

Q20. How to implement dynamic API routes in Next.js?

  • By using square brackets in the filename inside the /api directory
  • By using curly braces in the filename inside the /api directory
  • By configuring dynamicApiRoutes in next.config.js
  • By using dynamicRoute function
View Answer

By using square brackets in the filename inside the /api directory

Q21. Which of the following command starts the Next.js development server?

  • next dev
  • next start
  • next build
  • next run
View Answer

next dev

Q22. How do you set a custom port for the Next.js development server?

  • next dev –port 4000
  • next start –port 4000
  • next build –port 4000
  • next run –port 4000
View Answer

next dev --port 4000

Q23. What does the next build command do in a Next.js application?

  • Runs the development server
  • Builds the application for production
  • Exports the application as a static site
  • Runs the test suite
View Answer

Builds the application for production

Q24. Which of the following is used to define the metadata of a Next.js page?

  • Header component
  • Meta component
  • Head component
  • Header tag
View Answer

Head component

Q25. How can you generate a static HTML export of a Next.js app?

  • next build
  • next export
  • next start
  • next serve
View Answer

next export