Next.js Multiple-Choice Questions (MCQs)

Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.

Next.js MCQs: This section contains multiple-choice questions and answers on the various topics of Next.js. Practice these MCQs to test and enhance your skills on Next.js.

List of Next.js MCQs

1. The next.js is based upon ____?

  1. JavaScript
  2. Python
  3. React
  4. Java

Answer: C) React

Explanation:

The next.js framework is a React-based framework.

Discuss this Question


2. Next.js used for ____?

  1. Server side
  2. Client side

Answer: A) Server side

Explanation:

The next.js framework is used for the server side.

Discuss this Question


3. Is next.js an open-source framework?

  1. Yes
  2. No

Answer: A) Yes

Explanation:

The next.js framework is an open-source framework.

Discuss this Question


4. Is Next.js a frontend framework or a backend framework?

  1. Backend
  2. Frontend
  3. Both

Answer: B) Frontend

Explanation:

The next.js is a frontend framework.

Discuss this Question


5. Next.js is written in which of the following language?

  1. JavaScript
  2. TypeScript
  3. Rust
  4. All of the above
  5. Only B and C
  6. Only A and C

Answer: D) All of the above

Explanation:

The next.js framework is written in JavaScript, TypeScript, and Rust.

Discuss this Question


6. Who developed Next.js?

  1. Tim Berners-Lee
  2. Guillermo Rauch
  3. Brendan Eich

Answer: B) Guillermo Rauch

Explanation:

Guillermo Rauch developed Next.js.

Discuss this Question


7. In Next.js, we can quickly edit the top section of each react page by using the built-in ____react component?

  1. Metadata
  2. Head
  3. Top

Answer: B) Head

Explanation:

In Next.js, we can quickly edit the top section of each react page by using the built-in head react component.

Discuss this Question


8. In Next.js, what is the name of the inbuild CSS-in-js library?

  1. Style.Js
  2. Style.CSS
  3. styled-jsx

Answer: C) styled-jsx

Explanation:

In Next.js, Styled-JSX is the name of the inbuild CSS-in-js library.

Discuss this Question


9. How many types of pre-rendering are supported by Next.js?

  1. 1
  2. 2
  3. 3
  4. 4

Answer: B) 2

Explanation:

In Next.js, two types of pre-rendering are supported:

  • Static Generation
  • Server-Side Generation

Discuss this Question


10. Which of the following pre-rendering method generates the HTML page at build time?

  1. Static Generation
  2. Server-side generation

Answer: A) Static Generation

Explanation:

The static generation pre-rendering method generates the HTML page at build time.

Discuss this Question


11. Which of the following pre-rendering method generates the HTML page on each request?

  1. Static Generation
  2. Server-side generation

Answer: B) Server-side generation

Explanation:

The server-side generation method generates the HTML page on each request.

Discuss this Question


12. Which of the following pre-rendering strategy is appropriate for marketing websites, blogs, e-commerce product listing websites, assistance, and documentation websites?

  1. Static Generation
  2. Server-side generation

Answer: A) Static Generation

Explanation:

Static generation strategy is appropriate for marketing websites, blogs, e-commerce product listing websites, and assistance and documentation websites.

Discuss this Question


13. Which of the following method is used to get data and deliver it as page props so that the page may render based on the props given?

  1. Getprops
  2. Getstatic
  3. Getdynamicprops
  4. getStaticProps

Answer: D) getStaticProps

Explanation:

getStaticProps method is used to get data and deliver it as page props so that the page may render based on the props given.

Discuss this Question


14. getStaticProps() function runs at ____.

  1. Runtime
  2. Compile time
  3. Build time

Answer: C) Build time

Explanation:

getStaticProps() function runs at build time.

Discuss this Question


15. Next.js has a ____ router.

  1. File-system-based
  2. Data-system-based
  3. Data-recording-based

Answer: A) File-system-based

Explanation:

Next.js has a file-system-based router.

Discuss this Question


16. A folder's ____file corresponds to the directory's root.

  1. Nested.js
  2. Index.js
  3. Dynamic.js

Answer: B) Index.js

Explanation:

A folder's index.js file corresponds to the directory's root.

Discuss this Question


17. Using the ____ component, Next.JS allows you to link sites on the client side.

  1. Page link
  2. Link React
  3. linking

Answer: B) Link React

Explanation:

Using the Link react component, Next.JS allows you to link sites on the client side.

Discuss this Question


18. Which of the following command is used to start the development server in Next.js?

  1. Start dev
  2. Start server
  3. npm run dev
  4. npm start sever

Answer: C) npm run dev

Explanation:

npm run dev command is used to start the development server in Next.js.

