Automatically using different port to start dev server for non-explicit port

[hyf0]

The feature will only have effects on next dev. It will re-try to create next dev server using a different port if the default port 3000 is in use.

But, if users explicitly use port options like next dev --port 3000, we won't retry but throw an error.

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.

It's not a complicated feature, maybe we could discuss it in this PR.

• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes by running yarn lint

$ yarn dev
warn  - Port 3000 is in use, trying 3001 instead.
ready - started server on 0.0.0.0:3001, url: http://localhost:3001

[styfle]

Take a look at vercel dev to see how it works. We should probably match the same behavior for next dev too

https://github.com/vercel/vercel/blob/273718e0b78447bbd5b6092df720877099a18752/packages/cli/src/util/dev/server.ts#L845-L869

[hyf0]

Thanks for all the guidance.
I'm still new to next codebase, so I try to limit my changes to a minimum level. If we follow vercel dev, does it mean we should also make changes to these codes?

next.js/packages/next/cli/next-dev.ts

Lines 102 to 126 in 5f19f76

	.catch((err) => {
	if (err.code === 'EADDRINUSE') {
	let errorMessage = `Port ${port} is already in use.`
	const pkgAppPath = require('next/dist/compiled/find-up').sync(
	'package.json',
	{
	cwd: dir,
	}
	)
	const appPackage = require(pkgAppPath)
	if (appPackage.scripts) {
	const nextScript = Object.entries(appPackage.scripts).find(
	(scriptLine) => scriptLine[1] === 'next'
	)
	if (nextScript) {
	errorMessage += `\nUse \`npm run ${nextScript[0]} -- -p <some other port>\`.`
	}
	}
	console.error(errorMessage)
	} else {
	console.error(err)
	}
	process.nextTick(() => process.exit(1))
	})
	}

[styfle]

Thanks!

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
buildDuration	25s	25.5s	⚠️ +487ms
buildDurationCached	4.9s	5.1s	⚠️ +154ms
nodeModulesSize	335 MB	335 MB	⚠️ +1.01 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.16	4.084	-0.08
/ avg req/sec	600.98	612.16	+11.18
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.161	2.211	⚠️ +0.05
/error-in-render avg req/sec	1157.14	1130.93	⚠️ -26.21

Client Bundles (main, webpack, commons)

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.2 kB	72.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.3 kB	13.3 kB	✓

Client Build Manifests

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
index.html gzip	522 B	522 B	✓
link.html gzip	535 B	535 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
buildDuration	26.5s	27.1s	⚠️ +576ms
buildDurationCached	4.9s	4.9s	-23ms
nodeModulesSize	335 MB	335 MB	⚠️ +1.01 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.241	4.141	-0.1
/ avg req/sec	589.45	603.75	+14.3
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.201	2.183	-0.02
/error-in-render avg req/sec	1135.7	1145.22	+9.52

Client Bundles (main, webpack, commons)

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.5 kB	28.5 kB	✓
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	72.5 kB	72.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.2 kB	13.2 kB	✓

Client Build Manifests

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	iheyunfei/next.js feat_automatically_re_listen_port	Change
index.html gzip	522 B	522 B	✓
link.html gzip	534 B	534 B	✓
withRouter.html gzip	516 B	516 B	✓
Overall change	1.57 kB	1.57 kB	✓

Commit: 5008aec