Next.js Pro Quiz: From Pages to App Router — Test Your Skills! (30)

A A. A CSS framework built on top of React B B. A full-stack React framework that adds file-based routing, SSR, SSG, API routes, and performance optimizations out of the box C C. A state management library for React applications D D. A React testing framework with built-in mocking

A A. pages/ is for static files; app/ is for dynamic routes only B B. pages/ uses the old Pages Router with React components; app/ uses the new App Router (Next.js 13+) with React Server Components, layouts, and nested routing C C. app/ is deprecated and pages/ is the recommended approach D D. They are identical — just two naming conventions for the same system

A A. Defining global CSS styles for the entire app B B. A shared UI wrapper that persists between route navigations without re-rendering, used for navbars, sidebars, and shells C C. Configuring the Next.js build layout and output format D D. Creating page-level metadata like title and description

A A. Fetches data on every request at runtime (server-side) B B. Fetches data at build time and pre-renders the page as static HTML — the result is cached and reused for every request C C. Fetches data on the client side after the page loads D D. Generates static props for API routes only

A A. Runs on the client side to fetch data after hydration B B. Fetches data on EVERY request at runtime on the server and passes it as props — the page is never cached statically C C. Pre-renders a list of paths for dynamic routes at build time D D. Used only inside API routes for server logic

A A. A technique to incrementally load JavaScript bundles in the browser B B. Re-generating static pages in the background after a set time interval without a full rebuild — combining the speed of static with freshness of SSR C C. A way to progressively render components on the client side D D. Splitting a large static site into smaller incremental chunks

A A. Using query parameters: <code>app/posts?id=page.js</code> B B. Using square bracket folder names: <code>app/posts/[id]/page.js</code> — the segment in brackets becomes a dynamic parameter C C. Using a <code>dynamic.config.js</code> file in the route folder D D. Appending <code>:id</code> to the filename: <code>app/posts/:id/page.js</code>

A A. Components that only run tests on the server B B. Components that render on the server and send HTML + minimal JS to the client — they can directly access databases, file systems, and secrets without exposing them to the browser C C. Components that require a server to hydrate on the client D D. A new type of component that replaces useState and useEffect

A A. Enables client-side CSS rendering B B. Marks a component and all its imports as Client Components — they hydrate in the browser and can use useState, useEffect, and event handlers C C. Enables client-side routing for the entire app D D. Tells Next.js to skip server-side rendering for the page

A A. Creating a file inside <code>app/api/</code> named <code>route.js</code> and exporting named HTTP method functions (GET, POST, PUT, DELETE) B B. Creating a file inside <code>pages/api/</code> that exports a default handler function C C. Adding a <code>server.js</code> file in the root of the project D D. Using the <code>api: true</code> flag in <code>next.config.js</code>

A A. A component for displaying SVG icons only B B. An optimized image component that automatically handles lazy loading, resizing, WebP conversion, and prevents layout shift (CLS) C C. A component that stores images in the Next.js cache permanently D D. A wrapper around the HTML canvas element for image editing

A A. A component for linking to external websites only B B. A client-side navigation component that enables fast SPA-like transitions between pages without full browser reloads, with prefetching by default C C. A server-side redirect component D D. A component for creating anchor tags with custom CSS

A A. Configuring webpack loading rules for assets B B. Automatically showing a loading UI (skeleton/spinner) while a page or segment is loading — built on React Suspense C C. Setting up lazy loading for third-party scripts D D. Displaying a loading bar for API route requests

A A. A file for logging server errors to a file B B. A Client Component that acts as a React Error Boundary for a route segment, catching rendering errors and showing a fallback UI C C. A global error page that replaces the default 404 page D D. A configuration file for error reporting services like Sentry

A A. Using useEffect() and useState() inside the component B B. By making the component an async function and using await directly inside it to fetch data — no useEffect needed C C. Using getServerSideProps() exported from the component file D D. By importing a special useFetch() hook from next/data

A A. Storing environment variables for the application B B. Configuring Next.js behavior — redirects, rewrites, image domains, webpack customization, environment variables, and feature flags C C. Defining TypeScript types for the Next.js project D D. Setting up Tailwind CSS configuration

