Home »
MCQs
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 ____?
- JavaScript
- Python
- React
- Java
Answer: C) React
Explanation:
The next.js framework is a React-based framework.
Discuss this Question
2. Next.js used for ____?
- Server side
- 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?
- Yes
- 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?
- Backend
- Frontend
- 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?
- JavaScript
- TypeScript
- Rust
- All of the above
- Only B and C
- 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?
- Tim Berners-Lee
- Guillermo Rauch
- 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?
- Metadata
- Head
- 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?
- Style.Js
- Style.CSS
- 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
- 2
- 3
- 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?
- Static Generation
- 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?
- Static Generation
- 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?
- Static Generation
- 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?
- Getprops
- Getstatic
- Getdynamicprops
- 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 ____.
- Runtime
- Compile time
- Build time
Answer: C) Build time
Explanation:
getStaticProps() function runs at build time.
Discuss this Question
15. Next.js has a ____ router.
- File-system-based
- Data-system-based
- 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.
- Nested.js
- Index.js
- 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.
- Page link
- Link React
- 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?
- Start dev
- Start server
- npm run dev
- 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?
- Static Generation
- 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?
- Static routing
- 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.
- Dynamic routing
- Static routing
- Shallow routing
- 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 ____.
- True
- False
- 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.
- REST API routes
- API routes
- 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?
- Yes
- 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 ____.
- Server
- 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?
- Yes
- 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
- True
- 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.
- Server-side regeneration
- Static regeneration
- 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?
- react-hook-form
- ZOD
- 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.
- Server-side
- 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?
- Req.cookies
- Req.query
- Req.body
- 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?
- {}
- ()
- 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?
- Next/image
- Image
- Img
- 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.
- Loader
- Src
- Preloader
- 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?
- Largest control protocol
- Largest control picture
- Largest controlful paint
- 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.
- @next/font
- @font
- @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.
- Static
- Public
- 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?
- Yes
- 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?
- Yes
- 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?
- Base
- Cancel
- 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?
- Yes
- 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.
- Static route
- Link
- Loader
- 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.
- Router
- Route
- 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.
- Null
- True
- 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.
- Components
- Functions
- Commands
- 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.
- Global networks
- Vercel
- 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?
- Node.js
- 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.
- Edge
- Static
- 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?
- Start
- Npx start
- Npm start
- 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?
- npx cli next
- npx commands
- npx next -h
- 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?
- npx create-next-app@latest
- yarn create next-app
- pnpm create next-app
- 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?
- 4000
- 3002
- 9000
Answer: B) 3002
Explanation:
Next.js runs on port 3002.
Discuss this Question
53. Which of the following company owns next.js?
- Microsoft
- Oracle
- Vercel
- Google
- IBM
Answer: C) Vercel
Explanation:
Vercel owns next.js.
Discuss this Question
54. Which of the following companies uses Next.js?
- Tik ToK
- Nike
- Netflix Jobs
- 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?
- Create React App
- Hugo
- Gatsby
- React Router
- 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