Next.js Quiz ( Intermediate ) - All Questions

This intermediate-level Next.js quiz is designed for developers who already know the basics and want to test their applied knowledge. It focuses on rendering strategies, data fetching, routing, optimization, and real-world usage patterns commonly asked in interviews.

Question 1: When should getServerSideProps be preferred over getStaticProps?

When data is static
When data must be fresh on every request
When SEO is not needed
When building a static site

Explanation: getServerSideProps runs on every request, ensuring up-to-date data.

Question 2: What does Incremental Static Regeneration primarily enable?

Client-side updates
API caching
Updating static pages after build
Faster routing

Explanation: ISR allows static pages to be regenerated after deployment.

Question 3: Which property enables ISR in getStaticProps?

refresh
rebuild
revalidate
cache

Explanation: The revalidate property defines how often a page is regenerated.

Question 4: What is the role of getStaticPaths?

Fetching server data
Defining dynamic routes for SSG
Handling API routes
Managing layouts

Explanation: getStaticPaths defines which dynamic routes are generated at build time.

Question 5: What does fallback: false mean in getStaticPaths?

Shows a loader
Returns 404 for undefined paths
Blocks rendering
Uses SSR

Explanation: Undefined paths will return a 404 page.

Question 6: What does fallback: 'blocking' do?

Shows loading UI
Waits to generate page before response
Disables routing
Causes build error

Explanation: The page is generated on demand without showing a loading state.

Question 7: Why is next/dynamic commonly used?

For dynamic routing
For API calls
For lazy loading components
For styling

Explanation: next/dynamic enables code splitting and lazy loading.

Question 8: What problem does code splitting solve?

SEO issues
Large initial bundle size
Routing conflicts
API latency

Explanation: It reduces the amount of JavaScript loaded initially.

Question 9: Which file runs on the server only?

_app.js
_document.js
index.js
layout.js

Explanation: _document.js runs only on the server.

Question 10: What is the purpose of next/head?

Routing
State management
Managing meta tags
Data fetching

Explanation: next/head is used to modify the HTML head.

Question 11: Which feature improves SEO in Next.js?

Client-side rendering
Server-side rendering
Lazy loading images
Minification

Explanation: SSR allows search engines to index rendered HTML.

Question 12: What is hydration in Next.js?

Fetching server data
Connecting React to server-rendered HTML
Optimizing images
Caching API calls

Explanation: Hydration attaches React event handlers to server-rendered HTML.

Question 13: Which hook is commonly used for navigation?

usePath
useHistory
useRouter
useLink

Explanation: useRouter provides programmatic navigation.

Question 14: What does shallow routing do?

Reloads the page
Changes URL without data fetching
Clears state
Disables routing

Explanation: Shallow routing updates the URL without re-running data fetching methods.

Question 15: Which directory is used for API routes?

api
server
pages/api
backend

Explanation: API routes live inside pages/api.

Question 16: How are API routes executed?

Client-side
Server-side
In browser
On CDN only

Explanation: API routes always run on the server.

Question 17: What is the benefit of the Image component?

Manual resizing
Automatic image optimization
Faster routing
Better CSS handling

Explanation: next/image optimizes images automatically.

Question 18: Which configuration file customizes Next.js behavior?

config.js
next.config.js
package.json
webpack.js

Explanation: next.config.js is used for custom configuration.

Question 19: What happens during npm run build?

Starts dev server
Creates optimized production build
Runs tests
Deploys app

Explanation: It generates an optimized production build.

Question 20: What does next start do?

Builds the app
Starts development mode
Runs production server
Installs dependencies

Explanation: next start runs the production server.

Question 21: Which rendering happens in the browser after page load?

Explanation: Client-side rendering happens in the browser.

Question 22: What is the role of public folder?

Store components
Store static assets
Store APIs
Store layouts

Explanation: The public folder stores static files.

Question 23: Which method is best for highly dynamic user-specific data?

SSG
ISR
SSR
Static export

Explanation: SSR ensures data is fresh per request.

Question 24: What does automatic static optimization mean?

All pages use SSR
Pages without data fetching become static
Images are compressed
Routes are cached

Explanation: Next.js automatically statically optimizes eligible pages.

Question 25: Which feature reduces JavaScript bundle size?

Image optimization
Code splitting
SSR
API routes

Explanation: Code splitting loads only required JS.

Question 26: What does useEffect run during SSR?

Always
Only on server
Only on client
During build

Explanation: useEffect runs only on the client.

Question 27: Which routing approach does Next.js use?

Manual routing
Hash routing
File-based routing
Memory routing

Explanation: Next.js uses file-based routing.

Question 28: What is a dynamic route file name example?

user.js
[id].js
{id}.js
:id.js

Explanation: Square brackets define dynamic routes.

Question 29: What does router.push do?

Reloads page
Navigates programmatically
Fetches data
Updates state

Explanation: router.push navigates to another route.

Question 30: What is the main benefit of SSR for users?

Smaller images
Faster first paint
Better styling
Cleaner code

Explanation: SSR improves first contentful paint.

Question 31: Which hook provides query parameters?

useParams
useSearch
useRouter
useLocation

Explanation: useRouter exposes query parameters.

Question 32: Which deployment platform is created by the makers of Next.js?

Netlify
AWS
Vercel
Heroku

Explanation: Vercel is built by the creators of Next.js.

Question 33: What does static export mean?

SSR build
Client-only app
Fully static HTML export
API deployment

Explanation: Static export generates pure HTML files.

Question 34: Which feature enables full-stack development?

Layouts
API routes
Image optimization
Link component

Explanation: API routes allow backend logic.

Question 35: What happens if a page uses getServerSideProps?

It becomes static
It disables SSR
It is rendered on each request
It fails build

Explanation: The page is server-rendered on every request.

Question 36: Which strategy is best for blog content?

CSR
SSR
SSG
API routes

Explanation: SSG is ideal for mostly static content.

Question 37: What does revalidate: 60 mean?

Rebuild every 60 seconds
Cache for 60 requests
Regenerate page after 60 seconds
Reload browser every 60 seconds

Explanation: The page can be regenerated after 60 seconds.

Question 38: Which hook manages component state?

useEffect
useRouter
useState
useMemo

Explanation: useState manages local component state.

Question 39: What does next/link improve?

SEO
Client-side navigation performance
API calls
Styling

Explanation: next/link enables fast client-side routing.

Question 40: Which file wraps all pages?

_document.js
layout.js
_app.js
index.js

Explanation: _app.js wraps every page.

Question 41: What is the main purpose of middleware in Next.js?

Styling pages
Running code before requests
Fetching data
Rendering UI

Explanation: Middleware runs before requests are completed.

Question 42: Which rendering strategy is best for authenticated dashboards?

SSG
ISR
SSR
Static export

Explanation: SSR handles user-specific data securely.

Question 43: What does npm run dev start?

Production server
Development server
Build process
Static export

Explanation: It starts the development server.

Question 44: Which statement about Next.js is true?

It replaces React
It only supports SSR
It supports multiple rendering strategies
It is backend-only

Explanation: Next.js supports CSR, SSR, SSG, and ISR.

Question 45: What is the main goal of Next.js?

Simplify production React apps
Replace JavaScript
Build mobile apps
Create databases

Explanation: Next.js simplifies building production-ready React applications.

Back to programming Quizzes

Next.js Quiz ( Intermediate )

Questions

~10

Minutes

Min Limit