custom-post-type.js

// Lives at pages/[productSlug]/index.js

import { getNextStaticProps } from '@faustjs/next';
import { client } from 'client';
import { Footer, Header, EntryHeader, Main, SEO } from 'components';
import { useRouter } from 'next/router';
import { pageTitle, is404Cpt } from 'utils';

export function ProductComponent() {
  const { useQuery } = client;
  const generalSettings = useQuery().generalSettings;
  const { query = {} } = useRouter();
  const { productSlug } = query;
  console.log(productSlug);

  const product = useQuery().product({
    id: productSlug,
    idType: 'SLUG',
  });

  return (
    <>
      <SEO
        title={pageTitle(
          generalSettings,
          product?.name,
          generalSettings?.title
        )}
        imageUrl={product?.image?.sourceUrl}
      />

      <Header />

      <Main>
        <EntryHeader
          title={product?.name}
          date={product?.date}
          image={product?.image}
        />
        <div className="container">{product?.description}</div>
      </Main>

      <Footer />
    </>
  );
}

export default function Page() {
  return <ProductComponent />;
}

export async function getStaticProps(context) {
  const productSlug = context?.params?.productSlug;
  return getNextStaticProps(context, {
    Page,
    client,
    notFound: await is404Cpt(productSlug, 'product'),
  });
}

export function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  };
}