List important files in app routing system.

Q: List important files in app routing system.

layout.js page.js loading.js not-found.js error.js global-error.js route.js: template.js default.js middleware.js forbidden.js unauthorized.js head.js mdx-components.js instrumentation.js

Difficulty: 6/10

App Router Conventions, Nested Layouts, Error & Loading States

Here are common files which we use in app routing system:

1
layout.js
2
page.js
3
loading.js
4
not-found.js
5
error.js
6
global-error.js
7
route.js:
8
template.js
9
default.js

other files used in the system are:

1
middleware.js
2
forbidden.js
3
unauthorized.js
4
head.js
5
mdx-components.js
6
instrumentation.js

Scenario Questions

0-2 years experience

1Imagine you're building a new dashboard page under `/dashboard`. You need a shared sidebar that doesn't re-render when navigating between tabs, and a specific view for the profile tab. Which files would you create in your `/app/dashboard` directory, and how do they work together?
2We have a page that fetches data from a slow external API. Users are seeing a blank screen while it loads. How would you use Next.js file-system conventions to show an instant loading skeleton without writing manual state variables?

Follow-up Questions

How does the behavior of layout.js differ from template.js regarding state preservation?
What happens if you define both a page.js and a route.js in the same route segment directory?
How do you catch errors that occur specifically inside your root layout?