9

There are SSR-related problems with several pages in Next.js project that results in errors on npm run build and prevent the project from being built:

pages/
  foo/
    bar/
      [id].jsx
      index.jsx
    index.jsx
  ...

For example, bar:

export function getStaticProps() {
  return someApiCallThatCurrentlyFails()
  ...
}

export default function Bar() {...}

As a quick fix, it may be convenient to just not build bar/*.* pages and make routes unavailable.

Can pages be ignored on Next.js build without physically changing or removing page component files in the project?

Estus Flask
  • 206,104
  • 70
  • 425
  • 565

3 Answers3

18

You can configure the pageExtensions in the next.config.js.

// next.config.js
module.exports = {
  pageExtensions: ["page.js"],
}

After configuring this, the only pages with *.page.js will be considered in the below given directory structure.

pages/
├── user
│   └── setting
│       ├── index.js
├── _app.page.js
├── _document.page.js
├── list.page.js
└── theme.ts

Custom file ignores patterns that are not supported yet. You can visit the PR created here, and the solution given here. This is the most satisfactory solution so far.

Kiran Maniya
  • 8,453
  • 9
  • 58
  • 81
  • 2
    Thanks, this looks like a proper solution indeed. I guess I'll move pageExtensions value to environment variables to use it on-site. – Estus Flask Apr 03 '21 at 13:51
  • 1
    @EstusFlask There are so many requests about this feature on the official repo. maybe next js will provide some permanent solution in upcoming releases. – Kiran Maniya Apr 03 '21 at 15:28
  • Trying to figure out if `pages/_middleware.js` needs to be renamed to `pages/_middleware.pages.js` in my application. Anyone know? – Mathilda Mar 15 '22 at 18:06
0

@Mathilda Here from Nextjs docs: it's necessary for all pages including _app, _document, etc. https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions enter image description here

Changing these values affects all Next.js pages, including the following:

- middleware.js
- pages/_document.js
- pages/_app.js
- pages/api/
For example, if you reconfigure .ts page extensions to .page.ts, you would need to rename pages like _app.page.ts.
Luciano Cavallo
  • 71
  • 2
  • 5
  • 1
    Not answers the question but I appreciate the follow-up. Please, add the content as formatted text instead of an image, https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors – Estus Flask Jan 10 '23 at 14:59
0

There is another solution if you already have a very old project or if you didn't consider that such a thing might be needed during the implementation of the basic set of pages.

You can create custom pages in a separate folder and, under certain env conditions, redirect them to mock data using webpack.NormalModuleReplacementPlugin. This mock data can return { notFound: true }.

StasNemy
  • 142
  • 2
  • 4