Αυτά είναι δύο προηγμένα χαρακτηριστικά App Router για σύνθετες διατάξεις UI. Μοιράζονται μια σύνταξη σύμβασης φακέλου.
Οι παράλληλες διαδρομές επιτρέπουν σε μια μόνο διάταξη να αποδώσει πολλές ανεξάρτητες "υποδοχές" διαδρομής ταυτόχρονα, καθεμία με τη δική της κατάσταση φόρτωσης/σφάλματος. Ορίζετε υποδοχές με φακέλους @name:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// app/layout.tsx — slots are passed as named props
export default function Layout({
children,
team, // ← @team slot
analytics, // ← @analytics slot
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
return <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
Κάθε υποδοχή πλοηγείται και φορτώνεται ανεξάρτητα — φανταστική για πίνακες ελέγχου όπου τα πάνελ ενημερώνονται ξεχωριστά, ή εμφάνιση δύο τμημάτων ταυτόχρονα.
Οι αναχαιτίζουσες διαδρομές σας επιτρέπουν να "πιάσετε" μια πλοήγηση και να την αποδώσετε στο τρέχον πλαίσιο (π.χ. ένα modal) αντί για μια πλήρη σελίδα — ενώ εξακολουθείτε να έχετε ένα πραγματικό, κοινόχρηστο URL.
app/feed/page.tsx
app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed
app/photo/[id]/page.tsx → the full page (on direct visit / refresh)
Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123
Refresh or share that URL → renders the FULL photo page (no interception)
Οι δείκτες αναχαίτισης ((.) ίδιο επίπεδο, (..) ένα επίπεδο πάνω, (...) ρίζα) ελέγχουν ποιο τμήμα αναχαιτίζεται. Αυτό είναι ακριβώς πώς λειτουργεί το μοτίβο "η φωτογραφία ανοίγει σε ένα modal αλλά έχει το δικό της URL" που μοιάζει με Instagram.
Οι παράλληλες διαδρομές επιτρέπουν σύνθετες, ανεξάρτητα φορτωμένες διατάξεις πολλαπλών τμημάτων (πίνακες ελέγχου) καθαρά· οι αναχαιτίζουσες διαδρομές παρέχουν το μοτίβο "modal με πραγματικό URL" (κοινόχρηστο, ασφαλές κατά την ανανέωση, φιλικό προς το κουμπί επιστροφής) που διαφορετικά θα ήταν δύσκολο να χτιστεί.
Είναι προηγμένες, αλλά λύνουν πραγματικά προβλήματα UX — ανεξάρτητα πάνελ και περιεχόμενα επικάλυψης — που προηγουμένως απαιτούσαν σημαντικό ручного χειρισμό δρομολόγησης/κατάστασης.