Next.js on Acquia: Customizing content types

The next step is to create a page for every book. This page will display additional information about each book. 

The starter comes with a pages/[[...slug]].tsx page. This is a special page. It acts as an entry point for content or nodes that are created on Drupal.

Let’s tell this page to build pages for node—book resources. To do so there are a number of places where we have to update the slug:

1. Import the node--book component (like we did in pages/books.tsx)
2. Add node--book to the CONTENT_TYPES constant
3. Update the NodePage component to use a NodeBook component (which we’ll need to create) for book type nodes.
4. Specify the JSON:API query modifying parameters for the book content type.

So lets start by importing node--book component we previously created. You can place this at the top of the file:

import { NodeBook } from "components/node--book"

This will make Next.js break because NodeBook doesn’t actually exist yet. We created NodeBookTeaser but not NodeBook. So lets create a stub in components/node--book.tsx for now that we can revisit later:

export function NodeBook({ node }) {
    return <h2>{node.title}</h2>
}

Next, Update the CONTENT_TYPES variable and add node—book.  

const CONTENT_TYPES = [
  "node--page",
  "node--article",
  "node--event",
  "node--person",
  "node--place",
  "node--book" // <--- Add node--book
]

Then, update getStaticProps to add a condition for the node--book type and load related author and image data.  

export async function getStaticProps(
  context
): Promise<GetStaticPropsResult<NodePageProps>> {
  // ...

  if (type === "node--place") {
    params.addInclude(["field_place_image.image"])
  }

 if (type === "node--book") {
    params.addInclude(["field_display_author", "field_book_image.image"])
  }

  const node = await getResourceFromContext<DrupalNode>(type, context, {
    params: params.getQueryObject(),
  })

  // ...

}

Then, update the NodePage component to render the NodeBook component for node—book resources.  

export default function NodePage({ node, menus }: NodePageProps) {

  if (!node) return null

  return (
    <Layout title={node.title} menus={menus}>
      {node.type === "node--page" && <NodeBasicPage node={node} />}
      {node.type === "node--article" && <NodeArticle node={node} />}
      {node.type === "node--event" && <NodeEvent node={node} />}
      {node.type === "node--person" && <NodePerson node={node} />}
      {node.type === "node--place" && <NodePlace node={node} />}
      {node.type === "node--book" && <NodeBook node={node} />}
    </Layout>
  )
}

Now we have the NodeBook component correctly routed lets revisit it in components/node--book.tsx and revise the output:

import { MediaImage } from "components/media--image"
import { FormattedText } from "components/formatted-text"

export function NodeBook({ node }) {
  return (
    <article
      key={node.id}
      className="grid max-w-xl grid-cols-3 gap-10 py-12 mx-auto"
      >
      {node.field_book_image && (
        <div className="my-6 overflow-hidden rounded-md">
          <MediaImage media={node.field_book_image} priority />
        </div>
      )}
      <div className="flex flex-col col-span-2 space-y-4">
      <h1 className="mb-4 text-3xl font-black leading-tight md:text-4xl">
        {node.title}
      </h1>
      <p className="mb-4 text-gray-600">
        {node.field_display_author?.title ? (
          <span>
            <span className="font-semibold">
              {node.field_display_author?.title}
            </span>
          </span>
        ) : null}
      </p>
      {node.body?.processed && (
        <div className="prose">
          <FormattedText processed={node.body.processed} />
        </div>
      )}
      </div>
    </article>
  )
}

That’s it. If you visit the /books page and click on a book title, you should be taken to the book page.

To learn more about data fetching and rendering, refer to the Next-Drupal documentation.