Using next-drupal in Next.js 14 app router

next-drupal-app-router.tsx

import { DrupalJsonApiParams } from "drupal-jsonapi-params";

import { drupal, getResourceByParams } from "@/lib/drupal";

const RESOURCE_TYPE = "node--landing_page";

export default async function Page({ params }: { params: { slug: string[] } }) {
  // Fetch a resource by params
  const resource = await getResourceByParams(params);

  return (
    <>
      <h1>{resource.title}</h1>

      <pre>{JSON.stringify(resource, null, 2)}</pre>
    </>
  );
}

// Dynamic metadata
// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
export async function generateMetadata({
  params,
}: {
  params: { slug: string[] };
}) {
  // Fetch the resource, but cherry pick the fields we need.
  const drupalParams = new DrupalJsonApiParams();
  drupalParams.addFields(RESOURCE_TYPE, ["title", "field_metatags"]);

  const resource = await getResourceByParams(params, {
    params: drupalParams.getQueryObject(),
  });

  return {
    title: resource.field_metatags?.title ?? resource.title,
    description: resource.field_metatags?.description,
  };
}

// Statically generate pages at build time
// https://nextjs.org/docs/app/api-reference/functions/generate-static-params
export async function generateStaticParams() {
  const paths = await drupal.getStaticPathsFromContext(RESOURCE_TYPE, {});

  // @ts-ignore
  return paths.map((path) => ({ slug: path.params.slug }));
}