Integrating NextJS with Sanity CMS and identifying components with unique names
11 replies
Last updated: Jan 9, 2023
J
đź‘‹ Hello, team!
I am new to Sanity and have a challenge I am trying to solve; I wonder if anyone can guide me through it.
We have a NextJS project that we want to integrate with a CMS (Sanity).
The motivation is to give the end-user the ability to create pages through the CMS without needing someone to touch the codebase. The idea is to create different schema types for each component we use on our app and create another schema called “Page”, and use a field to reference all those blocks that can be used inside a page.
Right now, I have created a few components and added some content for the sake of the experiment. I could grab all the information I needed from the homepage and see the content of each block, but there is no easy way for me to identify which component refers to each item.
Here is a screenshot that might be helpful.
Ideally, I would love to have a
We did a similar thing in the past with another CMS, and we don’t know if it is possible with Sanity or if anyone had a similar challenge in the past, and would like to share their experience.
Thanks in advance!
I am new to Sanity and have a challenge I am trying to solve; I wonder if anyone can guide me through it.
We have a NextJS project that we want to integrate with a CMS (Sanity).
The motivation is to give the end-user the ability to create pages through the CMS without needing someone to touch the codebase. The idea is to create different schema types for each component we use on our app and create another schema called “Page”, and use a field to reference all those blocks that can be used inside a page.
Right now, I have created a few components and added some content for the sake of the experiment. I could grab all the information I needed from the homepage and see the content of each block, but there is no easy way for me to identify which component refers to each item.
Here is a screenshot that might be helpful.
Ideally, I would love to have a
_name:along with other fields, so I can dictate which component to render each time.
We did a similar thing in the past with another CMS, and we don’t know if it is possible with Sanity or if anyone had a similar challenge in the past, and would like to share their experience.
Thanks in advance!
Jan 9, 2023, 8:15 PM
R
You could add a hidden field with a default value that populates when you create the block?
Jan 9, 2023, 8:17 PM
M
have a look at this 🙂 https://www.youtube.com/watch?v=_Vc08kO7qmQ
Jan 9, 2023, 8:19 PM
J
Thanks for the prompt reply folks!
I will take a look a your suggestions and I will revert back with my findings, in case someone else is facing a similar challenge.
I will take a look a your suggestions and I will revert back with my findings, in case someone else is facing a similar challenge.
Jan 9, 2023, 8:22 PM
J
Alright, I made it work based on your helpful feedback! For anyone interested, here are the steps I followed:
• Fetch all types
• Fetch all types that are equal to
• Grab homepage block ids
• Filter all types and grab only the ones that match the block ids from homepage
Here is a more visual representation of what I did:
• Fetch all types
• Fetch all types that are equal to
page• Filter all pages and only return the homepage
• Grab homepage block ids
• Filter all types and grab only the ones that match the block ids from homepage
Here is a more visual representation of what I did:
const allTypes = await client.fetch(`*[]`); const allPages = await client.fetch(`*[_type == "page"]`); const homepage = allPages.find((page) => page.slug.current === "/"); const blockIds = homepage.Blocks.map((block) => block._ref); const modules = allTypes.filter((item) => blockIds.includes(item._id));
Jan 9, 2023, 8:49 PM
R
You could defs make that one GROQ query.
Jan 9, 2023, 8:50 PM
J
I am pretty new to Sanity and haven’t used GROQ query yet. Actually it is the first time that I use it, but I will definitely look into GROQ query
Jan 9, 2023, 8:51 PM
R
*[_type == "page" && slug.current == "/"]{Blocks}Jan 9, 2023, 8:52 PM
R
Would recommend giving this a read: https://www.sanity.io/docs/query-cheat-sheet
Jan 9, 2023, 8:53 PM
J
Thanks so much. I really appreciate you taking the time to help! 🙏
Sanity looks really promising, and I am very excited already.
Sanity looks really promising, and I am very excited already.
Jan 9, 2023, 8:54 PM
R
Sanity is pretty great. GROQ is super powerful, but personally I just use GraphQL with Sanity for the mature tooling.
Jan 9, 2023, 8:55 PM
J
I am familiar with GraphQL and used it on a few Gatsby projects in the past. Will definitely spend some time with both in the next days đź“š
Jan 9, 2023, 8:56 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.