Discuss this Question


19. Which of the following pre-rendering method provides better performance over Server-side Rendering?

  1. Static Generation
  2. Server-side generation

Answer: A) Static Generation

Explanation:

Static generation pre-rendering method provides better performance over Server-side Rendering.

Discuss this Question


20. What is the other name of server-side rendering in Next.js?

  1. Static routing
  2. Dynamic routing

Answer: B) Dynamic routing

Explanation:

Another name for server-side rendering in Next.js is dynamic routing.

Discuss this Question


21. ____ in Next.js refers to traveling to the same page but making no calls to the getServerSideProps, getStaticProps, or getInitialProps functions.

  1. Dynamic routing
  2. Static routing
  3. Shallow routing
  4. Deep routing

Answer: C) Shallow routing

Explanation:

Shallow routing in Next.js refers to traveling to the same page but making no calls to the getServerSideProps, getStaticProps, or getInitialProps functions.

Discuss this Question


22. To achieve shallow routing, we utilize Router with the shallow flag set to ____.

  1. True
  2. False
  3. Null

Answer: A) True

Explanation:

To achieve shallow routing, we utilize Router with the shallow flag set to true.

Discuss this Question


23. ____ is a way to create rest API using Next.js.

  1. REST API routes
  2. API routes
  3. REST routes

Answer: B) API routes

Explanation:

API Routes is a way to create rest API using Next.js.

Discuss this Question


24. Is getServerSideProps and getStaticProps the same thing?

  1. Yes
  2. No

Answer: B) NO

Explanation:

The difference is that getServerSideProps is run on every request instead of on build time.

Discuss this Question


25. getStaticProps always runs on the ____.

  1. Server
  2. Client

Answer: A) Server

Explanation:

getStaticProps always runs on the server and never on the client.

Discuss this Question


26. Does getStaticProps have access to the incoming request?

  1. Yes
  2. No

Answer: B) NO

Explanation:

getStaticProps does not have access to the incoming request.

Discuss this Question


27. getStaticProps can only be exported from a Non-page file?
Answer whether the given statement is True or False

  1. True
  2. False

Answer: B) False

Explanation:

getStaticProps can only be exported from a page. You cannot export it from non-page files.

Discuss this Question


28. ____ allows you to employ static generation on a per-page basis rather than rebuilding the entire site.

  1. Server-side regeneration
  2. Static regeneration
  3. ISR (Incremental Static Regeneration)

Answer: C) ISR (Incremental Static Regeneration)

Explanation:

ISR (Incremental Static Regeneration) allows you to employ static generation on a per-page basis rather than rebuilding the entire site.

Discuss this Question


29. Which of the following library in Next.js, is strongly advised if you are fetching data on the client side?

  1. react-hook-form
  2. ZOD
  3. SWR

Answer: C) SWR

Explanation:

SWR is strongly advised if you are fetching data on the client side.

Discuss this Question


30. When your page does not require SEO indexing, ____data fetching is appropriate.

  1. Server-side
  2. Client-side

Answer: B) Client-side

Explanation:

When your page does not require SEO indexing, client-side data fetching is appropriate.

Discuss this Question


31. Which of the following are the middlewares in Next.js?

  1. Req.cookies
  2. Req.query
  3. Req.body
  4. All of the above

Answer: D) All of the above

Explanation:

Following are the middlewares in Next.js:

  • Req.cookies
  • Req.query
  • Req.body

Discuss this Question


32. What is the default value of Req.body middleware in Next.js?

  1. {}
  2. ()
  3. Null

Answer: C) Null

Explanation:

Default value of Req.body is null.

Discuss this Question


33. To add an image to your application which of the following component you will import?

  1. Next/image
  2. Image
  3. Img
  4. Next/img

Answer: A) Next/image

Explanation:

To add an image to your application, import the next/image component.

Discuss this Question


34. A ____is a function that creates URLs for images.

  1. Loader
  2. Src
  3. Preloader
  4. Next_img

Answer: A) Loader

Explanation:

A loader is a function that creates URLs for images.

Discuss this Question


35. What is the full form of the LCP element in Next.js?

  1. Largest control protocol
  2. Largest control picture
  3. Largest controlful paint
  4. Largest contentful paint

Answer: D) Largest contentful paint

Explanation:

LCP stands for largest contentful paint.

Discuss this Question


36. ____Includes built-in automated self-hosting for any font file.

  1. @next/font
  2. @font
  3. @next_font

Answer: A) @next/font

Explanation:

@next/font Includes built-in automated self-hosting for any font file.

Discuss this Question


