Το Next.js έχει δύο συστήματα δρομολόγησης. Το Pages Router (pages/) είναι το αρχικό· το App Router (app/, από Next 13 και μετά) είναι το νεότερο, συνιστώμενο σύστημα που χτίστηκε γύρω από React Server Components.
Το Next.js έχει δύο συστήματα δρομολόγησης. Το Pages Router (pages/) είναι το αρχικό· το App Router (app/, από Next 13 και μετά) είναι το νεότερο, συνιστώμενο σύστημα που χτίστηκε γύρω από React Server Components.
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
Στο App Router, τα components είναι Server Components εξ ορισμού — εκτελούνται στον server, μπορούν να await δεδομένα απευθείας και στέλνουν μηδέν JS για εκείνο το component στον browser. Το Pages Router χρησιμοποίησε αντ' αυτού ειδικές συναρτήσεις (getServerSideProps) για να περάσει δεδομένα σε σελίδες που αποδίδονται από το client.
layout.tsx) που παραμένουν κατά την πλοήγηση.loading.tsx / Suspense.Χρησιμοποιήστε το App Router για νέα έργα — είναι όπου επικεντρώνεται η ανάπτυξη Next.js. Το Pages Router εξακολουθεί να υποστηρίζεται (και τα δύο μπορούν να συνυπάρχουν σε μια εφαρμογή), αλλά είναι ουσιαστικά σε κατάσταση συντήρησης.
Το App Router αντιπροσωπεύει την τρέχουσα αρχιτεκτονική του Next.js (Server Components, ένθετες διατάξεις, streaming).
Η γνώση του πώς διαφέρει από το παλιό Pages Router — ιδιαίτερα το server-first default και το μοντέλο διάταξης — είναι απαραίτητη για την εργασία σε οποιαδήποτε σύγχρονη Next.js codebase.