Feature: Custom "pages" directory w/ Example + Docs #11864

wilbert-abreu · 2020-04-13T22:49:27Z

Purpose

If you would like to further customize your pages directory path outside of pages and src/pages, you can also set a custom pages directory via your next.config.js file.

Example - `next.config.js`

const path = require('path')

module.exports = {
  pagesDir: path.join(__dirname, 'src/universal/page-components'),
}

…via config

ijjk · 2020-04-13T22:55:23Z

Stats from current PR

Default Server Mode

General Overall increase ⚠️

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
buildDuration	9.2s	9.6s	⚠️ +399ms
nodeModulesSize	55.5 MB	55.5 MB	⚠️ +139 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..a4ac.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
index.html gzip	927 B	927 B	✓
link.html gzip	935 B	935 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General Overall increase ⚠️

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
buildDuration	10.6s	10.6s	⚠️ +74ms
nodeModulesSize	55.5 MB	55.5 MB	⚠️ +139 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..a4ac.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_error.js	557 kB	557 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	557 kB	557 kB	✓
link.js	593 kB	593 kB	✓
routerDirect.js	586 kB	586 kB	✓
withRouter.js	586 kB	586 kB	✓
Overall change	2.89 MB	2.89 MB	✓

ijjk · 2020-04-13T22:56:44Z

Stats from current PR

Default Server Mode

General Overall increase ⚠️

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
buildDuration	11.1s	11s	-69ms
nodeModulesSize	55.5 MB	55.5 MB	⚠️ +139 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..a4ac.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
index.html gzip	927 B	927 B	✓
link.html gzip	935 B	935 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General Overall increase ⚠️

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
buildDuration	12s	12.1s	⚠️ +89ms
nodeModulesSize	55.5 MB	55.5 MB	⚠️ +139 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..a4ac.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_error.js	557 kB	557 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	557 kB	557 kB	✓
link.js	593 kB	593 kB	✓
routerDirect.js	586 kB	586 kB	✓
withRouter.js	586 kB	586 kB	✓
Overall change	2.89 MB	2.89 MB	✓

ijjk · 2020-04-13T23:26:13Z

Stats from current PR

Default Server Mode

General Overall increase ⚠️

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
buildDuration	11.1s	11.3s	⚠️ +249ms
nodeModulesSize	55.5 MB	55.5 MB	⚠️ +139 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..a4ac.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
index.html gzip	927 B	927 B	✓
link.html gzip	935 B	935 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General Overall increase ⚠️

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
buildDuration	12.3s	12.4s	⚠️ +86ms
nodeModulesSize	55.5 MB	55.5 MB	⚠️ +139 B

Client Bundles (main, webpack, commons)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.js gzip	6.25 kB	6.25 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..a4ac.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.3 kB	56.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.78 kB	6.78 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.5 kB	51.5 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	zeit/next.js canary	wilbert-abreu/next.js feature/custom-page-directory	Change
_error.js	557 kB	557 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	557 kB	557 kB	✓
link.js	593 kB	593 kB	✓
routerDirect.js	586 kB	586 kB	✓
withRouter.js	586 kB	586 kB	✓
Overall change	2.89 MB	2.89 MB	✓

timneutkens · 2020-04-14T08:08:18Z

Hi! Thanks for this PR. However, as has been discussed many times in the issue tracker we're not planning to allow configuration of this value as it has no added value generally and allows for breaking your application very easily similarly to distDir. Reason for that is that it's super easy to use a directory that is not in the resolve path causing pages to resolve different deps. There's many more arguments against adding it outlined in the issues below.

See #8451

There's a few reference issues #4789, #8415, #4315, #3921, #5303, #2202, #3416

Overall I would recommend creating an issue first before creating a full PR. In this case this feature request has been discussed extensively over the last 3 years.

Wilbert Alexander Abreu added 3 commits April 13, 2020 15:55

feat(customPagesDir): Adding ability to use a custom pages directory …

b7e0050

…via config

feat(customPagesDir): Adding with-custom-pages-directory example

5852624

feat(customPagesDir): Adding custom pages directory feature to docs

bc21082

wilbert-abreu requested review from ijjk, lfades, Timer and timneutkens as code owners April 13, 2020 22:49

Merge branch 'canary' into feature/custom-page-directory

3ee9d61

Merge branch 'canary' into feature/custom-page-directory

5f2ca56

timneutkens closed this Apr 14, 2020

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Custom "pages" directory w/ Example + Docs #11864

Feature: Custom "pages" directory w/ Example + Docs #11864

wilbert-abreu commented Apr 13, 2020

ijjk commented Apr 13, 2020

ijjk commented Apr 13, 2020

ijjk commented Apr 13, 2020

timneutkens commented Apr 14, 2020

Feature: Custom "pages" directory w/ Example + Docs #11864

Feature: Custom "pages" directory w/ Example + Docs #11864

Conversation

wilbert-abreu commented Apr 13, 2020

Purpose

Example - next.config.js

ijjk commented Apr 13, 2020

Stats from current PR

ijjk commented Apr 13, 2020

Stats from current PR

ijjk commented Apr 13, 2020

Stats from current PR

timneutkens commented Apr 14, 2020

Example - `next.config.js`