nextjs

Pages Router uses the `pages/` directory with getServerSideProps/getStaticProps for data fetching, while App Router uses the `app/` directory with React Server Components, nested layouts, and streaming - and is the recommended approach for new projects.

In the App Router, data is fetched directly in Server Components using `async/await` with automatic caching. The Pages Router uses special functions like `getStaticProps` (build time) and `getServerSideProps` (request time).

Server Components render on the server with no JavaScript sent to the client, ideal for data fetching and static content. Client Components (marked with 'use client') render on both server and client, enabling interactivity like state and event handlers.

Dynamic routes use bracket syntax like `[id]` in folder/file names. For static generation, use `generateStaticParams` (App Router) or `getStaticPaths` (Pages Router) to define which paths should be pre-rendered at build time.

API routes let you build backend endpoints within your Next.js app. In the Pages Router, files in `pages/api/` export handlers. In the App Router, you create `route.ts` files that export functions named after HTTP methods (GET, POST, etc.).