We know in Next.js, We express application structure in the file system. When a file is added to the pages directory it's automatically available as a route. For example:
pages/about.js → /about
pages/blog.js → /blog
pages/index.js → /
But I want to manually select the component file to render for each path. For example in the following code I want to render Service Component if my path URL is localhost:3000/about, I don't want to make my filename according to the routing pathname.
<Switch>
<Route path="/about">
<Service />
</Route>
<Route path="/users">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
How can i solve this issue without using React Router/Reach-Router.Is there any other options available without installing any 3rd party library?
Thanks in Advance :)