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.
2. Next.js used for ____?
- Server side
- Client side
Answer: A) Server side
Explanation:
The next.js framework is used for the server side.
3. Is next.js an open-source framework?
- Yes
- No
Answer: A) Yes
Explanation:
The next.js framework is an open-source framework.
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.
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.
ADVERTISEMENT
6. Who developed Next.js?
- Tim Berners-Lee
- Guillermo Rauch
- Brendan Eich
Answer: B) Guillermo Rauch
Explanation:
Guillermo Rauch developed Next.js.
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.
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.
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
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.
ADVERTISEMENT
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.
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.
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.
14. getStaticProps() function runs at ____.
- Runtime
- Compile time
- Build time
Answer: C) Build time
Explanation:
getStaticProps() function runs at build time.
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.
ADVERTISEMENT
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.
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.
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.
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.
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.
ADVERTISEMENT
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.
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.
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.
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.
25. getStaticProps always runs on the ____.
- Server
- Client
Answer: A) Server
Explanation:
getStaticProps always runs on the server and never on the client.
26. Does getStaticProps have access to the incoming request?
- Yes
- No
Answer: B) NO
Explanation:
getStaticProps does not have access to the incoming request.
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.
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.
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.
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.
ADVERTISEMENT
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
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.
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.
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.
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.
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.
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.
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.
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.
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
41. Does Next.js supports incremental type checking?
- Yes
- No
Answer: A) Yes
Explanation:
Next.js supports incremental type checking.
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.
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.
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.
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.
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.
47. Among Node.js or next.js which is better?
- Node.js
- Next.js
Answer: A) Node.js
Explanation:
Node.js is better.
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.
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.
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.
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
52. Which of the following port does Next.js uses?
- 4000
- 3002
- 9000
Answer: B) 3002
Explanation:
Next.js runs on port 3002.
53. Which of the following company owns next.js?
- Microsoft
- Oracle
- Vercel
- IBM
Answer: C) Vercel
Explanation:
Vercel owns next.js.
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
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