Στο App Router, η δομή των φακέλων μέσα στο app/ ορίζει τις διαδρομές σας — δεν υπάρχει router config να γράψετε. Κάθε φάκελος είναι ένα URL segment, και τα ειδικά αρχεία μέσα του ορίζουν τι κάνει να εμφανιστεί αυτό το segment.
app/
page.tsx → /
about/page.tsx → /about
blog/page.tsx → /blog
blog/[slug]/page.tsx → /blog/:slug (dynamic segment)
shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL)
Κάθε φάκελος μπορεί να περιέχει δεσμευμένα ονόματα αρχείων, καθένα με συγκεκριμένο ρόλο:
page.tsx → the route's UI (REQUIRED to make a segment routable)
layout.tsx → shared wrapper that persists across child routes
loading.tsx → loading UI (auto-wraps the page in <Suspense>)
error.tsx → error boundary for the segment
not-found.tsx→ 404 UI
route.ts → an API endpoint (instead of a page)
// app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything
export default function Post({ params }: { params: { slug: string } }) {
return <h1>Post: {params.slug}</h1>; // params.slug = "hello"
}
Οι αγκύλες δημιουργούν μια δυναμική παράμετρο που περνάει στη σελίδα μέσω του params. Παραλλαγές: [...slug] (catch-all), [[...slug]] (optional catch-all).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
Οι παρενθέσεις δημιουργούν route groups για να οργανώσετε αρχεία ή να εφαρμόσετε διαφορετικές διατάξεις χωρίς να επηρεάσετε το URL.
Το file-based routing κάνει την δομή του URL προφανή από το δέντρο αρχείων — δεν υπάρχει κεντρική ρύθμιση διαδρομής για να διατηρήσετε και να κρατήσετε συγχρονισμένη.
Γνωρίζοντας τα ειδικά ονόματα αρχείων (page, layout, loading, error, route) και τις σύμβαση αγκυλών ([param], [...catchAll], (group)) είναι το βασικό λεξιλόγιο για την κατασκευή οποιασδήποτε εφαρμογής App Router.