All 75 Next.js quiz questions below come with a short explanation, visible right on the page — no sign-in needed. They're grouped by beginner and intermediate levels and 22 subtopics, so you can revise one part at a time. Choose Try Next.js quiz above to take a scored run and review the questions you got wrong.
In the App Router, what kind of component is a file with no directive at the top?
A.A Server Component — that is the default in the App Router
B.A hybrid component that runs on both sides depending on the hooks used inside
C.A Client Component — every React component runs in the browser unless marked 'use server'
D.Next.js analyses the code and decides, there is no default
Answer: A
A Server Component — the App Router default. It runs on the server, doesn't ship its JavaScript to the client, and can access the database and secret environment variables directly. Add 'use client' when you need state, effects, or browser events.
In the App Router, which file defines the UI for a route?
A.page.tsx — only a directory containing this file becomes a route
B.route.tsx — used for both the UI and the API
C.index.tsx, following the Pages Router convention
D.Any .tsx file inside app/ automatically becomes a route
Answer: A
page.tsx. In the App Router only convention file names carry meaning: page (route UI), layout (surrounding shell), loading, error, not-found, route (API). Regular files co-located in the folder don't create routes — which is why you can put components next to the page.
In the App Router, how do you fetch data for a server-rendered page?
A.Create a Route Handler and fetch your own endpoint
B.Declare the component async and await right inside its body
C.Use useEffect to call an API after the component mounts
D.Still export getServerSideProps as before — the App Router keeps that API
Answer: B
Make the component async and await directly. Server Components run on the server, so you can call the database or an internal API straight away. getServerSideProps and getStaticProps belong to the Pages Router only and are not used in the App Router.
How do you create an API endpoint in the App Router?
A.Declare it in the api section of next.config.js
B.Put the file in pages/api/ as in the Pages Router — the App Router has no API support
C.Export a default handler function from page.tsx
D.Create a route.ts file and export functions named after the HTTP methods
Answer: D
Create a route.ts file exporting functions named after the HTTP methods. app/api/users/route.ts serves /api/users. The functions receive and return standard Web Request/Response objects, not Next.js-specific objects like in pages/api.
What is the main benefit of using next/image over a plain <img> tag?
A.Automatic format conversion, multiple sizes, lazy loading, and correctly proportioned placeholders
B.It uploads images to a CDN at build time
C.It compresses images in the repository so clones are smaller
D.It lets you use images without knowing their dimensions, unlike <img>
Answer: A
next/image serves optimized images: modern formats per browser, device-appropriate sizes, lazy loading by default, and enforced dimensions for placeholders — directly improving LCP and CLS in Core Web Vitals.
Which of the following components MUST have 'use client'?
A.An async component that queries the database and renders a list
B.A component that only takes props and renders static JSX
C.A component reading a secret environment variable to build an internal URL
D.A component using useState to open/close a dropdown with an onClick on the button
Answer: D
'use client' is required when a component uses state/effects, event handlers, or browser APIs (window, localStorage). It is unnecessary when it only fetches data and renders — and never move secret-reading code down to the client.
How do the (marketing) and _components folders differ inside app/?
A.(marketing) is only for marketing pages, by Next.js convention
B._components creates a route beginning with an underscore in the URL
C.Both are excluded from the URL, differing only in naming convention
D.(marketing) is a route group — a name in parentheses does not appear in the URL
Answer: D
Parentheses (name) group routes to share a layout without adding anything to the URL. An underscore _name excludes the folder from routing entirely — ideal for colocating components and helpers without them becoming routes.
A.It can only live in the root app/ folder, not in a child route
B.It must be a Client Component and receives a reset prop
C.It must be a Server Component so it can read the error details from the server
D.It must export a function named handleError
Answer: B
error.tsx must be 'use client' because the error boundary is a client-side mechanism. It receives error and reset. Easy to forget: it cannot catch errors thrown in the SAME-LEVEL layout.tsx — to catch those, place error.tsx at a parent level.
Which environment variables are readable from code running in the browser?
A.Only variables prefixed with NEXT_PUBLIC_
B.None — the client must call an API to get its configuration
C.Every variable in .env.local is readable on both sides
D.Only variables declared in next.config.js
Answer: A
Only variables starting with NEXT_PUBLIC_. Next.js inlines their values into the bundle at build time. Variables without the prefix are readable only in Server Components, Route Handlers, and Server Actions — which is why DATABASE_URL never reaches the browser.
What does next/font give you over a <link> tag to Google Fonts?
A.It lets you use paid fonts for free
B.The fonts are compressed more so they download faster
C.The fonts are downloaded and served from your own domain at build time
D.Fonts load only when the user scrolls to the section using them
Answer: C
next/font downloads fonts at build time and serves them from your own domain — removing a connection to a third-party server. More importantly, it computes and inserts size-matched fallbacks, so text doesn't shift when the real font loads — directly improving CLS.
In the App Router, where must useRouter be imported from?
A.next/router — still the shared path for both routers
B.next/link — the same module as the navigation component
C.next/navigation — the one from next/router is for the Pages Router only
D.react-router-dom — Next.js reuses that library
Answer: C
From the App Router's navigation module. The one in the old module is only for the legacy router and fails at runtime if imported by mistake — and the error message doesn't explain the cause, so it's easy to waste time on it.
How does next dev differ from next build then next start?
A.One runs on port 3000 and the other on a different port
B.One compiles on demand while the other serves a built output
C.One supports Server Components and the other does not
D.One reads environment variables and the other does not
Answer: B
Dev mode compiles on demand and updates instantly as you edit code, but it's slow and not optimized. Production mode serves a prebuilt output: code is minified, static pages are already built, and performance reflects real production.
What is the public/ directory for in a Next.js project?
A.Holding the output of the build command
B.Holding code shared between client and server
C.Serving static files from the root path
D.Holding the public pages that need no login
Answer: C
It serves static files by path from the root: a file placed there is immediately accessible via its corresponding path. Files go through no build step, so they aren't optimized or versioned.
It must accept and render the children prop. Child route content is passed in through this prop, so forgetting to render it leaves every page beneath it blank with no error.
What does <Link href="/about"> gain over a plain anchor tag?
A.It adds security attributes to the link automatically
B.It checks whether the path exists before navigating
C.It only works with static pages
D.Client-side navigation with no full page reload
Answer: D
It navigates on the client: only the changed part is fetched and rendered instead of reloading the whole page. App state is preserved, navigation is much faster, and Next.js also prefetches content when the link enters the viewport.
What does a not-found.tsx file do in the App Router?
A.Redirecting the user to the home page
B.Blocking access to routes that were never declared
C.Showing a UI when the route does not exist
D.Recording the failing paths for analysis
Answer: C
It renders UI when a route doesn't exist — both when the path matches no route, and when code explicitly calls the not-found function, for example when a query finds no matching record.
Can a Server Component query the database directly?
A.No, because a database connection cannot survive between renders
B.Yes, because the code only runs on the server
C.No, it must always go through an API endpoint
D.Yes, but it must be wrapped in an environment check
Answer: B
Yes, and that's one of the main benefits. This component type's code is never sent to the browser, so connection details and queries aren't exposed, and no extra API layer is needed in between.
How does importing an image differ from placing it in public/?
A.An imported image carries its known dimensions and a hashed filename
B.Imported images only work in Server Components
C.Imported images are compressed more heavily at build time
D.Images in the public directory load faster
Answer: A
An imported image is processed by the bundler: it knows the width and height up front so layout shift is avoided, and the filename gets a hash so it can be cached forever. Images in the public folder require you to declare dimensions yourself.
It declares build configuration and framework behavior: redirects, rewrites, allowed image domains, output mode, HTTP headers. The file is read at build and at startup, not re-read per request.
B.Only the directory that comes first alphabetically is used
C.Both work, with app/ taking precedence on a collision
D.The build fails because of a configuration conflict
Answer: C
Both run, but a URL can't be declared in both app/ and pages/; if a route collides, Next.js throws a build error. This is intentional so you can migrate route by route instead of rewriting the whole app at once.
A file marked 'use client' imports another component. Where does the imported component run?
tsx
// app/dashboard/panel.tsx'use client'import { Chart } from'./chart'// chart.tsx has no directiveexportfunctionPanel() {
const [open, setOpen] = useState(false)
return<Chart />
}
A.Next.js fails the build because the two component types are mixed
B.On the server for the first render, then it switches to the client
C.On the server, because chart.tsx itself has no 'use client'
D.On the client — 'use client' marks a boundary for the whole subtree below it
Answer: D
'use client' is a boundary, not a label for one file. Everything imported below that boundary becomes a Client Component. To keep part of it on the server inside a client tree, pass it down via the children prop instead of importing it.
A user navigates between /posts/1 and /posts/2, both under app/posts/layout.tsx. Does the layout re-render?
A.No — the layout is preserved with its state and does not re-render
B.Yes — every URL change re-renders the whole tree from the root layout down
C.Yes, unless you wrap the layout in React.memo
D.No, and children does not change either since the layout is the same
Answer: A
No. A layout persists across navigations within its scope — state, scroll position, and in-progress input all survive. Only children is swapped for the new route content. That's why a sidebar or audio player placed in a layout doesn't get reset.
B.Defining the TypeScript type of the page's params
C.Validating the parameter and returning 404 for values outside the list
D.Listing the dynamic parameter values in advance so the pages are prebuilt at build time
Answer: D
It tells Next.js which pages to pre-render at build time. For /posts/[slug], returning a list of slugs renders each slug as static HTML — served fast from the CDN and good for SEO. It is the App Router replacement for the Pages Router's getStaticPaths.
How is a page that calls cookies() or headers() rendered?
A.Dynamically — both functions depend on the specific request
B.It depends on next.config.js, and the default is still static
C.Statically, with the cookie-dependent part filled in on the client after loading
D.Still statically, because Next.js snapshots the cookies at build time
Answer: A
Dynamic. cookies(), headers(), searchParams, and connection() all depend on the request, so HTML cannot be pre-rendered — using any of them switches the whole route to per-request rendering. To keep the rest static, isolate the dynamic part into a component wrapped in <Suspense>.
A.Next.js creates an internal endpoint; the client calls it and the function runs on the server
B.The function is bundled to the client and runs in the browser like an ordinary handler
C.The function only runs at build time and cannot handle a runtime submit
D.You still need a Route Handler for the form to send its data anywhere
Answer: A
Next.js generates a dedicated endpoint for that function. The client sends a request to the endpoint, the function runs on the server with full database access, then revalidatePath clears the cache so the page shows fresh data. The function code never reaches the browser.
Question 6·Server & Client Components· select all that apply
Which statements about Server Components are correct? (select all that apply)
A.Server Components can use useState and useEffect as long as the component is async
B.Props passed from a Server Component to a Client Component must be serializable — passing an ordinary function fails
C.A Server Component can read secret environment variables and query the database directly without exposing anything to the client
D.Code and libraries used only in Server Components never enter the client bundle
Answer: B, C, D
Server Components ship no code to the client, can access secrets and the database, but have no hooks and don't handle events. Data passed across the boundary to Client Components must be serializable — functions can't cross, except via Server Actions.
What does placing a loading.tsx file in a route folder do?
A.Next.js automatically wraps that folder's page.tsx in <Suspense> with this component as the fallback
B.It only works when imported and rendered manually inside page.tsx
C.It shows while the browser downloads the page's JavaScript, unrelated to data
D.It replaces page.tsx when the data fetch fails
Answer: A
loading.tsx is the fallback for a <Suspense> wrapper Next.js places around the route automatically. The page streams: the static shell and loading UI appear immediately, and the real content swaps in once server data is ready. Users see an instant response instead of a blank screen.
When does Next.js middleware run, and what is it suited for?
A.It runs after the page renders, to modify the HTML before it is sent
B.It runs at build time, to generate the list of routes
C.It runs before the request reaches the route; good for redirects, rewrites, and setting headers
D.It only runs for routes under app/api, not for pages
Answer: C
Middleware runs before a request is handled by the route. It suits lightweight work: redirects, rewrites, setting headers, quick cookie checks. Since it sits on the path of every request, avoid database queries or heavy logic there.
A product detail page needs per-product title and Open Graph tags. How is that done in the App Router?
A.Use useEffect to set document.title after the page mounts
B.Export a generateMetadata function from page.tsx
C.Declare it statically per path in next.config.js
D.Keep using the <Head> component from next/head as in the Pages Router
Answer: B
Export generateMetadata from page.tsx. It receives params, can await data, and returns a metadata object. Next.js renders the meta tags right into the server HTML, so crawlers and link previews can read them. For static metadata, export a metadata constant.
A 300KB charting library is used only in a rarely-opened tab. How do you shrink the initial bundle?
A.Use next/dynamic to split the library into its own chunk
B.Add the library to transpilePackages in next.config.js
C.Wrapping the component in <Suspense> is enough to split the code
D.Move the library into devDependencies so it is not bundled for production
Answer: A
next/dynamic: const Chart = dynamic(() => import('./chart')). The library is split into its own chunk and only loads when the component renders. Add { ssr: false } when the library touches window, and loading to provide a fallback UI.
What does wrapping an async Server Component in <Suspense> achieve?
A.The rest of the page displays immediately while this part is streamed in later
B.The data is cached so it is not fetched again next time
C.Errors in the component are caught instead of breaking the whole page
D.The component is moved to run on the client
Answer: A
The rest of the page is sent and displayed immediately, while the part inside the boundary is streamed in later once the data is ready. Without it, the whole page must wait for the slowest query before the first byte can be sent.
What happens when passing a function as a prop from a Server to a Client Component?
A.The function works but loses its closure
B.The component automatically switches to running on the server
C.An error — props must be serializable, except Server Actions
D.The function is sent as a string and eval'd again on the client
Answer: C
A runtime error. Props crossing the boundary must be serializable because they travel over the network as data. The only exception is server actions — they get turned into a reference the client can call back into.
What must you watch for when using React Context in the App Router?
A.Context works normally in both component types
B.The provider must be placed in each page rather than in a layout
C.The provider must be a Client Component
D.Context can only hold primitive data
Answer: C
The provider must be a client component, and server components cannot read the context. The right approach is to create a separate file with the 'use client' directive for the provider, then place it in the root layout wrapping the children.
A.Causing a build error when a server-only module is imported into client code
B.Moving API calls to the server to avoid CORS
C.Compressing server modules to shrink the build
D.Marking a component as server-side instead of a directive
Answer: A
Importing this package into a module makes importing that module from client-side code fail at build time. It's a guardrail: without it, a single mistaken import could push secret keys into the bundle sent to the browser.
B.A template is remounted on every navigation; a layout is not
C.Templates run on the client while layouts run on the server
D.Templates apply to dynamic routes while layouts apply to static ones
Answer: B
A layout persists when navigating between pages inside it, while a template is remounted each time. That lets you re-run entry animations or reset state on every route change.
A.The double-bracket form also matches the base path
B.The double-bracket form only works in route handlers
C.The double-bracket form matches at most two segments
D.The single-bracket form matches the query string while the double matches the path
Answer: A
The single-bracket form requires at least one path segment. The double-bracket form also matches the case with no segments — i.e. the directory's own root path matches too.
What does calling notFound() in a Server Component do?
A.It redirects the user to the home page
B.It throws an exception you must catch yourself
C.Stops rendering and shows the nearest not-found.tsx
D.It returns an empty page with status 200
Answer: C
It stops rendering the current segment and shows the nearest not-found.tsx in the route tree. If the response hasn't streamed yet it returns a 404 status code; if it has already streamed, the status may still be 200 but Next.js injects a noindex meta tag to avoid indexing.
A.It catches errors in the root layout too, so it must render its own html and body tags
B.It only works in the development environment
C.It catches both server and client errors while the other only catches client errors
D.It does not need the 'use client' directive while the other does
Answer: A
It catches errors occurring in the root layout — where a regular error file can't reach. Since the root layout can't render, this file must render the document HTML shell tags itself.
What changed about a page's params and searchParams in Next.js 15?
A.They were merged into a single object
B.They are now readable only in Client Components
C.They became Promises, so you must await them before reading
D.They were removed in favour of a new hook
Answer: C
They became promises, so you must await them before reading. This change paves the way for rendering the static part of a page before knowing their values — the foundation of partial prerendering.
Using useSearchParams() makes the build complain about Suspense. Why?
A.The hook can only be used in a Server Component
B.The hook reads data asynchronously so it needs a Suspense boundary
C.The hook conflicts with using the 'use client' directive
D.It makes the component request-dependent, so it needs Suspense
Answer: D
Because it makes the component depend on the specific request. Wrapping it in a Suspense boundary lets Next statically build the rest of the page and only defer this part until runtime — without a boundary, the whole page is pushed into dynamic rendering.
A.It prefetches automatically when the link enters the viewport in production, and can be disabled with a prop
B.It does not prefetch; it is just an anchor with navigation handling
C.It prefetches every link on the page as soon as the page loads
D.It only prefetches when the user hovers over the link
Answer: A
It prefetches automatically when the link enters the viewport, and only in production. That makes navigation nearly instant — at the cost of extra requests for links the user never clicks.
How does generateMetadata differ from a static metadata export?
A.It overrides the layout's metadata while the other merges with it
B.It is an async function receiving params, so it builds metadata from data
C.It can only set the title tag while the other can set every tag
D.It runs on the client while the other runs on the server
Answer: B
It's an async function that receives route params, so it can generate metadata from real data — a title from the product name, a description from the post content. The static export only works when values are fixed.
How does a sitemap.ts file in the app/ directory work?
A.It is a static XML file copied straight into the public directory
B.It lists every route automatically with nothing to write
C.It only holds configuration; the sitemap is produced by an external tool
D.Export a function returning an array of URLs and Next generates the corresponding XML
Answer: D
Export a function that returns an array of entries with path, last modified time, change frequency and priority. The framework generates the corresponding XML file. The function can run queries, so the list always matches real data.
A.Setting a page's background image when printing to PDF
B.Declaring the path to an existing static image file
C.Compressing and optimizing the images in the public directory
D.Generating dynamic share images from JSX at runtime
Answer: D
Generates social sharing images dynamically from JSX at runtime. This way each post gets its own image carrying its title and author, instead of designing each image by hand or using one shared image for every page.
What is useActionState (formerly useFormState) for?
A.Saving form data into the browser's local storage
B.Holding a Server Action's return value so validation errors can be displayed
C.Tracking a form's pending submission state
D.Syncing input values with the component's state
Answer: B
Holds the return value of a server action so it can be redisplayed — typically the list of validation errors per field. It returns the current state, a wrapper function to attach to the form, and a pending flag.
B.In the component that declares the form element itself
C.In the layout wrapping the page that contains the form
D.In a child component nested inside the <form>
Answer: D
Inside a child component nested within the form tag — usually the submit button itself. Placed in the component that declares the form, it always returns an empty state, because the hook reads context provided by that very element.
After a Server Action writes data, how does the UI show the new data?
A.Call revalidatePath or revalidateTag inside the action
B.Reload the whole page with the browser API
C.Call router.push to the current page
D.Nothing is needed; Next detects that the data changed
Answer: A
Call a revalidation function by path or by tag right inside the action, after a successful write. Without that step the cache still holds the old data and the UI doesn't change even though the write succeeded.
How should two independent queries in one Server Component be called?
A.await them in order for readability
B.Move both into a Client Component so they run in parallel
C.Combine them into a single query with a join
D.Start both and await Promise.all so they run in parallel
Answer: D
Start both promises first, then await them together. Awaiting them sequentially makes the total time the sum of the two queries rather than the slower one — this is the classic request waterfall pattern.
How did Next.js 15 change the default fetch caching behaviour?
A.The cache moved from the server side to the client side
B.Nothing changed, only how it is declared in configuration
C.Fetches are no longer cached by default; caching must be declared
D.It now caches forever instead of caching by time
Answer: C
Changed the default from cached to not cached. To store results you must explicitly opt in with the corresponding option or set a revalidation interval. This was the most surprising change when upgrading to version 15.
How does revalidateTag differ from revalidatePath?
A.By a tag attached where the data is fetched, so it touches every page using that data
B.It clears the cache immediately while the other waits for the next visit
C.It only works in route handlers, not in actions
D.It affects the client cache while the other affects the server cache
Answer: A
It revalidates by the tag attached where the data is fetched, so one call reaches every page using that data. Revalidating by path requires knowing the list of pages in advance, which is hard when the same data appears in many places.
What does React cache() solve in Server Components?
A.Storing the result in the browser's memory
B.Storing results between requests so the next one need not query again
C.Deduplicating identical calls within a single render
D.Running calls in parallel instead of sequentially
Answer: C
It deduplicates identical calls within a single render. That way a layout, a page, and a metadata-generating function can all call the same query while the database is hit only once.
What is the trade-off of running a route on the Edge runtime rather than Node?
A.It removes the build step because the code runs straight from source
B.It lets you reach the database without going over the network
C.Fast start-up and proximity to users, at the cost of not having the full Node API
D.Everything runs faster thanks to deeper optimization
Answer: C
Near-instant startup and running geographically close to users, at the cost of not having the full set of Node APIs. Many popular libraries use Node core modules, so they won't run there.
A.Limiting middleware to run only for paths matching the pattern
B.Declaring which routes middleware is allowed to redirect to
C.Mapping old paths to new paths
D.Choosing the runtime for each group of paths
Answer: A
It restricts middleware to run only for paths matching the pattern. Without it, middleware runs on every request including static assets and images — costly and potentially causing confusing bugs.
Using next/image with an external domain errors. What is the fix?
A.Declare that domain in images.remotePatterns in the config
B.Download the images into the public directory and reference them locally
C.Replace it with a plain image tag, since the component only supports local images
D.Enable a flag that disables source checking in the config
Answer: A
Declare that domain in the remote patterns list in the config file. It's a deliberate allowlist: it stops others from abusing your image optimization server to process their images.
B.How many image variants are generated at build time
C.The image's actual displayed size on the page
D.The compression quality applied to the image
Answer: A
It tells the browser how wide the image will display at each screen size, so the right resolution variant is chosen. Without it, the browser assumes the image is as wide as the viewport and downloads a much larger version than needed.
What does embedding a third-party script with next/script and strategy="afterInteractive" mean?
A.The script runs before React takes control of the page
B.The script is inlined into the HTML instead of fetched over the network
C.The script loads only when the user interacts with the page
D.The script loads after the page has become interactive
Answer: D
The script loads after the page becomes interactive. This is the default and suits most third-party scripts — analytics, ads, live chat — since they don't need to run before content appears.
The client bundle is unexpectedly large. What is the first diagnostic step?
A.Upgrade every dependency to its newest version
B.Convert every component to a Server Component
C.Run the bundle analyzer to see which modules take the space
D.Enable gzip on the server to reduce the transfer size
Answer: C
Run a bundle analyzer to see which modules take up the space. Guessing is usually wrong because the culprit is often an indirect dependency — a date library with every locale, or an icon set imported as a whole.
When is dynamic(() => import(...), { ssr: false }) used?
A.When you want the component to render faster on the server
B.When the component needs data from an external API
C.When the component is used across many different pages
D.When the component only works in the browser, for example using window
Answer: D
When a component can only run in the browser — it uses the window object, measures element size, or depends on a library that relies on browser APIs. Rendering it on the server would fail because those APIs don't exist.
A.It lets the application run without Node.js installed
B.It produces a directory with just enough files to run, giving a much smaller Docker image
C.It exports the pages as static HTML for hosting on a CDN
D.It bundles the whole application into a single JavaScript file
Answer: B
It produces a folder containing exactly the files needed to run — the built code plus only the dependencies actually used. That makes the Docker image much smaller than copying the whole dependency folder of hundreds of megabytes.
B.It only limits image optimization; the other features still work
C.It only limits dynamic routes with parameters
D.It limits nothing; it only changes how the build output is packaged
Answer: A
Every feature that needs a server at runtime: Server Actions, time-based revalidation, middleware, dynamic endpoints, and default image optimization. The result is just static files, so no process handles requests.
A.They are re-read on every request so changes take effect immediately
B.All of them are inlined at build time, so any change needs a rebuild
C.All of them are read at runtime, so changing one only needs a restart
D.NEXT_PUBLIC_* variables are inlined at build; server vars are read at runtime
Answer: D
Variables with the public prefix are inlined as constants into the browser build, so changing them requires a rebuild. The rest are server-only and read at runtime, so a restart is enough.
How are multilingual routes done in the App Router?
A.Declare the list of languages in i18n in next.config
B.Create a separate app directory for each language
C.A dynamic [locale] segment plus middleware to detect and redirect
D.Use a query string to select the language
Answer: C
A dynamic segment for the locale at the top of the route tree, plus middleware that detects the language from the path or headers and redirects. The built-in routing of the old system is gone in the App Router.
C.Allowing unbuilt code to run in the production environment
D.Previewing unpublished content by bypassing the static cache
Answer: D
Previewing unpublished content. It sets a cookie that makes statically generated pages render dynamically for that session only — so editors see the draft while other users still see the published version.
What problem arises testing an async Server Component with an ordinary React testing library?
A.Client-side rendering libraries do not fully support async components yet
B.A Server Component cannot be imported from a test file
C.There is no problem; they are tested like ordinary components
D.An async component always throws when run outside a Next environment
Answer: A
Client-side rendering libraries don't fully support async components yet. The recommended approach is to extract the logic into a pure function for unit testing, and use E2E tests for the rendering part.
What does Turbopack replace, and what does it bring?
A.It replaces Node.js as the application's runtime
B.It replaces React; it is a new rendering library
C.It replaces the package manager to install dependencies faster
D.It replaces webpack; builds are faster thanks to Rust and incremental caching
Answer: D
It replaces the old bundler. It's written in Rust and uses function-level incremental caching, so update times when editing code during development drop noticeably — most significantly on large projects.
When should you write a Route Handler rather than a Server Action?
A.When you need to return HTML instead of JSON
B.When you need to write data into the database
C.When you need to validate input before processing it
D.When you need a public API for external clients or to receive webhooks
Answer: D
When you need a public, stable API: for a mobile app, for partners, or to receive webhooks. Server Actions have auto-generated identifiers that change on every build, so they can't form an API contract.
What does export const revalidate = 3600 in a page do?
A.It rebuilds the page at most once an hour
B.It clears the page's cache every hour
C.It sets the browser's cache lifetime to one hour
D.It forces the page to re-render on every request after an hour
Answer: A
The page is rebuilt at most once per hour. Requests after expiry still get the old version immediately, while the rebuild runs in the background — so no user has to wait.
How do you tag fetched data for selective revalidation later?
A.Name the tag the same as the route to be refreshed
B.Declare the list of tags in the configuration file
C.Pass next: { tags: [...] } on the fetch
D.Call a tag-registration function at the top of each page
Answer: C
Pass a list of tags along with the data fetch call. Later, calling the revalidate-by-tag function invalidates every entry with that tag, on any route — far more precise than revalidating by path.
How does calling redirect("/login") inside a Server Component work?
A.It returns an empty component and redirects afterwards
B.It throws a special error that stops the render immediately
C.It sets an HTTP header and carries on rendering
D.It only works when called at the component's top level
Answer: B
It throws a special error that the framework catches, so rendering stops right there and code after it doesn't run. The important consequence: putting it inside a try/catch will swallow that error and the redirect won't happen.
Data read from a database via ORM — how do you cache it like fetch?
A.Configuring the lifetime at the route level is enough
B.The ORM caches it itself so nothing is needed
C.Store the result in a module-level variable
D.Wrap the query function with the cache API
Answer: D
Wrap the query function with Next.js's cache API. The automatic caching only applies to network calls, so a direct query must be wrapped to get tags and a revalidation window for selective revalidation.
Calling cookies().set() in a Server Component errors. Why?
A.The cookie must be declared in the configuration file first
B.Cookies can only be written from code running in the browser
C.Cookies can only be written in a Server Action or a Route Handler
D.The function only works in the Edge runtime
Answer: C
Because cookies can only be set in a Server Action or Route Handler. Rendering may have already started streaming the response, so HTTP headers can no longer be changed. Reading cookies in a component is still fine.
Which images should use the priority prop of next/image?
A.The large image visible in the first screen
B.Every image on the page so they all load faster
C.The largest image file on the page
D.The images at the bottom of the page
Answer: A
Only for large images visible in the initial viewport — usually the hero image. That image determines when the page is considered to have rendered its main content, so loading it early improves the experience metric.
Why should middleware not verify sessions with a database query?
A.Middleware runs before every request so the latency accumulates
B.Middleware cannot redirect the user
C.Middleware cannot read the request's cookies
D.Middleware only runs in development
Answer: A
Because it runs before every request matching the matcher, so the query's latency is added to all of them. Its runtime is also restricted, so a database connection typically isn't available the way it is in regular server code.
A.Specifying where the static metadata files are stored
B.Setting a prefix for every route in the application
C.As the base for composing absolute URLs
D.Declaring which domains may embed the content
Answer: C
It's the base used to resolve relative paths into full URLs. Social share images and canonical tags require absolute URLs, so without it the generated tags are wrong and social platforms can't show the preview image.
How do redirects and rewrites differ in next.config?
A.One requires declaring a status code and the other does not
B.One changes the URL in the address bar and the other does not
C.One is for internal routes and the other for external addresses
D.One runs at build time and the other on each request
Answer: B
Redirects tell the browser to go to a different address, so the URL in the address bar changes. Rewrites only change the handling target on the server; the user still sees the original URL and there's no extra round trip.
