How to segregate page components into several `/pages` directories on a Next.js app

Question

I recently started my first project with Next.js and since then my pages directory has grown a lot. Now I want to separate my pages and group them into modules, ending up with something like 'src/modules/*/pages/*' .

Researching the topic I came accross exportPathMap , a function that I can include in my next.config.js file and then map custom paths to my pages, but it seems like I'd need to add a new path for every page I create, which is not ideal. I want to give to Next a single expression, something like 'src/modules/*/pages/*' , and let it resolve the pages and routes for me (like you would do in a ormconfig.json file to map entities when using TypeORM).

I suppose I could group my page components directly inside pages , like pages/a-module/* , but I also have components, hooks and other logic that I'd like to segregate into modules. I could also try using Node's fs to iterate through my project file structure and map the the page folders, but I'd like to avoid that if possible.

Answer 1

You could use symlinks. You would need one for each module, but not one for each nested path within the module. Your directory structure would look like:

├── modules
│   ├── bar
│   │   └── pages
│   │       ├── first.js
│   │       └── second.js
│   └── foo
│       └── pages
│           ├── first.js
│           └── second.js
├── pages
│   ├── _app.js
│   ├── bar -> ../modules/bar/pages
│   ├── foo -> ../modules/foo/pages
│   ├── index.js

Which would end up with routes:

/bar/first
/bar/second
/foo/first
/foo/second

I'm not sure what that buys you, though, really. Now your modules folder will have the same clutter that pages used to. You don't have to have all of the component content in the files in pages . It could be as simple as:

// pages/foo/first.js
import FirstContent from '../../modules/FirstContent'

export default function First() {
  return <FirstContent />
}

Answer 2

As @Roman Mkrtchian mentioned, you're not supposed to do so. My suggestion is that, if you want to organize your files into modules like me, creating a file structure similar to this one:

src
├── modules
│    ├── foo
│    |   └── pages
|    |       ├── one
|    |       |   ├── index.jsx
|    |       |   └── styles.js <- For `styled-components`; could be a css file
|    |       └── two
|    |           ├── index.jsx
|    |           └── styles.js
|    └── bar
|        └── pages
|            └── three
|                ├── index.jsx
|                └── styles.js 
├── shared
└── ...

You should take another approach. As @erich2k8 said, you don't need all of the component content to be in the files inside /pages , you could create the same structure above, but add /pages directly to src :

src
├── modules
├── shared
└── pages
    ├── foo
    |   ├── one.jsx
    |   └── two.jsx
    └── bar
        └── three.jsx

And inside src/pages/foo/one.jsx , for instance, you'd import src/modules/foo/pages/one , like so:

import OneContent from '../../modules/foo/pages/one';

const One = () => <OneContent />;

export default One;

Yes, you'd still need to create a new file for each page you create inside /modules , but it spares you from a really bad time messing with Next behavior.

Answer 3

This is not permitted by the Next.js team on purpose for reasons explained in this post and in the posts referenced there. You may read some of the discussions before deciding if you really want to hack the files structure to do it anyway.