Most new React projects now start on the Next.js App Router, so interviewers expect you to know Server Components and the file naming rules. This set covers the line between server and client code, special files like layout, loading and error, data fetching, Server Actions and SEO metadata.
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 16 questions.
Topics covered in this set
- Server Components vs Client Components
- The 'use client' and 'use server' directives
- page, layout, loading and error files
- Dynamic routes, route groups and generateStaticParams
- Server Actions and metadata
- Streaming with Suspense and next/image
React MCQs with answers and explanations
Q1. In the Next.js App Router, what kind of component is a file inside the app directory by default?
a) Static HTML only
b) Server Component
c) Client Component
d) Web Component
Q2. What does adding 'use client' at the top of a file do?
a) Disables server-side rendering for the whole app
b) Makes only that file run in the browser
c) Marks a boundary: that module and everything it imports become part of the client bundle
d) Turns the component into a Server Action
Q3. Which of these can you use inside a Server Component?
a) An async function that queries a database directly with await
b) window.localStorage
c) useEffect
d) useState
Q4. Can a Client Component import a Server Component?
a) Yes, it works the same way
b) Only with dynamic imports
c) No, but a Server Component can be passed to it as children or another prop
d) Only in the pages directory
Q5. What must be true of props passed from a Server Component to a Client Component?
a) They must be wrapped in useMemo
b) They must be serialisable, so plain functions and class instances cannot be passed (Server Actions are the exception)
c) They must be strings
d) There are no restrictions
Q6. What is special about layout.tsx in the App Router?
a) It re-mounts on every navigation
b) It replaces _document
c) It is only used for errors
d) It wraps its segment's pages and keeps its state and does not re-render when navigating between child routes
Q7. What does adding loading.tsx to a route segment do?
a) Preloads images
b) Automatically wraps the segment's page in a Suspense boundary with that file as the fallback
c) Delays navigation until data loads
d) Shows a spinner only during the build
Q8. Which statement about error.tsx is correct?
a) It is optional only in production
b) It must be a Server Component
c) It handles errors in the root layout of the same segment
d) It must be a Client Component, because it is a React error boundary
Q9. Which file path creates a dynamic route for /blog/my-first-post?
a) pages/blog/slug.tsx
b) app/blog/{slug}.tsx
c) app/blog/[slug]/page.tsx
d) app/blog/:slug/page.tsx
Q10. What is generateStaticParams used for?
a) Validating form data
b) Returning the list of dynamic route params to pre-render as static pages at build time
c) Creating sitemap.xml automatically
d) Generating API keys
Q11. What is a Server Action?
a) A cron job
b) A Redux action that runs on the server
c) A middleware function
d) An async function marked with 'use server' that runs on the server and can be called from forms or Client Components
Q12. What effect does a folder named (marketing) have on URLs?
a) None. Route groups organise files and can share a layout without adding a URL segment
b) URLs include /(marketing)
c) It makes the routes private
d) It creates a parallel route
Q13. How do you set page titles and meta descriptions for SEO in the App Router?
a) Use next/head in every page
b) Export a metadata object or a generateMetadata function from a layout or page
c) Edit _document.tsx
d) Use document.title in useEffect
Q14. What is the benefit of streaming with Suspense in the App Router?
a) It only works on the client
b) It disables caching
c) The whole page waits for the slowest query
d) The server sends the page shell first and streams slower parts in as they become ready
Q15. Which is a benefit of next/image over a plain <img> tag?
a) Automatic resizing, modern formats, lazy loading and reserved space that prevents layout shift
b) It removes the need for alt text
c) It supports only PNG
d) It renders images on a canvas
Q16. In Next.js 15 and later, how should a page read its dynamic route params?
a) From useRouter().query
b) params is a Promise, so await it (or use React's use() in a Client Component)
c) From getServerSideProps
d) From window.location
Quick revision notes
- app/ components are Server Components by default; add 'use client' only where you need state, effects or browser APIs.
- Pass Server Components to Client Components as children; props across the boundary must be serialisable.
- layout stays mounted, loading adds Suspense, error is a client error boundary, and page makes a route public.
- Use the Metadata API for SEO and generateStaticParams to pre-render dynamic routes.
- Server Actions ('use server') handle mutations without separate API routes.
Frequently asked questions
Do Server Components replace SSR?
No. SSR turns components into HTML for the first load. Server Components are components that run only on the server and send no JavaScript. The App Router uses both together.
When should I use a Client Component?
When you need interactivity: state, effects, event handlers, browser APIs, or libraries that use them. Keep client parts small and push them as far down the tree as you can.
Is the pages directory still supported?
Yes, Next.js still supports the Pages Router. But new features like Server Components, streaming layouts and Server Actions are built for the App Router.
Comments
Post a Comment