Discussion about using @sanity/block-content-to-react and Next.js for a blog, including setting up a serializer for links.
10 replies
Last updated: Oct 19, 2021
D
What is the best way to GROQ out
Bodyfor the blog, like [list, mark, bold text, etc]? Do i have to
body.map(b => b.childrenor there is easy way?
Oct 16, 2021, 6:16 PM
D
Will
npm install --save @sanity/block-content-to-reactwork with nextjs as well?
Oct 18, 2021, 6:33 PM
D
Will
npm install --save @sanity/block-content-to-reactwork with nextjs as well?
Oct 18, 2021, 6:33 PM
R
If you're using Next, I recommend using next-sanity . It's a great toolkit and has some good examples of usage in its readme.
Oct 18, 2021, 6:36 PM
D
Great! it did work with line of code
import SanityPortableText from '@sanity/block-content-to-react';though i wonder what is
usePreviewSubscription? how to do i make link as pure html like blue color.
Oct 18, 2021, 7:13 PM
R
Use Preview Subscription will be for if you set up live previews of your content inside of the sanity Studio. To make an
<a>tag, you would have to set up a serializer for the block. How do you currently have it set up in your Portable Text editor?
Oct 18, 2021, 7:30 PM
D
It look something like that:// schema.js
// blockContent.js
export default { name: 'body', type: 'array', title: 'Body', of: [ { type: 'block' } ] }
/** * This is the schema definition for the rich text fields used for * for this blog studio. When you import it in schemas.js it can be * reused in other parts of the studio with: * { * name: 'someName', * title: 'Some title', * type: 'blockContent' * } */ export default { title: 'Block Content', name: 'blockContent', type: 'array', of: [ { title: 'Block', type: 'block', // Styles let you set what your user can mark up blocks with. These // correspond with HTML tags, but you can set any title or value // you want and decide how you want to deal with it where you want to // use your content. styles: [ { title: 'Normal', value: 'normal' }, { title: 'H1', value: 'h1' }, { title: 'H2', value: 'h2' }, { title: 'H3', value: 'h3' }, { title: 'H4', value: 'h4' }, { title: 'Quote', value: 'blockquote' }, ], lists: [{ title: 'Bullet', value: 'bullet' }], // Marks let you mark up inline text in the block editor. marks: { // Decorators usually describe a single property β e.g. a typographic // preference or highlighting by editors. decorators: [ { title: 'Strong', value: 'strong' }, { title: 'Emphasis', value: 'em' }, ], // Annotations can be any object structure β e.g. a link or a footnote. annotations: [ { title: 'URL', name: 'link', type: 'object', fields: [ { title: 'URL', name: 'href', type: 'url', }, ], }, ], }, }, // You can add additional types here. Note that you can't use // primitive types such as 'string' and 'number' in the same array // as a block type. { type: 'image', options: { hotspot: true }, }, ], }
Oct 18, 2021, 7:34 PM
D
It look something like that:// schema.js
// blockContent.js
export default { name: 'body', type: 'array', title: 'Body', of: [ { type: 'block' } ] }
/** * This is the schema definition for the rich text fields used for * for this blog studio. When you import it in schemas.js it can be * reused in other parts of the studio with: * { * name: 'someName', * title: 'Some title', * type: 'blockContent' * } */ export default { title: 'Block Content', name: 'blockContent', type: 'array', of: [ { title: 'Block', type: 'block', // Styles let you set what your user can mark up blocks with. These // correspond with HTML tags, but you can set any title or value // you want and decide how you want to deal with it where you want to // use your content. styles: [ { title: 'Normal', value: 'normal' }, { title: 'H1', value: 'h1' }, { title: 'H2', value: 'h2' }, { title: 'H3', value: 'h3' }, { title: 'H4', value: 'h4' }, { title: 'Quote', value: 'blockquote' }, ], lists: [{ title: 'Bullet', value: 'bullet' }], // Marks let you mark up inline text in the block editor. marks: { // Decorators usually describe a single property β e.g. a typographic // preference or highlighting by editors. decorators: [ { title: 'Strong', value: 'strong' }, { title: 'Emphasis', value: 'em' }, ], // Annotations can be any object structure β e.g. a link or a footnote. annotations: [ { title: 'URL', name: 'link', type: 'object', fields: [ { title: 'URL', name: 'href', type: 'url', }, ], }, ], }, }, // You can add additional types here. Note that you can't use // primitive types such as 'string' and 'number' in the same array // as a block type. { type: 'image', options: { hotspot: true }, }, ], }
Oct 18, 2021, 7:34 PM
R
Got it! This guide (specifically the part about rendering the links with React ) will show you which serializer you need to set up.
Oct 18, 2021, 7:35 PM
D
Hi Racheal! i have little problem here, when i select few line that i want to be
h1as you seen in the screenshot, some other text also get effected by and bigger as
h1, i only want the selected text to be
h1any clue why? π only the bold text is working.
Oct 19, 2021, 6:28 PM
D
And he
H1text is not
h1in my frontend.
Oct 19, 2021, 6:31 PM
Sanityβ build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.