Next.js:llä on kaksi reititys järjestelmää. Pages Router (pages/) on alkuperäinen; App Router (app/, Next 13:sta lähtien) on uudempi, suositeltu järjestelmä, joka on rakennettu React Server Componentsin ympärille.
Next.js:llä on kaksi reititys järjestelmää. Pages Router (pages/) on alkuperäinen; App Router (app/, Next 13:sta lähtien) on uudempi, suositeltu järjestelmä, joka on rakennettu React Server Componentsin ympärille.
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 Routerissa komponentit ovat Server Components oletuksena — ne suoritetaan palvelimella, voivat await tietoja suoraan ja lähettävät nolla JS:ää kyseiselle komponentille selaimeen. Pages Router käytti sen sijaan erityisfunktioita (getServerSideProps) tietojen välittämiseen asiakas-renderöityihin sivuihin.
layout.tsx), jotka säilyvät navigoinnin yli.loading.tsx / Suspense:n kanssa.Käytä App Routeria uusissa projekteissa — se on mihin Next.js-kehitys on keskittynyt. Pages Router on edelleen tuettu (ja molemmat voivat olla rinnakkain yhdessä sovelluksessa), mutta se on pohjimmiltaan ylläpitotilassa.
App Router edustaa Next.js:n nykyistä arkkitehtuuria (Server Components, sisäkkäiset layoutit, streaming).
Se, että ymmärrät kuinka se eroaa vanhasta Pages Routerista — erityisesti palvelin-ensimmäinen oletus ja layout-malli — on olennaista millä tahansa modernissa Next.js-koodikannan kanssa työskennellessä.