How to set the homepage of Sanity when using Next.js catch all route.

8 replies
Last updated: Feb 28, 2022
How do I set the homepage of sanity when using Next js catch all route? I have followed this tutorial from Simeon which works great. For prefixes and different types. But How do I specify a unique ID name to the page -> home from Sanity studio? From this example he has a ID but I am getting a unique generated ID

const docQuery = {
    home: groq`*[_id == "homePage"][0]`,
    article: groq`*[_type == "article" && slug.current == $slug][0]`,
    case: groq`*[_type == "case" && slug.current == $slug][0]`,
    page: groq`*[_type == "page" && slug.current == $slug][0]`,
  };
AI Update

Based on the official Sanity documentation on document IDs, the short answer is: you can't easily set a custom document ID like "homePage" in Sanity Studio, and the official recommendation is to use a different approach.

The Reality About Custom IDs

The Sanity documentation explicitly states: "There is no way to override the default ID logic" in the Studio. While it's technically possible to create documents with custom IDs via the API or CLI, this isn't the recommended approach and comes with important caveats:

  • Any document ID containing a . (dot) is considered private and requires authentication
  • Custom IDs can cause unexpected interactions with platform functionality
  • Once set, document IDs cannot be changed

Instead of trying to force a custom ID, here are better patterns for handling your homepage:

Option 1: Create a custom field for identification

Add a field to your page schema that you can query by:

// In your schema
{
  name: 'page',
  type: 'document',
  fields: [
    {
      name: 'pageId',
      type: 'string',
      validation: Rule => Rule.required(),
      // Could use an enum for specific pages
      options: {
        list: [
          {title: 'Home', value: 'home'},
          {title: 'About', value: 'about'}
        ]
      }
    }
    // ... other fields
  ]
}

Then query it like:

const docQuery = {
  home: groq`*[_type == "page" && pageId == "home"][0]`,
  article: groq`*[_type == "article" && slug.current == $slug][0]`,
  // ...
}

Option 2: Use a dedicated singleton document type

Create a separate document type specifically for the homepage:

// homePage.js schema
export default {
  name: 'homePage',
  type: 'document',
  title: 'Home Page',
  fields: [
    // your fields
  ]
}

Then in your Structure tool configuration, ensure only one instance can be created:

S.listItem()
  .title('Home Page')
  .child(
    S.document()
      .schemaType('homePage')
      .documentId('homePage') // This sets the ID in the structure
  )

Query it by type (since there's only one):

const homeQuery = groq`*[_type == "homePage"][0]`

Option 3: If you absolutely must use the API approach

If you're creating the document programmatically and need a specific ID, you can use the client:

import {createClient} from '@sanity/client'

const client = createClient({...})

await client.createIfNotExists({
  _id: 'homePage',
  _type: 'page',
  title: 'Home',
  // ... other fields
})

But remember: this bypasses Studio's default behavior and isn't officially supported for manual document creation.

Why Simeon's Example Works

In the tutorial you're following, Simeon likely either:

  1. Created that document with a custom ID via the API/CLI before the tutorial
  2. Used a singleton pattern with a predictable query
  3. Configured the Structure tool to use a specific document ID

The key takeaway: focus on querying patterns rather than forcing custom IDs. Using a custom field or a singleton document type is more maintainable and aligns with Sanity's recommended practices.

A document with a custom ID would be created either through the API/CLI (e.g.,
sanity documents create --id 'homePage'
) or by appending
;desiredId
in your Studio URL (e.g.,
<http://localhost:3333/desk/post;homePage>
).
Nice one Geoff! So, it doesn't matter if I change the slug for that page ID is staying unique?
Appending desired ID it's page “home” or by Title Home. So What would be the right command?
So, it doesn’t matter if I change the slug for that page ID is staying unique?
Correct. The
_id
will never change.

Appending desired ID it’s page “home” or by Title Home. So What would be the right command?
I’m not understanding what you’re asking here. Both of the above approaches will only work to create a new document. If you want to change the existing one, you’ll need to script copying over the data or export to get the NDJSON and then import the new document.
I have removed my dummy page “Home” from my “Page” / Pages type. Now, I want to create that same page. This new page should have a ID homePage instead of the unique ID.
Ah, thank you. You’ll navigate to the page in your studio using the URL format
<http://localhost:3333/desk/><documentType>;<desiredId>
. (replace
<http://localhost:3333>
with
<https://deployedName.sanity.studio>
if you’re doing this on your deployed studio) to create the document, which you then proceed to populate with your content (title, etc.). If I understand you correctly, you’d use
<http://localhost:3333/desk/page;homePage>
.
Thank you Geoff!
appreciated

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?