Using singletons for the homepage in Next.js with Sanity

// Next
import { useRouter } from "next/router";

// Queries
import { routesQuery } from "@lib/queries";

// Sanity
import { getClient } from "@lib/sanity.server";
import { PortableText, usePreviewSubscription } from "@lib/sanity";

// Helpers
import { formatDate } from "@lib/helpers";

// Components
import FeaturedImage from "@components/FeaturedImage";
import LandingPage from "@components/LandingPage";
import NextSeo from "@components/NextSeo";

const Page = ({ pageData, preview, slug }) => {
  const router = useRouter();

  const { data: { page = {} } = {} } = usePreviewSubscription(routesQuery, {
    params: { slug },
    initialData: pageData,
    enabled: preview || router.query.preview !== null,
  });

  const { body, featuredImage, publishedAt, title, author } = page;

  return (
    <>
      <NextSeo page={page} slug={slug} />
      <LandingPage page={page} />
      {featuredImage && <FeaturedImage featuredImage={featuredImage} />}
      {author && <p>Written by: {author.name}</p>}
      {publishedAt && <p>Publish date: {formatDate(publishedAt)}</p>}
      {title && <h1>{title}</h1>}
      {body && <PortableText blocks={body} />}
    </>
  );
};

export const getStaticProps = async ({ params = {}, preview = false }) => {
  const { slug } = params;
  const { page: pageData } = await getClient(preview).fetch(routesQuery, {
    slug,
  });

  return {
    props: { preview, pageData, slug },
  };
};

export const getStaticPaths = async () => {
  const routes = await getClient()
    .fetch(`*[_type == "route" && defined(slug.current)]{
    "params": {"slug": slug.current}
  }`);

  return {
    paths: routes || null,
    fallback: false,
  };
};

export default Page;

queries.homepage

*[_type == 'page' && slug.current == 'home'][0]