Create pages on the fly with Dynamic Zone - Strapi

1

Before I start, I have to make sure you are the right person to read what will follow.

This article will explain in details how you can create pages on the fly with Strapi using Dynamic Zones for a Next.js website. It is therefore intended for developers as it will be quite technical.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-create-pages-on-the-fly-with-dynamic-zone
2

Excellent tutorial thank you, I’ve built something similar but I like the getBlockComponent component. It’s very handy.
I’ll refactor my code to use something similar.

You can also improve components loading using nextjs’s dynamic import feature
This way you dont overload your front website with unused components.

3
4

Hey @commentsBot! Nice article :slight_smile:

Could you give me some help? I’m not able to create nested components like you did in the pricing page:

  • Create a perks component part of a pricing category
    • name (short text)
    • included (boolean)
  • Create a pricingCards component part of a pricing category
    • title (short text)
    • description (long text)
    • price (number int)
    • perks repeatable component
  • Then you can click on Add a component in your Dynamic Zone and create your pricing component by adding the header and the pricingCards (repeatable) components.

Strapi doesn’t even show me the pricingCards when creating the pricing component that belongs to blocks category :frowning:

I’m using Strapi v4. Maybe that’s the issue?

5

+1 i see the same, with the latest version

1 Like
6

I’m using relationships to achieve that, but I’m not feeling comfortable at all with that… It seems kind of messy

7

Seems that version 4 doesn’t allow nested components as shown for buttons → links. Strapi team? is this a bug or is it the standard now? and who would an upgrade from version 3 to 4 be handled in this situation?

I was able to achieve the above under version 3.

1 Like
8

This needs to be updated for v4.

1 Like
9

Nice and easy tutorial, but how does it scale if we add a LOT a block, something like 100 components to import ?
Shouldn’t it bloat the mapper to a big chunk of unused code ?

10

Hi, could i ask for a repository with the project, because i am interested in combining dynamic pages with a blog? :slight_smile:

11

Thanks for the awesome tutorial. Can you please update it for latest version? I am having issues and do not know if they are related to the update.
Data returned from the api is not showing any blocks array. What gives?

12

This tutorial is totally outdated. The REST api changed.

1 Like
13

Thank you for letting us know, we are in the process of looking for an author to update this. If we don’t find someone, I will add it to my cue of things to do and update. @Paul_Brats tagging myself here as a reminder.

14

Hi @Paul_Brats did you ever end up looping back to this?

15

This tutorial needs updating, or at least adding a caveat to say that it is out of date
If you want to know why, I have posted this question on the Strapi Discord

Basically, Strapi v4 no longer allows you to add more than 2 nested levels of components (you can’t bypass this by editing the schemas directly, which was possible before)

My solution was to just duplicate the attributes for the “Link” component instead of attaching the “Link” component. More detail in Discord post

1 Like
16

We are in the process of having this article updated. We are also will be having this event Strapi Community that will cover an example of how to create a landing page using dynamic zones and components.

@Fairground and yes, it is correct, for performance issues we only allow you to go two levels deep with components. A recommended approach is to combine components with relations.

In the example below, instead of nesting a repeatable component I am using a relation.

2023-08-29_08-57-04
2023-08-29_08-57-041640Ă—1244 111 KB

1 Like
17

Appreciate the response and workaround! Great stuff, thanks @PaulBratslavsky

1 Like