This set is about three things in a Next.js 15 app: how it renders, how to keep it fast and how to ship it. You will see when a route turns dynamic, how streaming works with loading.tsx and Suspense, how scripts and fonts load, how to cut bundle size, which runtime to pick, and how to run Next.js on your own servers.
How to practise: read each question and tap the option you think is correct. You will see right away whether you got it, along with a short explanation, and your score is tracked at the bottom of the screen. This set has 15 questions.
Topics covered in this set
- Static vs dynamic rendering and the build output
- Streaming with loading.tsx and Suspense
- Partial Prerendering (PPR) concept
- next/font variables and next/script strategies
- Bundle analysis and next/dynamic
- Edge vs Node.js runtime, standalone output, self-hosting and caching headers
Next.js MCQs with answers and explanations
Q1. Which change turns a statically prerendered App Router page into a dynamically rendered one in Next.js 15?
a) Reading cookies() or the searchParams prop in the page
b) Adding a next/image component
c) Importing a global CSS file
d) Exporting a static metadata object
Q2. In the next build route summary, what does the ƒ symbol next to a route mean?
a) The route is a font file
b) The route is prerendered as static HTML
c) The route failed to build
d) The route is dynamic and is server-rendered on demand for each request
Q3. What does adding app/dashboard/loading.tsx do?
a) It disables streaming for the route
b) It replaces the dashboard layout
c) It wraps the dashboard page in a React Suspense boundary, so the loading UI shows at once while the page content streams in
d) It runs only during next build
Q4. A page has a fast header and a slow <Reviews /> Server Component wrapped in <Suspense fallback={<Spinner />}>. How is the response sent?
a) The header and the spinner are sent first, and the Reviews HTML is streamed into place in the same response when it is ready
b) The server waits for Reviews and sends everything at once
c) Reviews is rendered in the browser with useEffect
d) The page returns an error until Reviews finishes
Q5. What is the idea behind Partial Prerendering (PPR), which is experimental in Next.js 15?
a) Rendering half of the routes at build time
b) Rendering every page in the browser
c) Serving a static shell of the page from the build, while dynamic parts inside Suspense boundaries are rendered at request time and streamed in
d) Prerendering only the first 100 pages
Q6. What does the variable option in Inter({ subsets: ['latin'], variable: '--font-inter' }) give you?
a) A class name that defines the CSS custom property --font-inter, so you can use the font through CSS or Tailwind with var(--font-inter)
b) It loads the font from Google on each request
c) A runtime API to change fonts
d) A variable font weight only
Q7. A third-party chat widget is not needed until the user has used the page for a while. Which next/script strategy fits best?
a) lazyOnload
b) beforeInteractive
c) Putting a plain script tag in the head
d) afterInteractive
Q8. What is the default strategy of the next/script component, and where must a beforeInteractive script be placed?
a) There is no default; strategy is required
b) Default is lazyOnload; beforeInteractive goes in next.config.js
c) Default is afterInteractive; beforeInteractive scripts belong in the root layout
d) Default is beforeInteractive; it can go in any component
Q9. How can you see which packages make your client JavaScript bundle large?
a) Open the public folder
b) Wrap next.config with @next/bundle-analyzer and run the build with ANALYZE=true
c) Check package.json size
d) Run next lint
Q10. A heavy chart library is used only in a modal that opens on click. What reduces the initial bundle?
a) Load the modal with next/dynamic so its code is split into a separate chunk that loads when it is rendered
b) Convert the chart to a CSS file
c) Import it in the root layout
d) Add it to next.config.js
Q11. What happens when a route handler exports export const runtime = 'edge'?
a) It only runs at build time
b) It runs on the lighter Edge runtime, which starts fast but supports only a subset of Web APIs, so Node-only APIs and many native packages do not work
c) It becomes a Client Component
d) It gets full access to all Node.js APIs such as fs
Q12. What does output: 'standalone' in next.config produce?
a) A .next/standalone folder with a minimal server.js and only the node_modules files the app needs, for small Docker images
b) An Electron app
c) A single JavaScript file for the browser
d) A static HTML export with no server
Q13. A self-hosted app runs on three containers behind a load balancer, and ISR pages show different content depending on which container answers. What is the usual fix?
a) Run next dev in production
b) Disable the load balancer
c) Switch every page to client rendering
d) Configure a shared cache with the cacheHandler option in next.config, for example backed by Redis, instead of each container's local file cache
Q14. Why can Next.js send Cache-Control: public, max-age=31536000, immutable for files under /_next/static?
a) Because they are HTML pages
b) Because the browser ignores the header
c) Because those files never change after deployment and their file names contain a content hash, so a new build gets new URLs
d) Because Next.js disables caching for them later
Q15. How do you add a custom response header, such as X-Frame-Options, to every route without middleware?
a) Rename the header in package.json
b) Set it in a useEffect
c) Export an async headers() function in next.config that returns a source pattern and a list of key/value headers
d) Add a meta tag in layout.tsx
Quick revision notes
- Request-time APIs (cookies, headers, searchParams, connection) make a route dynamic; check ○ / ● / ƒ in next build output.
- loading.tsx is a Suspense boundary for the segment; Suspense streams slow parts into the same response.
- PPR (experimental in 15): static shell plus dynamic holes streamed at request time.
- next/script: afterInteractive is the default, lazyOnload for non-critical widgets, beforeInteractive only in the root layout.
- output standalone for Docker (copy public and .next/static); use a shared cacheHandler for multi-instance self-hosting; nodejs is the default runtime.
Frequently asked questions
Do I need Vercel to use every Next.js feature?
No. Running next start on a Node.js server gives you Server Components, Server Actions, ISR, middleware and image optimisation. Vercel adds ready-made infrastructure on top, like a shared cache and a global CDN.
Should I use the Edge runtime for all routes?
Usually not. The Node.js runtime supports every package, so it is the safer default. Use edge only for small handlers where speed matters most and no Node APIs are needed.
How do I find out why a page became dynamic?
Check the next build output for the ƒ symbol. Then search that route and its layouts for cookies(), headers(), searchParams or request-time data that is not cached.
Comments
Post a Comment