diff --git a/www/content/docs/pages.mdx b/www/content/docs/pages.mdx index 703ca445..712e9ef1 100644 --- a/www/content/docs/pages.mdx +++ b/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 ( +
+

{node.title}

+ // ... +
+ ) +} + +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 ( +
+

{node.title}

+ // ... +
+ ) +} + +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, + }, + } +} +``` + +--- diff --git a/www/content/tutorials/on-demand-revalidation/index.mdx b/www/content/tutorials/on-demand-revalidation/index.mdx index b6966acf..9165758a 100644 --- a/www/content/tutorials/on-demand-revalidation/index.mdx +++ b/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...