Visually creating production react components (works on Next.js... can we make it work with Volto?)

There is now a very promising workflow that makes it possible to create production-ready React components visually and integrate it with your react projects. The proof of concept works well with Next.js. Here's a 12 minute demo of the approach with Next.js Loom | Free Screen & Video Recording Software | Loom

Need help to make it work with Volto (maybe a mini sprint)

I'd like to get this working on Volto. I've been able to bring the components over to Volto but I think I'm missing some steps as I'm getting console errors.
I think my tinkering may be more effective with the eye of an experienced React/Volto dev.

I'm willing to commit a day or two on a remote mini-sprint with interested Volto devs to make this work with Volto. I think the eye of an experienced Volto/React-dev could really accelerate getting this working.

1 Like

Bear with me: I have little knowledge of 'this'.

But, I have made a site together with the local university, in which they used next.js with markdown and react components.

I did (only) the components and the design / layout, but I noticed they had to redo a lot of the settings in the (text) files. Maybe it would / could be useful to generate static files from Plone and then 'serve them' with next?

PS: A typical page looked like this:

---
title: Book production
description: ‘something’
tags:
image: 
alt: 
---

import Blockquote from 'components/blockquote';
import Work from 'components/work';
import Spacer from 'components/spacer';

# Book production

<Container stil="initial side">
    The production of manuscripts in the Middle Ages involved several steps, executed by various craftsmen. 
    More markdown text here    
    Since  
</Container>

PS: The site is not live yet, but if you ping me directly I can give you an URL

UPDATE: googling, I found this (will try to find out more): volto/apps/nextjs at main · plone/volto · GitHub