Unit 1: Fundamentals of Next.js and Routing - Practice Quiz

1 What is Next.js?

2 Which programming library is the foundation of Next.js?

3 Which feature can Next.js use to generate HTML on the server for each request?

4 Which Next.js component provides automatic image optimization?

5 Which directory commonly contains routes when using the Next.js App Router?

6 What is the main purpose of the public directory in a Next.js project?

7 Which file normally defines the UI for a route in the App Router?

8 In the App Router, what does each folder inside the app directory usually represent?

9 Which command commonly starts a Next.js development server?

10 What usually happens when a developer saves a file while the Next.js development server is running?

11 What determines a URL path in Next.js file-based routing?

12 Which file path creates the /about route with the App Router?

13 Which folder name defines a dynamic id route segment?

14 What can the route app/products/[id]/page.js match?

15 Which folder structure creates the nested route /dashboard/settings?

16 What is a layout mainly used for in the Next.js App Router?

17 Which file defines a layout in the App Router?

18 Which Next.js component is commonly used for client-side navigation between pages?

19 Which special file displays a loading state for a route segment?

20 Which special file provides an error boundary UI for a route segment?

21 A team wants to build a React application with server rendering, routing, and production build optimization without configuring each capability separately. Why is Next.js suitable for this project?

22 A product page must display current inventory when requested while keeping most rendering work on the server. Which Next.js capability best supports this requirement?

23 In an App Router project, which structure creates a home page and a shared root layout?

24 A component under the app directory uses useState and handles a button click. What must be added to the component file?

25 After creating a Next.js project, a developer runs npm run dev and edits app/page.js. What behavior should normally occur?

26 A developer creates app/contact/page.js. Which URL renders that page?

27 A store needs product URLs such as /products/42 and /products/105. Which file path should define the product page?

28 Given app/blog/[slug]/page.js, which value should params.slug contain when a user visits /blog/next-routing?

29 A documentation site must match /docs/setup as well as /docs/setup/windows. Which route definition captures one or more segments after /docs?

30 A dashboard needs a settings page at /dashboard/settings. Which directory structure maps directly to that URL?

31 A team places an admin page at app/(internal)/admin/page.js. What URL should expose the page?

32 A navigation sidebar should persist while users move between /dashboard/reports and /dashboard/settings. Where should the sidebar usually be defined?

33 What must a root layout component include so that route content can appear inside its shared HTML structure?

34 A header links to /dashboard and should use client-side navigation with Next.js prefetching support. Which implementation is most appropriate?

35 A Client Component must redirect to /checkout only after a form is successfully submitted. Which App Router API is appropriate?

36 A Client Component highlights a menu item when its URL matches the current route. Which hook should it use to read the current pathname?

37 A route segment performs slow data fetching. Which file provides an immediate fallback while that segment's content is loading?

38 A dashboard route needs to catch rendering errors in its segment and offer a retry button. Which setup is appropriate?

39 A component is reused by several routes but should not create a URL of its own. Where can it be placed within an App Router project?

40 A page displays an image whose dimensions vary across devices, and the team wants built-in resizing and lazy loading. Which Next.js feature should be used?

41 A team is migrating a React single-page application to Next.js. One page must read directly from a database, keep credentials off the browser bundle, and send rendered HTML without creating a separate REST endpoint. Which Next.js design best satisfies these requirements?

42 An App Router page contains a large data-access library and a small interactive counter. Which component boundary most effectively minimizes client-side JavaScript while preserving interactivity?

43 A project uses src/app/page.tsx, src/components/Nav.tsx, and public/logo.svg. Which reference correctly renders the logo regardless of the source file's depth?

44 A repository accidentally contains both app/page.tsx and src/app/page.tsx, while configuration files remain at the repository root. What is the correct architectural conclusion?

45 A Server Component needs to render an interactive search box that uses state and browser event handlers. Which composition is valid under the App Router?

46 A developer adds "use client" to app/dashboard/layout.tsx and imports several utility modules from it. What is the most important consequence?

47 During next dev, editing a component sometimes preserves its local state and sometimes remounts it. Which statement best describes the expected behavior?

48 A route works under next dev but fails only when preparing a production deployment. Which command sequence most directly tests the production compilation and runtime behavior locally?

49 Given app/page.tsx, app/about/page.tsx, app/about/team.tsx, and app/contact/layout.tsx, which URL set is directly routable from these files?

50 A project contains app/(marketing)/about/page.tsx. What public URL is produced, assuming no conflicting route exists?

51 A segment contains both app/blog/[slug]/page.tsx and app/blog/archive/page.tsx. Which component handles a request for /blog/archive?

52 For a route defined as app/docs/[[...parts]]/page.tsx, which request can match with parts absent rather than containing one or more strings?

53 A developer wants /shop to show the shop index while /shop/a/b captures a and b in one route parameter. Which route structure supports both without a separate /shop page?

54 Given app/dashboard/settings/profile/page.tsx, which directories may define layouts that naturally wrap the profile page without changing its URL?

55 Two teams create app/(store)/products/page.tsx and app/(catalog)/products/page.tsx. Why is this structure invalid?

56 A shared dashboard layout fetches user data and renders a sidebar. When navigating between /dashboard/analytics and /dashboard/settings with Next.js navigation, which behavior should the developer design for?

57 An App Router application defines its required root layout in app/layout.tsx. Which output is the root layout responsible for providing?

58 A Client Component handles a successful form interaction and must navigate programmatically to /account without a full document reload. Which API is appropriate?

59 A page renders <Link href="/reports">Reports</Link>, but /reports has a slow server-rendered subtree. Which statement best captures why navigation may still feel faster than using a plain <a> element?

60 A route segment contains page.tsx, loading.tsx, and error.tsx. The page suspends while fetching and later throws during rendering. Which behavior matches the App Router's segment boundaries?