Pages Router (Legacy)

File-based Routing

pages/
├── index.js
├── about.js
└── blog/
    ├── [slug].js
    └── index.js

• Each file becomes a route
• [paramName].js for dynamic routes

Data Fetching

export async function getStaticProps({ params }) {
  // Fetch data
  return { props: { /* ... */ } };
}

export async function getStaticPaths() {
  // Return possible values for [slug]
  return { paths: [/* ... */], fallback: false };
}

• getStaticProps: Static Site Generation
• getServerSideProps: Server-Side Rendering
• getStaticPaths: Specify dynamic routes for SSG

API Routes

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' });
}

• Create API endpoints as Node.js serverless functions