Next.js duwe rong sistem routing. Pages Router (pages/) yaiku asli; App Router (app/, wiwit Next 13) yaiku sing luwih anyar, direkomendasiake, dibangun watara 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>;
}
Nang App Router, komponen yaiku Server Components kanthi standar — padha jalanan ing server, bisa await data langsung, lan ngirim nol JS kanggo komponen menyang browser. Pages Router malah nggunakake fungsi khusus (getServerSideProps) kanggo ngilumpakake data menyang kaca sing di-render klien.
layout.tsx).loading.tsx / Suspense.Nggunakake App Router kanggo proyek anyar — iku dene Next.js development fokus. Pages Router isih didhukung (lan loro bisa sareng-sareng ing siji app) nanging luwih-luwihan ing mode pemeliharaan.
App Router nggambarake arsitektur Next.js kiwari (Server Components, nested layouts, streaming).
Ngerti carane beda karo Pages Router lawas — utamane standar server-first lan model layout — penting kanggo kerja ing basis kode Next.js modern apa wae.
Pustaka pitakon wawancara IT kanthi jawaban rinci — saka Junior nganti Senior.
Nyumbang