# Next.js (Pages Router)

> Same integration but for legacy Pages Router projects.

Same data flow as the App Router quickstart, with `getStaticProps` + ISR.

## Reader helper

Same as the [App Router version](/docs/frameworks/nextjs#reader-helper).

## Index page

```tsx
// pages/blog/index.tsx
import Link from "next/link";
import type { GetStaticProps } from "next";
import { listPosts } from "@/lib/blogoto";

export const getStaticProps: GetStaticProps = async () => {
  const { posts } = await listPosts(1, 24);
  return { props: { posts }, revalidate: 300 };
};

export default function BlogIndex({ posts }: { posts: any[] }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}
```

## Detail page

```tsx
// pages/blog/[slug].tsx
import type { GetStaticPaths, GetStaticProps } from "next";
import { getPost, allSlugs } from "@/lib/blogoto";

export const getStaticPaths: GetStaticPaths = async () => {
  const slugs = await allSlugs();
  return { paths: slugs.map((slug) => ({ params: { slug } })), fallback: "blocking" };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await getPost(params!.slug as string);
  if (!post) return { notFound: true };
  return { props: { post }, revalidate: 300 };
};

export default function BlogPost({ post }: { post: any }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}
```

For revalidation, use [`res.revalidate('/blog/...')`](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) inside an API route that verifies the webhook signature.


---

Canonical URL: https://mentionwell.com/docs/frameworks/nextjs-pages
Live HTML version: https://mentionwell.com/docs/frameworks/nextjs-pages
Section: Quickstarts by stack
Site index for AI ingestion: https://mentionwell.com/llms.txt
Full reference: https://mentionwell.com/llms-full.txt