Routing & Pages

Preview — 3 of 10 questions

What is the key architectural difference between the App Router and the Pages Router?

javascript

Pages Router:  pages/index.tsx        → "/"
               pages/blog/[slug].tsx  → "/blog/:slug"
App Router:    app/page.tsx           → "/"
               app/blog/[slug]/page.tsx → "/blog/:slug"

AThe App Router uses the pages/ folder; the Pages Router uses app/

BThey are identical — only the folder names differ

CThe App Router (introduced in Next.js 13) uses the app/ directory, renders React Server Components by default, and adds nested layouts, loading.tsx/error.tsx, and Server Actions; the Pages Router uses pages/ with client components by default and getServerSideProps/getStaticProps for data

DThe Pages Router supports Server Components; the App Router does not

What does each special file do in the App Router?

javascript

app/
├── layout.tsx
├── page.tsx
├── loading.tsx
├── error.tsx
└── not-found.tsx

AThey are all equivalent — you only ever need page.tsx

Bpage.tsx renders the route's UI; layout.tsx wraps children with UI that persists across navigation; loading.tsx is an automatic Suspense fallback for the segment; error.tsx is an automatic error boundary (must be a Client Component); not-found.tsx renders when notFound() is called

Clayout.tsx re-renders on every navigation

Dloading.tsx only works if you manually wrap components in <Suspense>

What is the correct way to navigate between internal pages in the App Router?

javascript

// Which of these is preferred for internal navigation?

A<a href="/about">About</a> — always use plain anchor tags

BuseRouter().replace('/about') — preferred over Link for all navigations

Cwindow.location.href = '/about' — the most performant option

D<Link href="/about">About</Link> from next/link — it does client-side navigation with automatic prefetching and no full page reload

Answer all 10 questions (7 more), see explanations for every answer, and track your score.