Create Custom Components in Storyblok and Next.js

In this short tutorial, we will see how to start making our own components and extend the existing ones with Next.js and Storyblok. We will add a new Hero component with two Layout options in Storyblok, along with the code in our frontend. We will also extend our existing Feature component by including images and better styling.

Requirements

This is a part of the Ultimate Tutorial Guide for Next.js. You can find the previous part of the series here, which shows how to render Storyblok stories dynamically in Next.js. We recommend you to take a look at that tutorial before starting this one.

You can also take a look at the optional tutorial of the series - Create Dynamic Menus in Storyblok and Next.js.

Changing the Feature Component

To view all the components, click on the Block Library tab {1} on the left-hand side as seen in the image.

Now, let’s edit the Feature’s schema, and add image as a new field {1}.

This image field should be of type asset. To change the field type and view other options related to the field, click on the field image.

Change the field type to Asset {1} and select Images in the Filetypes {2}.

We will have to change the code in our Next.js app with the updated fields and styles.

Replace the code of Feature.js to the following:

Let’s go ahead and add images to the features of a grid on the about page. To do that, we need to click on the Grid and then click on one of the features inside it. We will see that we have a field named image already present there. We can now add an image to a feature. Let’s add images for other features as well. It should look something like this -

Creating a component

Now, let’s create a new Hero component. To do that, we will need to return to the Block Library {1} and click on +New Block at the top right corner {2}.

Once we click on +New Block, we can enter the details about our new component. Let’s give it a name hero {1}, and select the block type Nested {2}, which is there by default. This will be a Nested component because we will be using it inside other components.

You can hit Add Block {3} after that.

We can start adding the fields. We need to create four fields, three of which are-

1. headline of type text.

2. subheadline of type text.

3. background_image of type asset and then select image as we did for feature’s image.

The 4th one will be a layout field, which will allow us to change the layout of the hero block. It should be of type Single Option {1}.

Now, let’s add two options as key-value pairs {1} for the two types of layout, with a default value {2}.

Let’s hit save and add this component to our home story. Also, we should add content to the component’s fields. Feel free to use any text and image.

As we added a new component, we will also need to add the component to the frontend code of our project. Create a Hero.js file inside the components folder, and add the following code to it.

Note that we are changing the styles of the Hero section depending on the selected layout. This is being done conditionally on line 13.

The only thing left to do is to add this component to our list of dynamic components in _app.js.

        
      ...

import Hero from '../components/Hero'
const components = {
  feature: Feature,
  grid: Grid,
  teaser: Teaser,
  page: Page,
  hero: Hero
};

...
    

Save and go back to our Home story in Storyblok. We will see something like this -

We also have an option to change the layout here. We can choose the other one from the dropdown and we will see the changes.

Wrapping Up

In this tutorial, we saw how to extend and create new components from scratch with different types of fields, along with the integration of those components into the frontend of our application. Congratulations!