A A. No difference — all env variables are accessible everywhere B B. NEXT_PUBLIC_ variables are inlined into the client-side bundle and accessible in the browser; non-prefixed variables are server-only and never sent to the browser C C. Non-prefixed variables are for development only; NEXT_PUBLIC_ is for production D D. NEXT_PUBLIC_ variables are stored in the database; non-prefixed are in memory

A A. Generates random parameters for testing dynamic routes B B. Replaces getStaticPaths — defines which dynamic route segments should be pre-rendered at build time as static HTML C C. Generates TypeScript parameter types for route handlers D D. Creates static parameter validation schemas for forms

A A. Server middleware that runs inside API routes only B B. Code that runs at the Edge (before the request reaches your routes) — used for auth checks, redirects, rewrites, and geolocation-based routing C C. Client-side middleware that intercepts fetch requests in the browser D D. A build-time plugin system for transforming files

A A. Storing application data in a metadata database B B. Defining SEO-related HTML head tags (title, description, Open Graph, Twitter cards) using a typed API — statically or dynamically per route C C. Managing file metadata for uploads D D. Configuring build metadata like version numbers and timestamps

A A. Running multiple Next.js servers in parallel for load balancing B B. Rendering multiple pages simultaneously in the same layout using named slots (@folder convention) — useful for dashboards, modals, and split views C C. Fetching data from multiple APIs in parallel using Promise.all D D. A way to run getStaticProps for multiple paths simultaneously

A A. Intercepting API calls to add authentication headers B B. Loading a route within the current layout (e.g., showing a photo in a modal) while keeping the URL — uses (.) (..) (...) conventions C C. Intercepting and modifying server responses in middleware D D. A way to prevent certain routes from being accessed by unauthorized users

A A. A component that validates JavaScript syntax before loading B B. An optimized script loader with loading strategy control (beforeInteractive, afterInteractive, lazyOnload) that prevents blocking page render C C. A server-side script runner for build-time tasks D D. A component that bundles inline scripts with webpack automatically

A A. fetch() in Next.js never caches — you must use a caching library B B. Next.js extends fetch() with cache options: force-cache (default, static), no-store (no cache, always fresh), and next: { revalidate: N } (ISR-style TTL caching) C C. fetch() caches responses in localStorage on the client D D. Next.js only caches fetch() calls that use the GET method

A A. Checking if a route exists before navigating to it B B. Throwing a not-found error from a Server Component, which triggers the nearest <code>not-found.js</code> file and returns a 404 response C C. Redirecting users to a custom 404 page on the client side D D. Validating that a database record is not found before inserting

A A. Performs a client-side redirect using window.location B B. Throws an internal redirect that Next.js catches and responds with a 307/308 HTTP redirect — can be used in Server Components, Route Handlers, and Server Actions C C. Redirects users after a form submission on the client side D D. Creates a permanent 301 redirect in next.config.js

A A. Background tasks that run on a schedule using cron expressions B B. Async functions marked with "use server" that run on the server and can be called directly from Client Components or form actions — enabling form handling without API routes C C. Server-side versions of Redux actions for state management D D. Build-time functions that generate static content

A A. Server-side hooks for reading request data in Route Handlers B B. Client-side hooks: useRouter() for programmatic navigation, usePathname() for current URL path, useSearchParams() for reading query string parameters C C. Hooks for configuring the Next.js router in next.config.js D D. Testing utilities for mocking navigation in Jest tests

A A. A system for converting font files to different formats B B. Automatically self-hosts Google Fonts and custom fonts with zero layout shift — fonts are downloaded at build time and served from your own domain C C. A CSS-in-JS system for applying font styles D D. A font minification tool built into the Next.js compiler

A A. Client-side functions to force a browser page refresh B B. Server-side functions to purge cached data for a specific URL path or cache tag — used inside Server Actions or Route Handlers after mutations C C. Functions to validate URL paths against a schema D D. Middleware functions that validate incoming request paths