next-pages-router

getStaticProps generates static HTML at build time for fast performance; getServerSideProps renders on each request for dynamic data. Use getStaticProps for content that changes infrequently, getServerSideProps when data must be fresh on every request, and combine getStaticPaths for dynamic routes to pre-generate pages at build time.

Static Site Generation (SSG) pre-renders pages at build time via getStaticProps, delivering cached HTML instantly. Server-Side Rendering (SSR) via getServerSideProps renders on demand per request, ensuring current data but with latency trade-offs. Choose SSG for stable content, SSR for personalized or frequently updated data.

Dynamic routes use bracket syntax: pages/posts/[id].js matches /posts/123. API routes go in pages/api/—pages/api/users.js becomes POST /api/users. Use getStaticPaths with getStaticProps to pre-generate dynamic pages, or fetch dynamically with getServerSideProps. API routes handle request/response with standard Node.js patterns.

Migrate to App Router for better support of React Server Components, streaming, and layouts. Pages Router remains stable for existing projects. Migrate incrementally: App Router can coexist with pages/, or plan a full migration for cleaner organization and modern Next.js features like parallel routes and intercepting routes.

Pages Router supports middleware via pages/_middleware.js (legacy) or middleware.js at root level in Next.js 12+. Middleware runs before route handlers for request transformation, authentication, redirects, and rewrites. For complex middleware logic, move to App Router, which has improved middleware integration.

ISR lets getStaticProps revalidate static pages after deployment without rebuilding. Set revalidate: 60 to regenerate the page every 60 seconds on-demand. ISR balances static performance with fresh content, ideal for blogs, product pages, and frequently updated content that doesn't need on-request rendering.