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 work with nextjs as well?
npm install --save @sanity/block-content-to-react
Oct 18, 2021, 6:33 PM
D
Will work with nextjs as well?
npm install --save @sanity/block-content-to-react
Oct 18, 2021, 6:33 PM
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 though i wonder what is
import SanityPortableText from '@sanity/block-content-to-react';
usePreviewSubscription? how to do i make link as pure html like blue color.
Oct 18, 2021, 7:13 PM
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
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
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.