Next.js · Lesson 10 of 15
Errors, Parallel and Intercepting Routes
error.tsx, slots for parallel UI and intercepting routes for modals.
- Intermediate
- 16 min read
- 3 objectives
Before this lessonLesson 9: Databases with Prisma
What you will learn
- Recover with error.tsx
- Compose parallel slots
- Open a modal over a page
Your Progress
0 of 15 lessons 0%
- Lessons0 / 15
- Completed0
- Est. time left~ 4 hours
Create a free account to keep your progress on every device.
The App Router has a file for failures and two advanced routing tools: parallel routes (several pages in one layout) and intercepting routes (a modal that still has a real URL).
error.tsx
It must be a Client Component. It catches errors in the segment and below, and receives a reset function.
// app/dashboard/error.tsx
"use client";
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
return (
<p role="alert">
{error.message}{" "}
<button onClick={reset}>Try again</button>
</p>
);
}global-error.tsx wraps the root layout (it must include <html> and <body>). Use not-found.tsx for expected missing data.
Parallel routes
A folder named @slot becomes a prop on the parent layout. A dashboard can render @analytics and @team side by side, each with its own loading and error UI.
// app/dashboard/layout.tsx
export default function Layout({
children, analytics, team,
}: { children: React.ReactNode; analytics: React.ReactNode; team: React.ReactNode }) {
return (
<div>
{children}
<aside>{analytics}</aside>
<section>{team}</section>
</div>
);
}Intercepting routes for modals
(.)photo intercepts /photo/[id] when you navigate from the same segment, so a grid can open a modal without leaving the page. Refreshing the URL still shows the full photo page.