First you need to remove your whole system of routing. Right now (the code you shared) you route the client though react. That works fine in react, but we are in nextjs. In nextjs the routing is a bit different. Take a look at [this](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fdefining-routes.png&w=1920&q=75) (see attached). As you can see, you define your "page.ts", that are simple pages. The route is than defined where this file is added (in which folder).

So: remove react router and use the nextjs routing.
Read more about how to define routes: https://nextjs.org/docs/app/building-your-application/routing/defining-routes

Well you see I tried changing the normal react routing into this and wanted to know the file structure for my specific project.
I tried trying to shift using the page and layout but to no avail.
If possible could you make the file structure for this specific I'll understand the the rest

Let me know where you specifically have issues. You can directly follow the instructions from the docs and tell me, where you have issues, if you experience some: https://nextjs.org/docs/app/building-your-application/routing/defining-routes

Sure I'll get back to you after some experimentation

That sounds great. When will you experiment?