How to create nested components with children?

I am in the process of converting a NextJS site into Storyblok, and I have several nested components in my NextJS app that have children components. How can I replicate this with Storyblok?

For example, I have a simple section component which has props for background colour, heading title and a subtitle. And inside this component, I add several other types of components to display various things.

Is it possible to do this in storybook? Essentially I want to make block components that can be used in other book components.

Hello @robin0405,

it is possible to use relations like explained in this article How to build relationships: Post and Categories? #2 | Storyblok. This allows you to reuse content parts like it is done with footers and headers or even menus. You simply link stories by using a single or multi-option field and resolve the relations with the resolve_relations parameter with the component name and the name of the option field to resolve when requesting the stories from the delivery API (Storyblok API Documentation). The advantage is that you just need to update the content in one place instead of having copies of the same content which will make maintaining everything and keeping it up-to-date much harder.

You can use the option field approach also in embeddable components and create even presets (How to create a preset for a content type? (UI V2) - YouTube) for complete content types and embeddable components so they come prefilled which allows you to save some time.

Best regards
Hannes

1 Like

Hi @Hannes ,

Many thanks for your reply. I managed to create parent components and just drilled up the props. This gave me the outcome that I needed for this particular issue.

However, I have discovered a new issue with regards to displaying the author name for my blog pages. And I think that I might need to use the resolve_relations to get this to work, however, I can’t find any examples in NextJS to see exactly how it’s done.

If you can help that would be fantastic.

I have my […slug].js file with the resolve_relations like the below.

export async function getStaticProps({ params }) {
	let slug = params.slug ? params.slug.join("/") : "home";

	let sbParams = {
		version: "published", // or 'published'
		resolve_relations: "authors",
	};

	const storyblokApi = getStoryblokApi();
	let { data } = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);

	return {
		props: {
			story: data ? data.story : false,
			key: data ? data.story.id : false,
		},
		revalidate: 1,
	};
}

And then, on the BlogPost.js content_type component I have the following

<span>By { blok.author } </span>

But when I display this on the page, it just displays the blog author ID instead of the name,.

Hello @robin0405,

you need to provide the component name and the field that you want to resolve. When providing only “author” the JS client won’t insert the story objects there.

Here are some examples:
resolve_relations=page.author,page.categories
https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-multiple-stories

Best regards
Hannes