👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Best practices for using page structure builder in Sanity and decoupling from traditional CMS thinking.

28 replies
Last updated: Dec 19, 2023
The page structure builder works nice. But can I like remove the page builder structure from a homepage only for instance? So the homepage should hide this option. Because on the homepage I have Latest Articles, Latest Projects but I don't need this on other pages but only homepage. But on the other hand I do need the page structure builder on all other pages if that makes sense? What is best practice and advice to do here?
Jan 2, 2023, 10:29 PM
Hello
user Q
Which page structure builder are you alluding to?
Jan 2, 2023, 10:31 PM
I am completely lost 😆
Jan 2, 2023, 10:32 PM
Structured content for page building from the last example you have shared with me 😊 I am only confusing about the mindset on headless CMS now. Coming from a WordPress environment where you where able to hide specifics fields based on the page type etc.
Now I have a design for a client on the homepage it's showing latest projects and news.

Because for a blog for instance you won't use a page structure builder but just output everything because the layout is the same.

But a page like contact or about or homepage can look different.

Now do I use the page structure on type "page" all the time for creating pages as a best practice?

Or can I tell Sanity that only exclude the page builder (array) from a specific page ID/Slug?
Jan 2, 2023, 10:40 PM
And what is best practice and the advice to do? Because all those starters are usually blogs. Which makes sense... it's easy to start with.
Jan 2, 2023, 10:41 PM
well yes and no, it depends on your needs 🙂You can use whatever you need from your sanity data. basically setup your structured content on the main page parts and then use the page builder for landingpages or additional informational pages for example.
you can and should decouple the 1:1 thinking of other cms’ -> use the page builder for quick contained landing pages, setup overall informational
setting
singleton doc, with fields for about us etc. as well as impressum text, social links, contact info and more.and then you have a doc type called person which is basically the team with name, email, short bio etc, then you have testimonial docs, news & project docs, with title, slug, body and publish date and all the other fields;
Then in your front end you dynamically load different parts of your document types or page parts into your pages.
You get
setting.impressum
(block content) and
contact
info for the page route
/impressum

for
/about
you get
"team": *[_type == 'person']{name, team, profileImage)
but also
"aboutText": *[_type == 'setting'].aboutText
and
"testimonials": *[_type == 'testimonial' && useForAbout == 'true']{sourceName, body, image)
as well as a selection of news items
"news": *[_type == 'news' && featured == 'true']{title, team, excerpt)[0...3]|order(_publishAt, desc)
and also projects that should be featured`"projects": *[_type == 'project' && featured == 'true']|order(finishDate, desc){title, team, image, client, description)[0...3]` under the 4 featured projects you will implement a button
All Projects
will will lead to
/projects
where you will need
"projects": *[_type == 'project']|order(finishDate, desc){title, team, image, client, description, slug)
Clicking on a project there will direct you to
/project/SLUG
where you get the data from one specific project with a
body
and so much more info.And then for landingpages, which you generate with
[slug].tsx
in nextJS you query for the
content
array and render it there.
I hope this is clear
😅
Jan 2, 2023, 11:02 PM
And the beauty is, that you can then use the same logic in the page builder:lets say you have a section
testimonialBannerSection
which can have 3 testimonials in a slider or whatever. Now you set it up as an object with an array of
max 3
items which are
references
to your
testimonials
💥In your front-end you need to setup a special query for those things then.
Jan 2, 2023, 11:10 PM
So inside a singleton I ahould place something like about and add a reference to the team schema.
And on next you would have something like: app - projects/blog/about - page.tsx and use the queries which are needed on each page and based on how you structured it?
Jan 2, 2023, 11:14 PM
And settings global query like desc, info, socials share it it to all the nested routes like nav and footer info. But the content on a page should fetch and load the query which is needed for that specific page.
But in the app root folder the page.tsx file just output the data which is needed on that page?

So its easier actually not to have page structure data unless tou have one global page
Jan 2, 2023, 11:16 PM
Exactly! You only make content “static” in sanity, if you might not reuse it. A landingpage content wont be reused, but certain parts might. If they will be reused, it is a signal for you to either make it part of an overall singleton doc or if you need variation, a doc type by itself
We can also have a short zoom and go through your content structure/plan (record and then share it?)
Jan 2, 2023, 11:16 PM
So its easier actually not to have page structure data unless tou have one global page
Yes, but sometimes no… It really depends on what the needs are and also thinking on how this will scale
Jan 2, 2023, 11:17 PM
Or you can read watch carrie hanes stuff… she is amazing and all I am brain-vomiting here is based on her work (or what I learnt from it)
Jan 2, 2023, 11:19 PM
Right! So actually the steuctured builder is nit really important since all designs for websites are ynique. The thing a clients sees is what they will get. I am overthinking! It’s better to have a global query for settings and unique queries for pages like about. Team, contact etc. This way I can have a contact form on a /contact/page.tsx and have still have a unique layout. And since I am using static generated pages there is no need really to have a page builder unless its a landingpage.
Jan 2, 2023, 11:19 PM
Yeah I mean to explain the approach “Dont think of design! We need to think about your content first and then understand your long term needs, design will always be changeable” is pretty hard sometimes…But I think it is worth rethinking stuff over and over again before sitting down and coding …
I usually use some sort of flow chart (figjam or miro) to mix and match
Jan 2, 2023, 11:21 PM
That’s my problem overthinking and wanting to have it “perfect” from the start. Need to get out of that mindset from classic CMS like WordPress
Jan 2, 2023, 11:22 PM
Well will have the design soon so sounds good about zoom 😃 to see how you would do things theoretically once I get that “click” in my brain it’s gonna be easy
Jan 2, 2023, 11:23 PM
I can show you some of my flow charts … wait…
This is something I do sometimes, its just notes to explain things …
Jan 2, 2023, 11:24 PM
You can also use the plugin from
user B
Tapi in FigJam, where you can do WONDERS for content planning!
Jan 2, 2023, 11:26 PM
Perfect notion link!

https://www.figma.com/community/widget/1066408362543146472
This one right? Going to check it out! I want to get out of that complex thinking mindset.
Jan 2, 2023, 11:28 PM
This is so cool, and you can then export your ideas as A READY SCHEMA SET 😱 🧠 :mindblown:
Jan 2, 2023, 11:29 PM
No way! From a design to ready schema sets??
Jan 2, 2023, 11:30 PM
I kid you not,
user B
is just 🔥 And he was one of the people who just zoomed with me when I was stuck and beginning with Sanity, so … I carry on his traditin
Jan 2, 2023, 11:32 PM
Wow! Its too late now to look at it. But I will check this out first perfect tips and links 🌟 so nice!
Jan 2, 2023, 11:33 PM
haha true… we are in the same timezone!Uff I wanted to do some after work guide writing but … well got lost in the community
😅
Jan 2, 2023, 11:36 PM
Buena notte!
Jan 2, 2023, 11:36 PM
You too!
Jan 2, 2023, 11:37 PM
^ this thread should be pinned or turned into an article. It's all 🔥
Nov 11, 2023, 4:42 PM
Actually been working on a guide, but its so busy at the moment, and this needs a lot of extra setup work, but I am on it 😉
Dec 19, 2023, 9:59 AM

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?