docs: building pages updates

* Add pages router examples to building pages entry.
* Add todos about possible changes to on-demand revalidation section.

Author: backlineint

www/content/docs/pages.mdx

@@ -214,4 +214,92 @@ See the [fetching JSON:API resources](/docs/fetching-resources) section for more
 
 ## Pages Router
 
-TODO - Port some examples from the previous docs.
+When using the Pages Router, you will use the `getStaticProps` and `getServerSideProps` methods to fetch data for your pages.
+
+### Basic Example
+
+Here's an example which uses `getResource` to fetch a `page` node by ID:
+
+```tsx
+const node = await drupal.getResource(
+  "node--page",
+  "07464e9f-9221-4a4f-b7f2-01389408e6c8"
+)
+```
+
+A full page would look like this:
+
+```tsx title=pages/about.tsx
+// node will be populated at build time by getStaticProps
+export default function AboutPage({ node }) {
+  return (
+    <article>
+      <h1>{node.title}</h1>
+      // ...
+    </article>
+  )
+}
+
+export async function getStaticProps() {
+  // Fetch the node from Drupal.
+  const node = await drupal.getResource(
+    "node--page",
+    "07464e9f-9221-4a4f-b7f2-01389408e6c8"
+  )
+
+  // Pass the node as props to the AboutPage.
+  return {
+    props: {
+      node,
+    },
+  }
+}
+```
+
+---
+
+## Dynamic pages
+
+You can use Next.js [dynamic route](https://nextjs.org/docs/basic-features/pages#pages-with-dynamic-routes) to build static pages for Drupal entity types.
+
+Start by creating a page at `/pages/[...slug].tsx`, where `[...slug]` maps to the **path alias** for an entity type (or content type) in Drupal.
+
+This means `/pages/[...slug].tsx` will handle all pages with the following aliases: `/about`, `/team`, `/another/path` ...etc.
+
+To build static pages, there are two functions we need to implement:
+
+1. `getStaticPaths`: to tell Next.js all the routes that we want to be rendered.
+2. `getStaticProps`: to fetch data for pages.
+
+```tsx title=pages/[...slug].tsx
+export default function Page({ node }) {
+  return (
+    <article>
+      <h1>{node.title}</h1>
+      // ...
+    </article>
+  )
+}
+
+export async function getStaticPaths(context) {
+  // Build paths for all `node--page`.
+  return {
+    paths: await drupal.getStaticPathsFromContext("node--page", context),
+    fallback: false,
+  }
+}
+
+export async function getStaticProps(context) {
+  // Fetch the node based on the context.
+  // next-drupal automatically handles the slug value.
+  const node = await drupal.getResourceFromContext("node--page", context)
+
+  return {
+    props: {
+      node,
+    },
+  }
+}
+```
+
+---

www/content/tutorials/on-demand-revalidation/index.mdx

@@ -8,3 +8,7 @@ group: On-demand Revalidation
 [On-demand Revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation) makes it easy to update your Next.js site when content on Drupal is created, updated or deleted.
 
 Starting with `v1.6.0`, Next.js for Drupal supports On-demand Revalidation configurable per entity types.
+
+TODO - in v2, Next.js for Drupal supports...
+TODO - maybe this section should just be renamed to validation?
+TODO - maybe move revalidation examples from Building Pages to this section...