🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

How to render block types in Next.js using next-sanity

22 replies
Last updated: Dec 14, 2021
Hi! I’m trying to understand how to render block types. I have a
description
field inside a schema that’s a block type. However I’m unsure how to target the actual
text
property that comes back, so it’s just displaying the number of “arrays” inside the block. what am I doing wrong?
Nov 29, 2021, 8:35 PM
the
0 1
in light gray is supposed to be the text i have in sanity studio
Nov 29, 2021, 8:36 PM
Hey User! You'll need to use something to serialize your portable text blocks here. What are you using for your frontend?
Nov 29, 2021, 9:38 PM
next js!
Nov 29, 2021, 9:42 PM
Got it! Do you have next-sanity installed?
Nov 29, 2021, 9:53 PM
Got it! Do you have next-sanity installed?
Nov 29, 2021, 9:53 PM
user M
yes I do have it installed!
Nov 30, 2021, 1:47 PM
Perfect! You'll need to pass your block content into a Portable Text component. If you check out the usage here , in the
lib/sanity.js
file, there's an import of
createPortableTextComponent
. It'll get configured something like the following:
import {
  createImageUrlBuilder,
  createPortableTextComponent,
} from 'next-sanity'

const config = {
  /**
   * Find your project ID and dataset in `sanity.json` in your studio project.
   * These are considered "public", but you can use environment variables
   * if you want differ between local dev and production.
   *
   * <https://nextjs.org/docs/basic-features/environment-variables>
   **/
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  apiVersion: '2021-10-21', // Learn more: <https://www.sanity.io/docs/api-versioning>
  /**
   * Set useCdn to `false` if your application require the freshest possible
   * data always (potentially slightly slower and a bit more expensive).
   * Authenticated request (like preview) will always bypass the CDN
   **/
  useCdn: process.env.NODE_ENV === 'production',
}

/**
 * Set up a helper function for generating Image URLs with only the asset reference data in your documents.
 * Read more: <https://www.sanity.io/docs/image-url>
 **/
export const urlFor = (source) => createImageUrlBuilder(config).image(source)

// Set up Portable Text serialization
export const PortableText = createPortableTextComponent({
  ...config,
  // Serializers passed to @sanity/block-content-to-react
  // (<https://github.com/sanity-io/block-content-to-react>)
  serializers: {},
})
Nov 30, 2021, 5:43 PM
You'll see an example of passing data to that
<PortableText>
component here .
Nov 30, 2021, 5:44 PM
this is wonderful thank you so much
user M
!
Nov 30, 2021, 8:46 PM
user M
I meant to circle back on this. It doesn’t seem like the rich text styles are being applied? Is there an extra step I need to take?
Dec 14, 2021, 8:15 PM
Styles like colors, pacing, or font won't be carried over from the Portable Text Editor in your Studio. You would need to use CSS to style it on your frontend. 🙂
Dec 14, 2021, 8:31 PM
oh so if I have something like this in the Portable Text editor it won’t be carried over?
Dec 14, 2021, 8:34 PM
Things like bold or headings will be carried over, since those have semantic meaning. If they're not showing up, it's likely that you have a CSS reset that's removing their styling.
Dec 14, 2021, 8:36 PM
ooohhh yeah I definitely do hahah
Dec 14, 2021, 8:36 PM
i have a css-reset file 😆
Dec 14, 2021, 8:36 PM
dang it
Dec 14, 2021, 8:36 PM
Lol, yeah that got me the first time, too!
Dec 14, 2021, 8:37 PM
so this is a dumb question but how would I apply styles to the portable text 🥲
Dec 14, 2021, 8:38 PM
so this is a dumb question but how would I apply styles to the portable text 🥲
Dec 14, 2021, 8:38 PM
ex: how do I tell the Portable Text to add
margin-bottom: 1rem
so that each paragraph has space
Dec 14, 2021, 8:41 PM
(my plan B is to just get rid of the css-reset file)
Dec 14, 2021, 8:42 PM
So, you can:a. override
the default serializers to return an entirely custom elementb. wrap the
<BlockContent />
in a wrapper div that you can then target, like so:
In your App:

<div className='wrapper'>
  <BlockContent ... />
</div>

---

In your CSS:

wrapper h2 {
 //your style
}
c. directly apply style to all of a given element in your app like so:

h2 {
  //your style
}
Dec 14, 2021, 8:53 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?