Next.js: Move pages/_component.js to components/Component.js

Created on 17 Mar 2017 · 3Comments · Source: vercel/next.js

pages/_document.js > components/Document.js
pages/_error.js > components/Error.js

Neither of the above are _pages_ —they are special _components_. Since everyone adopts the convention of having a components folder alongside pages, it would be a lot nicer and "more correct" IMO to move them here and document that these are _reserved_ component names that are used by Next.

I think this is both neater and will simplify your code splitting and bundling logic, since you can read _all_ JS files in pages and not have to filter out these special cases. It would also eradicate the slightly ugly underscore named file...that's just my opinion though!

Source

wagerfield

Most helpful comment

Having just read through this PR https://github.com/zeit/next.js/pull/936, this proposal could also be tackled in the next.config.js object just like pagesDirectory has been.

You could pass another couple of props like documentComponent and errorComponent:

// next.config.js
module.exports = {
  pagesDirectory: 'views',
  documentComponent: 'components/Document.js',
  errorComponent: 'components/Error.js'
}

wagerfield on 17 Mar 2017

❤2 🎉2 😄2 👍2

All 3 comments

Thanks. You got a valid point.
But in the short term, we are not going to change it.

arunoda on 17 Mar 2017

With 2.0.0 being released soon, I thought it might be a good opportunity to introduce a breaking change like this. Could you not provide support for both options and log a warning to those using pages/_document.js and pages/_error.js, advising them to move and rename their files? That way it wouldn't break anything but would allow people to migrate.

wagerfield on 17 Mar 2017

Having just read through this PR https://github.com/zeit/next.js/pull/936, this proposal could also be tackled in the next.config.js object just like pagesDirectory has been.

You could pass another couple of props like documentComponent and errorComponent:

// next.config.js
module.exports = {
  pagesDirectory: 'views',
  documentComponent: 'components/Document.js',
  errorComponent: 'components/Error.js'
}

wagerfield on 17 Mar 2017

❤2 🎉2 😄2 👍2

Was this page helpful?

0 / 5 - 0 ratings