Next.js MCQs - Routing, Middleware, Metadata and Image Optimization (Set 7)

Q1. Which folder name creates a dynamic segment that matches /blog/hello-world and passes hello-world as a param?

a) app/blog/_slug/page.tsx

b) app/blog/[slug]/page.tsx

c) app/blog/@slug/page.tsx

d) app/blog/(slug)/page.tsx

Q2. What is the difference between [...slug] and [[...slug]]?

a) [[...slug]] only works in the Pages Router

b) There is no difference

c) [[...slug]] also matches the route with no segments, such as /docs itself

d) [...slug] only matches one segment

Q3. What does a route group folder like app/(marketing)/about/page.tsx do?

a) Turns the page into an API route

b) Makes the route private

c) Organises routes and can give them their own layout without adding "(marketing)" to the URL

d) Creates the URL /(marketing)/about

Q4. Where does Next.js middleware live and when does it run?

a) In the browser after hydration

b) In a middleware.ts file at the project root or in src (called proxy.ts from Next.js 16), before a request is completed, so it can redirect, rewrite or set headers

c) Inside next.config.js, only at build time

d) In any component, after rendering

Q5. How do you limit middleware to only run on /dashboard routes?

a) Use getServerSideProps

b) Rename the file to dashboard.ts

c) Export a config object with matcher: ['/dashboard/:path*']

d) Wrap it in a Suspense boundary

Q6. Which statement about the metadata API is correct?

a) It only works in the Pages Router

b) It can only be used in Client Components

c) It replaces the need for a page.tsx file

d) You export a metadata object or an async generateMetadata function from a layout or page that is a Server Component

Q7. A product page needs its title from the database. What is the recommended way to set it?

a) Export async function generateMetadata({ params }) that fetches the product and returns a title

b) Hard-code it in the root layout

c) Add a <title> tag inside a Client Component

d) Set document.title in a useEffect

Q8. Why does next/image need either width and height, or the fill prop?

a) To enable server-side rendering

b) It is only needed for SVGs

c) To decide the file format

d) So the browser can reserve the right space before the image loads, preventing layout shift

Q9. You try to use <Image src="https://cdn.example.com/a.jpg" /> and get an error. What is usually missing?

a) The remote host configured under images.remotePatterns in next.config

b) A CSS import

c) An alt attribute on the img tag in public/

d) The use client directive

Q10. What is the default loading behaviour of next/image for images that are not marked as priority?

a) They are inlined as base64

b) Eager loading

c) Lazy loading, so off-screen images load only when they come near the viewport

d) They are never loaded

Q11. What does next/font do?

a) Converts fonts to images

b) Loads fonts from Google on every request

c) Downloads font files at build time and self-hosts them, with a fallback that reduces layout shift

d) Only works with system fonts

Q12. Which environment variable is available in browser JavaScript in a Next.js app?

a) DATABASE_URL

b) NEXT_PUBLIC_API_BASE

c) All variables in .env

d) SECRET_KEY

Q13. In a Server Component, how do you show the not-found page when a product does not exist?

a) Return null

b) Throw a 500 error

c) Use window.location

d) Call notFound() from next/navigation, which renders the nearest not-found.tsx

Q14. When does next/link prefetch a route by default in production?

a) Never

b) Only after the user clicks

c) Only in development

d) When the link enters the viewport, so navigation feels instant

Q15. What are intercepting routes, such as a folder named (.)photo/[id], typically used for?

a) Blocking bots

b) Handling API errors

c) Showing a route, like a photo, in a modal over the current page while keeping a shareable URL, with the full page on direct visits

d) Server-side redirects