Ignored folders as page on /pages folder

[Alecell]

Feature request

Is your feature request related to a problem? Please describe.

It isn't related to a problem. But if what I'm asking already exists its a good idea to let it more clear on the docs.

Describe the solution you'd like

It will be awesome if we can add a config on next.config that allow us to add a ignored name folder to /pages that will not crawl that folder as an app page.
The purpose of it is a way to create a components folder wich has the components that belong to a unique page and (probably) wont be reused again. That kind of practice let clear that this components belong only to that page and will be easier to add things like useMemo, React.memo and useCallback without pollute the root /components folder with never reused components.

Something like:

Folder:

/pages
....  /customers
........  /components
........  index.js

Config:

module.exports = {
    notPage: ['components']
};

Describe alternatives you've considered

It is possible to create a /pages components inside root /components folder and there add that kind of component.

[timneutkens]

This has been discussed many times before in the issue tracker. Most recently the issue below.

Duplicate of #8454

[yuri-scarbaci-lenio]

I think this should be considered deeply.

I do understand the concerns and one of the biggest advantages of next.js is the convention over configuration...

The thing I don't understand is why not make the convention to use this pattern, while this seems like a minor issue, it's something that it's really important especially when implementing a full RESTful api based on the routing...

in the project I'm working on we are actually implementing the separation of concerns in a mirrored folder solution, but to actually being able to do that our scaffolding is getting pretty tedious to navigate, pretty fast...

This is how we are actually implementing the separation of concerns while respecting the current routing convention

import { NextApiResponse, NextApiRequest } from 'next';
import { default as get{CapitalCaseEndpoint} } from '../../../../rest-api/auth/{endpoint}/get';

export default async (req: NextApiRequest, res: NextApiResponse): Promise<NextApiResponse> => {
    switch (req.method) {
        case 'GET':
            return await get{CapitalCaseEndpoint}(req, res);
        default:
            res.status(405)
            res.end() //Method Not Allowed
            return res;
    }
}

to make this feasible at all we had to develop a dedicated hygen generator for RESTful endpoints...

I don't see how this convention could be the preferred way to do the routing over actually making the user explicitly expose files by using the .pages.[ext] pattern

If anything I think the thing that is more error prone is exposing everything under pages... ( coming from someone that started with Create React App and implemented the custom routing with the SPA approach and ReactRouter ).

Also the .pages.[ext] pattern would be really easy to detect while developing, if you create a file you want to expose but you forget the extra extension you get a 404 VS having to actually think that a file you don't expect to be exposed is actually exposed (which requires the active effort to visit an endpoint you don't necessarily think exist)

It was quite a shock to me that ANYTHING under the /pages folder, and especially /pages/api folder would be converted into and endpoint/page...

I would rather give a "double confirmation" by having to not only use the /pages folder but use the .pages.[ext] extension than having the router make the BIG assumption every single file under the folder should be treated as a page and exposed...

[pcmaffey]

You can get around this easily by just using the /pages folder as an index of files that point to a separate /pages-lib folder, structured however you want. eg. each file is just a single line export { default } from 'page-lib/Index'

[sidinei-silva]

Você pode contornar isso facilmente apenas usando a /pagespasta como um índice de arquivos que aponta para uma /pages-libpasta separada , estruturada como você quiser. por exemplo. cada arquivo é apenas uma única linhaexport { default } from 'page-lib/Index'

Despite solving, this will prevent using Data fetching methods on server side:
getStaticProps, getStaticPaths, getServerSideProps

[melnyczuk]

Você pode contornar isso facilmente apenas usando a /pagespasta como um índice de arquivos que aponta para uma /pages-libpasta separada , estruturada como você quiser. por exemplo. cada arquivo é apenas uma única linhaexport { default } from 'page-lib/Index'

Despite solving, this will prevent using Data fetching methods on server side:
getStaticProps, getStaticPaths, getServerSideProps

This is easily solved by adding the required function to the same line:
export { default, getStaticProps } from 'page-lib/Index'

[Cauen]

For people that's searching for a way to ignore files inside /pages folder
#3728 (comment)
https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions

[mycolaos]

I can use files, but as I understand correctly, the directories are still crawled for pages.

I have this error:
error: Using export * from '...'in a page is disallowed. Please useexport { default } from '...' instead.

Isn't it possible to discard as path a whole directory at once with some prefix?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.