37. Next.js can serve static files, like images, under a folder called ____ in the root directory.

  1. Static
  2. Public
  3. Root

Answer: B) Public

Explanation:

Next.js can serve static files, like images, under a folder called public in the root directory.

Discuss this Question


38. Can you change the name of the public directory?

  1. Yes
  2. No

Answer: B) NO

Explanation:

The name cannot be modified, and this is the only location where static assets are served.

Discuss this Question


39. Does Next.js provide us with the feature of Fast refresh?

  1. Yes
  2. No

Answer: A) Yes

Explanation:

Yes, next.js provide us with the feature of a fast refresh.

Discuss this Question


40. In Next.js, which of the following is recommended configuration for developers setting up ESLint for the first time?

  1. Base
  2. Cancel
  3. Strict

Answer: C) Strict

Explanation:

Strict is recommended configuration for developers setting up ESLint for the first time in Next.js

Discuss this Question


41. Does Next.js supports incremental type checking?

  1. Yes
  2. No

Answer: A) Yes

Explanation:

Next.js supports incremental type checking.

Discuss this Question


42. Client-side transitions between routes can be enabled via the ____ component.

  1. Static route
  2. Link
  3. Loader
  4. Unit

Answer: B) Link

Explanation:

Client-side transitions between routes can be enabled via the Link component.

Discuss this Question


43. You may use the ____hook to access the router object from any function component in your app.

  1. Router
  2. Route
  3. useRouter

Answer: C) useRouter

Explanation:

You may use the useRouter hook to access the router object from within any function component in your app.

Discuss this Question


44. Set the shallow option to ____to enable shallow routing.

  1. Null
  2. True
  3. False

Answer: B) True

Explanation:

Set the shallow option to true to enable shallow routing.

Discuss this Question


45. NEXT.JS has a ____for starting, building, and exporting applications.

  1. Components
  2. Functions
  3. Commands
  4. CLI

Answer: D) CLI

Explanation:

NEXT.JS has a command-line interface (CLI) for starting, building, and exporting applications.

Discuss this Question


46. ____ is the fastest way to deploy your Next.js application with zero configuration.

  1. Global networks
  2. Vercel
  3. Edge networks

Answer: B) Vercel

Explanation:

Vercel is the fastest way to deploy your Next.js application with zero configuration.

Discuss this Question


47. Among Node.js or next.js which is better?

  1. Node.js
  2. Next.js

Answer: A) Node.js

Explanation:

Node.js is better.

Discuss this Question


48. ____ API Routes allows you to use Next to create high-performance APIs.

  1. Edge
  2. Static
  3. Dynamic

Answer: A) Edge

Explanation:

Edge API Routes allow you to use Next to create high-performance APIs.

Discuss this Question


49. Which of the following commands starts the application in production mode?

  1. Start
  2. Npx start
  3. Npm start
  4. Next start

Answer: D) Next start

Explanation:

Next start command starts the application in production mode.

Discuss this Question


50. To obtain a list of accessible CLI commands, which of the following commands you would write in your project directory?

  1. npx cli next
  2. npx commands
  3. npx next -h
  4. npm CLI

Answer: C) npx next -h

Explanation:

npx next -h, is the command that we will use to obtain a list of accessible CLI commands.

Discuss this Question


51. Which of the following command will quickly build a new Next.js application?

  1. npx create-next-app@latest
  2. yarn create next-app
  3. pnpm create next-app
  4. All of the above

Answer: D) All of the above

Explanation:

Following commands will quickly build a new next.js application:

  • npx create-next-app@latest
  • yarn create next-app
  • pnpm create next-app

Discuss this Question


52. Which of the following port does Next.js uses?

  1. 4000
  2. 3002
  3. 9000

Answer: B) 3002

Explanation:

Next.js runs on port 3002.

Discuss this Question


53. Which of the following company owns next.js?

  1. Microsoft
  2. Oracle
  3. Vercel
  4. Google
  5. IBM

Answer: C) Vercel

Explanation:

Vercel owns next.js.

Discuss this Question


54. Which of the following companies uses Next.js?

  1. Tik ToK
  2. Nike
  3. Netflix Jobs
  4. All of the above

Answer: D) All of the above

Explanation:

Following companies use Next.js:

  • Tik ToK
  • Nike
  • Netflix Jobs

Discuss this Question


55. Which of the following are the alternatives of Next.js?

  1. Create React App
  2. Hugo
  3. Gatsby
  4. React Router
  5. All of the above

Answer: D) All of the above

Explanation:

Following are the alternatives of Next.js:

  • Create React App
  • Hugo
  • Gatsby
  • React Router

Discuss this Question




Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.