Next.js mempunyai dua sistem perutean. Pages Router (pages/) adalah yang asal; App Router (app/, sejak Next 13) adalah yang lebih baru, disyorkan, dibina sekitar 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>;
}
Dalam App Router, komponen adalah Server Components secara lalai — ia berjalan di pelayan, boleh await data secara langsung, dan menghantar sifar JS untuk komponen itu ke pelayar. Pages Router sebaliknya menggunakan fungsi khas (getServerSideProps) untuk melewatkan data ke halaman yang dirender klien.
layout.tsx).loading.tsx / Suspense.Gunakan App Router untuk projek baru — di sini pembangunan Next.js difokuskan. Pages Router masih disokong (dan keduanya boleh wujud bersama dalam satu aplikasi) tetapi pada asasnya berada dalam mod penyelenggaraan.
App Router mewakili seni bina Next.js semasa (Server Components, tata letak bersarang, penstriman).
Mengetahui cara ia berbeza daripada Pages Router warisan — terutamanya lalai server-first dan model tata letak — adalah penting untuk bekerja dalam mana-mana pangkalan kod Next.js moden.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma