App Router file conventions
In the App Router folders define routes and special files inside a folder define the UI of that segment.
| File | Purpose |
|---|---|
page.tsx | The UI of the route; without it the folder is not publicly accessible |
layout.tsx | Shared UI that wraps child segments and keeps its state between navigations |
template.tsx | Like a layout, but remounts on every navigation |
loading.tsx | Instant loading state, wraps the page in <Suspense> |
error.tsx | Error boundary for the segment (must be a Client Component) |
not-found.tsx | UI for notFound() and unmatched URLs |
route.ts | An API endpoint (Route Handler) instead of a page |
How they nest
tsx
<Layout>
<Template>
<ErrorBoundary fallback={<Error />}>
<Suspense fallback={<Loading />}>
<ErrorBoundary fallback={<NotFound />}>
<Page />
</ErrorBoundary>
</Suspense>
</ErrorBoundary>
</Template>
</Layout>Child segments are rendered inside the parent layout, so layouts nest: app/layout.tsx -> app/blog/layout.tsx -> app/blog/[slug]/page.tsx.
Note:
error.tsxdoes not catch errors of thelayout.tsxin the same folder, because the boundary sits inside that layout. Errors in the root layout are handled byglobal-error.tsx.
updated
did you know it?