Rendering external HTML/React components dynamically in React
Interesting problem!
You should try react-jsx-parser. I think it solves your problems. Not sure how it works with Next JS - I have no experience with Next JS.
Check out this sandbox: 
You are right about all the components getting bundled. There is a workaround for that. :)
Check out this sandbox:
I've created a dynamicComponent that expects an import promise and returns a component.
I changed the way A, B and C components are imported in index.js. This way each dynamically imported component gets a separate bundle and is only requested when needed.
This should solve your second problem.