Next.js and React Router 7 (RR7) have fundamentally different approaches to...
Next.js and React Router 7 (RR7) have fundamentally different approaches to decomposition.
In Next.js, you create many small files per route (Page.tsx, Loading.tsx, etc). Each file has a clear purpose, and must have a certain name.
Result:
Many small files 👍, but many files in the solution will have the same name 👎.
In RR7, you create one file per route called a “module”. It exports many functions that must have specific names (loader, action, headers, links, handle, meta, etc).
Result:
One clearly named file per route that contains all that route’s concerns, decomposed into well named functions 👍, but the file may grow big 👎.
My take? I prefer RR7’s approach. I prefer unique filenames, and I can decompose the route file if it gets too big.