Next JS - nested routing & state sharing & dynamic import

[mohammadhader94]

Dears,

I am creating a project where I am required to use the following setup:

1. Next JS application - Shell - Dashboard (will be like a container for other applications)
2. Next JS application - App1 -Task manager (fully fledged application with nested routes)
3. Next JS application - App2 -Data visualizer (fully fledged application with nested routes)

In the Shell application, I will receive some configurations and based on it I will dynamically import the other apps.
In each microfrontend, I want to maintain the internal routing structure.
Also I want to share some states (e.g user profile ..etc).

All the tutorials explains these things in React JS. How can I achieve such functionality (nested routing & state sharing & dynamic) import in Next JS specifically?