🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Using singletons for the homepage in Next.js with Sanity

37 replies
Last updated: Jul 28, 2021
Guys, using slugs works but how do you do that for the homepage? I don’t want to define a slug for the homepage since it’s the root page.
I am using sections to create all the pages with renderSections in Next js.


Jul 28, 2021, 5:28 PM
you can create a global settings doc with a Homepage reference and then use the structure builder to render it as a singleton
Jul 28, 2021, 5:36 PM
this is a powerful pattern that can be used in a bunch of creative ways
Jul 28, 2021, 5:37 PM
user G
is using it to swap out entire site themes like navigations, footers, etc
Jul 28, 2021, 5:37 PM
in the past i would default the site root to a slug of
home
or
homepage
but as Mike said, I am not following a wordpress settings style pattern, where you set the homepage in a global config, so any page in the system can be swapped as the hompage without having to worry about the
slug
Jul 28, 2021, 5:40 PM
Jul 28, 2021, 5:41 PM
How do you show the singleton on the front-end is there a example or anything? Because I love articles but this is way too long.
Jul 28, 2021, 6:19 PM
front-end of what?
Jul 28, 2021, 6:19 PM
sanity or the main site?
Jul 28, 2021, 6:19 PM
Example of like how to use it with Next JS f
Jul 28, 2021, 6:20 PM
you would just make an index.jsx file that overrides the [slug] file and select the specific singleton in the query
Jul 28, 2021, 6:20 PM
So I can keep the [slug].js inside the “pages” but the index should have the singleton only right?
Jul 28, 2021, 6:21 PM
// 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;

Jul 28, 2021, 6:21 PM
This my [slug].js btw for all other pages
Jul 28, 2021, 6:21 PM
you’d use essentially the same code just not fetcha ll pages, only the 1 you want
Jul 28, 2021, 6:22 PM
so you basically don’t need the getstaticpaths, and just need getstaticProps with a query to your home singleton
Jul 28, 2021, 6:22 PM
because you don’t need all the other
paths
in this case
Jul 28, 2021, 6:22 PM
I am using “routes” but instead of that I should use the
queries.homepage
?
Jul 28, 2021, 6:22 PM
rIght
Jul 28, 2021, 6:22 PM
Is there an example of index.js that I can check?
Jul 28, 2021, 6:23 PM
i don’t know what you mean by example, you have everything you need, just remove the getStaticPaths, and replace the routesQuery with a homeQuery
Jul 28, 2021, 6:23 PM
Ahhhhhh
Jul 28, 2021, 6:24 PM
where homeQuery is some singleton in your queries file
Jul 28, 2021, 6:24 PM
So everything else is oke just remove getStaticPaths and repalce routesQuery with Homequery
Jul 28, 2021, 6:24 PM
Got it
Jul 28, 2021, 6:24 PM
*[_type == 'page' && slug.current == 'home'][0]
type thing
Jul 28, 2021, 6:24 PM
exactly
Jul 28, 2021, 6:24 PM
Ahhh that’s why you create the singeleton 😄
Jul 28, 2021, 6:24 PM
for the homepage only
Jul 28, 2021, 6:24 PM
Great!
Jul 28, 2021, 6:24 PM
Maybe a stupid question
Jul 28, 2021, 6:25 PM
but Do you suggest like using “sections” for every single page?
Jul 28, 2021, 6:25 PM
i find it easier at the end of the day not to limit the client
Jul 28, 2021, 6:25 PM
Nice
Jul 28, 2021, 6:25 PM
because they always ask to add
xyz
to other places
Jul 28, 2021, 6:25 PM
So best practice is to let them select
Jul 28, 2021, 6:25 PM
Correct
Jul 28, 2021, 6:25 PM
Thanks boss
Jul 28, 2021, 6:25 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?