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

How do you add the code input for the <BlockContent> frontend?

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.

I think I'm using v2 because I don't see how this would work for BlockContent

<BlockContent blocks={singlePost.body}
/>

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)

I got it from Kapehe

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.

Sounds like I'm going have to redo the entire site 😞

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.

I'm considering redoing it from ReactJS to Nextjs

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.

Thank you

with blog comments

I'm going to do the create template nextjs

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!)

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!)