✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Trouble with page builder in switching from WordPress to Sanity.io

7 replies
Last updated: Mar 11, 2024
Hello, Folks, im a working at a small agency in Denmark looking to switch from wordpress to sanity.. and loving the shema and sanity backend… but im having a lot of trouble getting my “page builder” to work properly i have followed this guide https://www.sanity.io/guides/how-to-use-structured-content-for-page-building but my main issue is how to query the response and output the diffrent items like “heroType” and “textWithIllustration” on the given page
Feb 28, 2024, 8:56 AM
Did you see the section on querying your array to return different attributes for different object types?
https://www.sanity.io/guides/how-to-use-structured-content-for-page-building#5b592099cb3f
Or is your question more about how to render them?
Feb 28, 2024, 9:01 AM
Yes my question is how to render them 😅
Feb 28, 2024, 9:02 AM
Ah! If you’re using React, I’d do something like this…

https://gist.github.com/SimeonGriggs/ee5b1d606f176d6e9305963ad548c99e
Feb 28, 2024, 9:10 AM
amazing 😄 thanks!
Feb 28, 2024, 10:23 AM
Do you have a repo containing that PageBuilder Simeon?
Feb 28, 2024, 1:24 PM
Only the repo linked to in the guide, which is just for the Studio, not a front end.
Feb 28, 2024, 1:24 PM
You're going to do something like the following rudimentary example:1. We fetch our data from the sanity client (don't forget to import it). In this case, a specific entry for our home page.
2. We project "components" as a variable to be used representing the pageBuilder object returned from Sanity
3. We loop through them matching component type to a component in our app
Note: Each of these components would need schemas setup in Sanity as well for use in said Page Builder

// /app/page.tsx
// Import necessary modules and types
import { sanityClient } from '@/app/sanity/client';
import dynamic from 'next/dynamic';
import React from 'react';

type Page = {
  _id: string
  title?: string
  queryParams?: { slug: string }
  slug?: {
    current: string
  }
}

// Dynamically import your components
const Hero = dynamic(() => import('@/app/ui/components/Hero'));
const CallToAction = dynamic(() => import('@/app/ui/components/CallToAction'));

// Define your component mapping
const sanityComponents = {
    hero: Hero,
    callToAction: CallToAction
    // Add other components as needed
};
export default async function Page({ params }: { params: { slug: string } }) {
  const pages = await sanityClient.fetch<Page[]>(`*[_type == "page" && slug.current == 'home']{"url": slug.current, "components": pageBuilder[]}`)
  return (
    <>  
        {pages.map((page, pageIndex) => (
            <div key={pageIndex}>
                {page.components.map((builder, builderIndex) => {
                    const SanityComponent = sanityComponents[builder._type];
                    if (!SanityComponent) {
                        console.log('missing component');
                        return null; // Handle missing component
                    }
                    return <SanityComponent {...builder} key={builder._key || builderIndex} />;
                })}
            </div>
        ))}
    </>
  );
}
Mar 11, 2024, 8:37 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?