There are directories in "pages" whose contents should all have the same layout. For example, an "articles" directory might have articles written in .mdx, which compile to react elements. It would be very useful for all the .mdx files under "articles" to have the same layout and shared logic.
Ideally, one could create an _app.js file for each directory. All files in that directory would use that _app.js. Files in other directories with no custom app would use pages/_app.js if that file exists.
All the alternatives I've thought of seem to have the same problem, that the routing information needs to be written in code somewhere, in addition to next inferring that from the filesystem, which is redundant. For example, you could just have a single pages/_app.js and some logic in there to figure out which layouts to add to what. This makes it required to write out your routes in the _app.js file. It's basically a router inside a router, so it's not the best solution.
Another alternative is to keep the .mdx files (or react components) somewhere outside of "pages", and import them in pages/articles.jsx for example. Then, essentially implement a router that shows the proper component depending on the route. Again, you're basically implementing a router within a router.
I'm new to next, so if there's something obvious I'm missing, I apologize.
Actually it might be better if _app.js is "nestable", so for example the component that pages/articles/_app.js exports would be passed into pages/_app.js as Component.
The is also somewhat related to https://github.com/zeit/next.js/issues/8193
Remix has some solutions around nested layout routes, so maybe it can give a boost to have this feature in NextJS!
Would also be super useful to retain context and other states across pages in the same folder! (thanks for pointing the duplicate @rafaelalmeidatk )
Closing as duplicate of #8193
Most helpful comment
Actually it might be better if _app.js is "nestable", so for example the component that pages/articles/_app.js exports would be passed into pages/_app.js as
Component.