Change the APIs folder
Answered
Gamedroit posted this in #help-forum
I just want to make sure I'm not reinventing the wheel: Is there another way to move the routes folder out of pages? I think it's very poorly organized to have a project that simply puts all the logic in a folder designated for "pages" (i.e. view, not backend). If there is no other way, I think the way is to do this workaround to better organize my project.
Answered by Asian black bear
Regarding your original post though, don't fight the framework and if you decide to stick to the pages router just accept that the folder is named that way. Bikeshedding really has no value when you could be productive otherwise. The whole point of frameworks are conventions over configuration.
16 Replies
Asian black bear
Next uses file-based routing so you have to use the
pages or app directory (depending on the router you pick) for routable paths.As such you can't set it up to support API routes at
src/server/routes for example.What you can do is define their logic in that folder and call those functions from the route files in the pages directory but that is a pretty pointless indirection for no value causing cognitive overhead making it more difficult to understand how things tie into each other.
Got it, but src/pages/api also causes cognitive overhead, when you read pages you think about files that are directly related to the frontend, not the backend. It makes no sense to put everything together in a single folder related to the frontend, it ends up being very disorganized since there must be an index.tsx in the pages folder.
I know it goes against Next's philosophy but I would appreciate leaving it up to the devs to decide how they want to organize their project, I've seen several people on reddit complaining about this. For large projects full of files it becomes very extensive and messy.
Now what i have is:
- src/pages/
- components/
- route1/
- route2/
- assets/
- api/
This is already becoming pretty messy. Mixing routes, assets, components and backend all in one folder.
- src/pages/
- components/
- route1/
- route2/
- assets/
- api/
This is already becoming pretty messy. Mixing routes, assets, components and backend all in one folder.
Asian black bear
Components or assets shouldn't be part of the pages folder.
Otherwise you risk having them routeable.
Sure, but neither api
I'll move them to src/
Asian black bear
In any case, Next is opinionated and in the very beginning was designed differently so the pages folder is a relic of that time. If you use the app router you have it as the
app directory which may be less confusing.Then i would need to use src/app/pages no?
Asian black bear
No, the app router does not require a dedicated pages directory. Everything within the
src/app/ directory is routeable if it follows certain naming conventions.Got it, I should try that then to see if it gets a little better. But about
api It should still be in the app folder, right?Asian black bear
Within the app router you don't even need the api prefix at all, albeit it's quite useful to disambiguate multiple paths that have potential to collide.
Asian black bear
Regarding your original post though, don't fight the framework and if you decide to stick to the pages router just accept that the folder is named that way. Bikeshedding really has no value when you could be productive otherwise. The whole point of frameworks are conventions over configuration.
Answer