# New visual editing - how to use components in NextJS?

**URL:** <https://community.cloudcannon.com/t/new-visual-editing-how-to-use-components-in-nextjs/303>\
**Category:** Community Support\
**Created:** [November 10, 2025, 3:13pm UTC](https://community.cloudcannon.com/t/new-visual-editing-how-to-use-components-in-nextjs/303 "2025-11-10T15:13:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lex](https://community.cloudcannon.com/letter_avatar_proxy/v4/letter/l/c68b51/32.png) [@Lex](https://community.cloudcannon.com/u/Lex)\
**Post date:** [November 10, 2025, 3:13pm UTC](https://community.cloudcannon.com/t/new-visual-editing-how-to-use-components-in-nextjs/303/1 "2025-11-10T15:13:23Z")

</div>

Hi guys,

So I am working on porting my NextJS content\_blocks builder over from React databinding to the new editable regions. At the beginning this went like a breeze, because in almost no time I had a working array of content\_blocks where I defined editables for text and images. And this works perfectly. But my content\_blocks don’t only have text and images that are editable, but also some settings like background-color and padding. _So I figured that is where components come in right?_ But here is where I am having problems:

- Now the first problem that arose is that the @cloudcannon/editable-regions package is not transpiled and so it is unusable with the NextJs bundler. I’ve already made a Github issue and think I tackled this by incorporating a registerReactComponent in my app directly which seems to work (I can log window.cc\_components in the browser console).
- The docs are not clear on where to define the data-attributes for components (the example doesn’t show them) and doesn’t show how to handle nested front-matter paths. But I’ve tried both defining them in the component block and outside of it.

So here’s what my structure looks like:

```javascript
<div data-editable="array" data-id-key="type" data-prop="content_blocks">
<div data-editable="array-item" data-id={block.type}>
<section block={block} data-component="cta" data-editable="component" data-prop="#content_blocks.4">...some text-editables</Section>
</div>
</div>

```

I’ve tried different things for data-prop, like content\_blocks.4, content\_blocks.index.4 and more but to no avail. When I remove data-prop, Cloudcannon overwrites the props resulting in an empty div, when I add it, the content shows but you cant visual edit anymore, although the outline indicators are showing on hover. Hope anyone get put me in the right direction. Is the data-prop the issue or is the registration not working correctly.

Tx!

---

<div class="post-metadata">

**Author:** ![Tate](https://community.cloudcannon.com/user_avatar/community.cloudcannon.com/tate/32/185_2.png) [@Tate](https://community.cloudcannon.com/u/Tate)\
**Post date:** [November 11, 2025, 8:34pm UTC](https://community.cloudcannon.com/t/new-visual-editing-how-to-use-components-in-nextjs/303/2 "2025-11-11T20:34:49Z")

</div>

Hi Lex 👋

Thanks for your GitHub report (and PR!). I’ll give them a closer look and follow up with you over there!

It’s also good to hear that the editable regions have been working well for you so far, and the example you’ve posted looks very close to what you want. When you have nested editable regions, their `data-prop`s are all relative to their parents `data-prop` and in the case of array items, their `data-prop` is always their index in the array. This means that your component already has the context of `content_blocks.4` from its parents, and so all it needs is `data-prop=""`.

All together it’d look like:

```html
<div data-editable="array" data-id-key="type" data-prop="content_blocks"> 
<div data-editable="array-item" data-id={block.type}>
<section block={block} data-component="cta" data-editable="component" data-prop=""></section>
</div>
</div>

```

You could even combine the array item and component, since array items also support live rendering components, in which case you’d have:

```html
<div data-editable="array" data-id-key="type" data-component-key="type" data-prop="content_blocks"> 
<div data-editable="array-item" data-id={block.type} data-component={block.type}>
</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![Lex](https://community.cloudcannon.com/letter_avatar_proxy/v4/letter/l/c68b51/32.png) [@Lex](https://community.cloudcannon.com/u/Lex)\
**Post date:** [November 12, 2025, 6:21pm UTC](https://community.cloudcannon.com/t/new-visual-editing-how-to-use-components-in-nextjs/303/3 "2025-11-12T18:21:32Z")

</div>

Ha, I feel kinda stupid now. Thanks @Tate!