Discussion on using code input for <BlockContent> frontend and transitioning to Next.js with Sanity

16 replies
Last updated: Aug 24, 2022
How do you add the code input for the <BlockContent> frontend?
Aug 24, 2022, 1:30 AM
There's an example in the docs that should be helpful if you haven't finished setting up the back end https://www.sanity.io/docs/configuration#8d1dbe8a8b56
But since you said the front end, the official page for the plugin has an example:

https://www.sanity.io/plugins/code-input (see the heading Example usage in frontend (React) ) where they're using this package to consume it.
Aug 24, 2022, 1:36 AM
I think I'm using v2 because I don't see how this would work for BlockContent
Aug 24, 2022, 1:51 AM
<BlockContent blocks={singlePost.body}
/>
Aug 24, 2022, 1:51 AM
I was going to ask you where that component came from because I didn't recognize it but I think this is the repo? https://github.com/sanity-io/block-content-to-react#block-content-to-react
If that's the case, under the heading there's a recommendation to use
https://github.com/portabletext/react-portabletext moving forward, if that's an option for you.
v2 is a default bit it also shouldn't be relevant to the front end (there's a strong separation of concerns with the Studio environment and your actual pages, intentionally)
Aug 24, 2022, 2:00 AM
I got it from Kapehe
Aug 24, 2022, 2:03 AM
I see. At the time it was valid; it happens to be an uncommon change in the year and a half since that video was posted.
Aug 24, 2022, 2:06 AM
Sounds like I'm going have to redo the entire site 😞
Aug 24, 2022, 2:06 AM
Not really; they work very similarly. If you uninstall the old package and install the newer one, they simply take option props in a different format but were designed to process portable text in just the same way. Their pages on GitHub can walk you through the differences, and you have the community hear to lean on if you have specific questions.
Aug 24, 2022, 2:08 AM
I'm considering redoing it from ReactJS to Nextjs
Aug 24, 2022, 2:09 AM
Next.js is really popular here and a great fit with Sanity.
There are specific aids:
https://www.sanity.io/exchange/framework=nextjs include auth helpers and am image tool: https://www.sanity.io/plugins/next-sanity-image
And an entire toolkit
https://github.com/sanity-io/next-sanity including convenience methods.
Also, because Next.js has API routes and Sanity (the service) has a webhook implementation when you make major document changes in the Studio software, you can easily take advantage of on-demand revalidation for incremental static regeneration which is now a stable feature.

There's also a
nextjs channel here for relevant topics.
Aug 24, 2022, 2:16 AM
Thank you
Aug 24, 2022, 2:37 AM
with blog comments
Aug 24, 2022, 2:53 AM
I'm going to do the create template nextjs
Aug 24, 2022, 2:52 AM
Awesome. Let me know if you run into bumps. That template was one of the first things that that piqued my interest. I couldn't believe how fast pages were loading. I used to do WordPress sites all the time and by comparison everything is a bogged down wait (and weight!)
Aug 24, 2022, 3:30 AM
Awesome. Let me know if you run into bumps. That template was one of the first things that that piqued my interest. I couldn't believe how fast pages were loading. I used to do WordPress sites all the time and by comparison everything is a bogged down wait (and weight!)
Aug 24, 2022, 3:30 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?