Deployment & Environment Variables in Next.js Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Layouts & Pages in Next.js
Test your knowledge of layouts and pages in Next.js, including the App Router, page.js, layout.js, nested layouts, route segments, and shared UI.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
Dynamic Routing & Catch-all Routes in Next.js
15 questions · 12 min · Medium
Next.js API Routes & Server Actions Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Data Fetching (SSR, SSG, ISR) in Next.js Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Image & Font Optimization in Next.js
15 questions · 12 min · Medium
State Management in Next.js Quiz
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. Which file convention is used to define a route's UI in the Next.js App Router?
- A. page.js
- B. route.js
- C. screen.js
- D. view.js
Show answer
A. page.js
In the App Router, a page.js or supported equivalent file defines the UI that is rendered for a route.
-
2. Which file convention is used to create a shared layout in the Next.js App Router?
- A. layout.js
- B. wrapper.js
- C. shared.js
- D. template.js
Show answer
A. layout.js
The layout.js file defines UI that can be shared across a route segment and its nested routes.
-
3. Where is the root layout typically located in an App Router project?
- A. app/layout.js
- B. app/root.js
- C. pages/layout.js
- D. src/root/layout.js
Show answer
A. app/layout.js
The root layout is typically defined as app/layout.js, or the equivalent supported file inside the app directory.
-
4. What is a major purpose of a layout in Next.js?
- A. To share UI between multiple pages
- B. To replace all API routes
- C. To store database tables
- D. To compile JavaScript manually
Show answer
A. To share UI between multiple pages
Layouts are useful for shared elements such as navigation bars, sidebars, headers, and footers.
-
5. How is the content of a child route rendered inside a layout?
- A. Through the children prop
- B. Through the route prop
- C. Through the page prop
- D. Through the content prop only
Show answer
A. Through the children prop
A layout receives its nested UI through the children prop and typically renders it inside the layout structure.
-
6. What does the following file structure represent: app/about/page.js?
- A. The /about route
- B. The /page/about route
- C. The /app/about route
- D. The root API route
Show answer
A. The /about route
In the App Router, the folder name becomes a route segment, so app/about/page.js corresponds to /about.
-
7. What is a nested layout in Next.js?
- A. A layout defined inside a nested route segment
- B. A layout that can only contain images
- C. A layout used only for API requests
- D. A layout that replaces the root project
Show answer
A. A layout defined inside a nested route segment
A layout can be placed within a route segment so that it applies to that segment and its child routes.
-
8. Which file structure can be used to give the /dashboard section its own layout?
- A. app/dashboard/layout.js
- B. app/layout/dashboard.js
- C. app/dashboard/page-layout.js
- D. dashboard/layout/app.js
Show answer
A. app/dashboard/layout.js
A layout.js inside the dashboard segment can provide shared UI for the dashboard route and its nested routes.
-
9. Which statement about layouts in the Next.js App Router is correct?
- A. Layouts can be nested
- B. Only one layout is allowed in the entire application
- C. Layouts cannot contain children
- D. Layouts are used only for API endpoints
Show answer
A. Layouts can be nested
Next.js supports nested layouts, allowing different sections of an application to have their own shared UI.
-
10. What happens to a layout when navigating between routes that share that layout?
- A. The shared layout can remain mounted while the page content changes
- B. The layout must always be recreated from scratch
- C. The layout is converted into an API route
- D. The layout is automatically deleted
Show answer
A. The shared layout can remain mounted while the page content changes
Shared layouts can preserve their state and remain mounted during navigation between their child routes.
-
11. Which file is used to define a loading UI for a route segment in the App Router?
- A. loading.js
- B. loader.js
- C. wait.js
- D. pending.js
Show answer
A. loading.js
The loading.js convention allows developers to define an instant loading UI for a route segment.
-
12. Which file convention is used to define an error UI for a route segment?
- A. error.js
- B. exception.js
- C. catch.js
- D. failure.js
Show answer
A. error.js
The error.js convention is used to define a UI that can handle errors for a route segment.
-
13. Which statement best describes a page.js file in the App Router?
- A. It defines the UI for a specific route segment
- B. It can only contain API handlers
- C. It is required in every folder inside app
- D. It defines the global CSS configuration
Show answer
A. It defines the UI for a specific route segment
A page.js file makes a route segment publicly accessible and defines the UI rendered for that route.
-
14. Which directory convention is primarily associated with the older Next.js Pages Router?
- A. pages
- B. routes
- C. screens
- D. views
Show answer
A. pages
The pages directory is used by the Pages Router, while the app directory is used by the App Router.
-
15. What is a key benefit of organizing an application with nested layouts?
- A. Different sections can have their own shared UI while still using the root layout
- B. Every page must use completely different HTML
- C. It removes the need for routing
- D. It prevents components from being reused
Show answer
A. Different sections can have their own shared UI while still using the root layout
Nested layouts allow sections such as dashboards, account areas, or admin panels to have specialized shared UI while remaining within the application's overall layout hierarchy.