Next.js App Router - Parallel Routes
This page demonstrates Next.js Parallel Routes feature. Using the @folder convention, three slots (@messages, @users, @settings) are rendered simultaneously, each with independent content and state.
Inbox
2 unread
John Doe
Project Progress Report
Please check the latest project progress report, we need...
14:30
Jane Smith
Meeting Schedule Confirmation
Regarding tomorrow's meeting schedule, please confirm the time...
13:15
Peter Jones
Document Review Request
Please help review this document, thank you...
11:45
User List
3 Online
JD
John Doe
Online
Engineering • Just now
JS
Jane Smith
Online
Product • 2 minutes ago
PJ
Peter Jones
Offline
Design • 1 hour ago
AB
Alice Brown
Online
Operations • 5 minutes ago
App Settings
General Settings
Language
Application interface language
English
Timezone
System timezone settings
UTC+8
Theme
Interface theme mode
Dark
Notification Settings
Email Notifications
Receive email notifications
On
Push Notifications
Receive push notifications
On
Sound Alerts
Notification sound alerts
Off
Security Settings
Two-Factor Authentication
Account security verification
On
Login Alerts
Abnormal login alerts
On
Password Strength
Password security level
Strong
Dark Mode
Welcome
Select a slot on the left to get started
This is a Parallel Routes demo page, showcasing multiple slots rendering simultaneously.
Click on the slot cards on the left to view different content.
MessagesUsersSettings
Technical Implementation Details
File Structure
app/layouts/parallel-routes/
├── @messages/page.tsx
├── @users/page.tsx
├── @settings/page.tsx
├── @default/page.tsx
└── layout.tsx
├── @messages/page.tsx
├── @users/page.tsx
├── @settings/page.tsx
├── @default/page.tsx
└── layout.tsx