Creating a "home" page

Create a "singleton" document to store distinct content that is globally relevant to the application.

A quick side mission before going further. A website's "home" page is typically used to show the same sort of content that our page builder can generate. So it makes sense to reuse this content structure on the home page like we would any other page.

For any editable piece of content that has global relevance to an application—like site name, navigation, footer text, etc—most often you will use a "singleton" document. That is, a document type of which there should only ever be one in a dataset and it likely has a distinct _id value.

We'll keep the site settings simple for now. A new document type with just a single field—a reference to a page, which will be used as the home page on the site.

Create the siteSettings schema type

src/sanity/schemaTypes/siteSettings.ts

import { defineField, defineType } from "sanity";
import { ControlsIcon } from "@sanity/icons";

export const siteSettingsType = defineType({
  name: "siteSettings",
  title: "Site Settings",
  type: "document",
  icon: ControlsIcon,
  fields: [
    defineField({
      name: "homePage",
      type: "reference",
      to: [{ type: "page" }],
    }),
  ],
  preview: {
    prepare() {
      return {
        title: "Site Settings",
      };
    },
  },
});

Register siteSettings to your Studio schema types

src/sanity/schemaTypes/index.ts

// ...all other imports
import { siteSettingsType } from "./siteSettings";

export const schema: { types: SchemaTypeDefinition[] } = {
  types: [
    // ...all other types
    siteSettingsType,
  ],
};

Singleton documents can be invoked with a distinct _id value by configuring it in your structure builder configuration.

Update the structure builder configuration to include a singleton siteSettings document.

src/sanity/structure.ts

export const structure: StructureResolver = (S) =>
  S.list()
    .title("Blog")
    .items([
      // ...all other items
      S.listItem()
        .id("siteSettings")
        .schemaType("siteSettings")
        .title("Site Settings")
        .child(
          S.editor()
            .id("siteSettings")
            .schemaType("siteSettings")
            .documentId("siteSettings")
        ),
      ...S.documentTypeListItems().filter(
        (item) =>
          item.getId() &&
          ![
            // ...all other ignored types
            "siteSettings",
          ].includes(item.getId()!)
      ),
    ]);

See more examples of what you can do in the Structure Builder cheat sheet

You should now see the Site Settings document on the left hand side of your Structure tool. Instead of opening a list of documents, it opens a single one.

Select a "Home Page" reference, and publish the Site Settings

To prevent the creation of any more site settings documents, the type can be removed from the "Create" menu at the top left of your Studio.

Update your Studio config to remove this document type from the list

sanity.config.ts

export default defineConfig({
  // ...all other settings
  document: {
    newDocumentOptions: (prev) => prev.filter((item) => item.templateId !== "siteSettings"),
  },
});

The current "page" document type query relies on a page slug, so you'll need a different query for this site settings document first, and then query that page.

Update your queries.ts file to include this home page query

src/sanity/lib/queries.ts

// ...all other queries

export const HOME_PAGE_QUERY = defineQuery(`*[_id == "siteSettings"][0]{
    homePage->{
      ...,
      content[]{
        ...,
        _type == "faqs" => {
          ...,
          faqs[]->
        }
      }      
    }
  }`);

Run the following command to update your schema extraction and generated types

Terminal

npm run typegen

This command was setup in the Generate TypeScript Types lesson of the Content-driven web application foundations course.

Then update your home page route file similar to the dynamic route for individual pages, but for just this distinct home page.

Update the home page route

src/app/(frontend)/page.tsx

import { PageBuilder } from "@/components/PageBuilder";
import { sanityFetch } from "@/sanity/lib/live";
import { HOME_PAGE_QUERY } from "@/sanity/lib/queries";

export default async function Page() {
  const { data: page } = await sanityFetch({
    query: HOME_PAGE_QUERY,
  });

  return page?.homePage?.content ? (
    <PageBuilder content={page?.homePage.content} />
  ) : null;
}

The front page of your application at http://localhost:3000 should now show the page selected in your Site Settings document.

Excellent! You might now imagine how you would build other global content like your heading, footer and navigation menus into this same Site Settings document.

Let's keep enhancing the editing experience in the next lesson.

You have 7 uncompleted tasks in this lesson

0 of 7

Build landing pages with Next.js

Site settings schema type

There can only be one

Query the home page