We have a library of vanilla React “page components” which are designed to be mounted as routes in an app. To date, all our apps have been vanilla React as well, using react-router’s component-based routing. Each component in our library owns and renders many of its own sub-routes (think of them as “mini apps” with internal routing using react-router hooks etc.).

Now, we need to use these components in a Next.js application while maintaing the same overall UX and navigation journeys. Our solution is to render each such top-level component in its own dynamic catch-all route file wrapped in its own react-router <Router> parent. The assumption is that Next.js’s router will mount the top-level component at the corresponding path and render it for all descending/subsequent sub-paths, while allowing the nested <Router> component from react-router to handle subpath-based rendering logic for those sub-paths, uninterrupted.

I wanted to get some insight to understand whether this solution is in direct conflict with Next.js’s router (doesn’t seem like this use case is necessarily documented), or if it may become so through any known breaking changes in the future.