How to approach this routing in NextJS pages using React.lazy

In my React project, I have 3 template in my one project, at a time its rendered one template by the help of React.lazy(). the routes defined the template file, when loaded template1 it’s catches only template1 routes similarly template2, template3. working fine, but I want to implement it my NextJs project but I can't because of Nextjs file base routing system. I can't put route path and component as my wish for different template.

React example code:

App.js:

const Template1 = React.lazy(() => import("./template1/assets/Template1"));
const Template2 = React.lazy(() => import("./template2/assets/Template2"));
const Template3 = React.lazy(() => import("./template3/assets/Template3"));

const mapTemplatePath = {
  theme1: <Template1 />,
  theme2: <Template2 />,
  theme3: <Template3 />,
};

const getTemplate = (theme_name) => {
  return mapTemplatePath[theme_name] ? (
    mapTemplatePath[theme_name]
  ) : (
    <p>Loading....</p>
  );
};

function App() {
  return (
    <>
      <Suspense fallback={<Spinner animation="border" />}>
        {getTemplate('theme1')}
      </Suspense>
    </>
  );
}

Template1:

const Template1 = () => {
  return (
    <div className="tmp1">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home1 />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
};

Templat2:

const Template2 = () => {
  return (
    <div className="tmp1">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home1 />} />
          <Route path="/about" element={<About2 />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/blog" element={<Blog />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
};

Template3:

const Template3 = () => {
  return (
    <div className="tmp1">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home1 />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
};

How can I achieve this template wise routing in Nextjs project.