Delay server start message until it's listening (#15929)

Fixes #15928

---

This would cause us to print the message too early and open the browser to a server that wasn't started yet. This waits until we're listening, but before the app is ready fully.

Author: Timer

packages/next/cli/next-dev.ts

@@ -59,14 +59,13 @@ const nextDev: cliCommand = (argv) => {
   const port = args['--port'] || 3000
   const appUrl = `http://${args['--hostname'] || 'localhost'}:${port}`
 
-  startedDevelopmentServer(appUrl)
-
   startServer(
     { dir, dev: true, isNextDevCommand: true },
     port,
     args['--hostname']
   )
     .then(async (app) => {
+      startedDevelopmentServer(appUrl)
       await app.prepare()
     })
     .catch((err) => {

test/integration/cli/test/index.test.js

@@ -1,8 +1,15 @@
 /* eslint-env jest */
 
-import { runNextCommand, runNextCommandDev, findPort } from 'next-test-utils'
+import {
+  runNextCommand,
+  runNextCommandDev,
+  findPort,
+  launchApp,
+} from 'next-test-utils'
 import { join } from 'path'
 import pkg from 'next/package'
+import http from 'http'
+
 jest.setTimeout(1000 * 60 * 5)
 
 const dir = join(__dirname, '..')
@@ -117,6 +124,39 @@ describe('CLI Usage', () => {
       expect(output).toMatch(new RegExp(`http://localhost:${port}`))
     })
 
+    test('-p conflict', async () => {
+      const port = await findPort()
+
+      let app = http.createServer((_, res) => {
+        res.writeHead(200, { 'Content-Type': 'text/plain' })
+        res.end('OK')
+      })
+      await new Promise((resolve, reject) => {
+        // This code catches EADDRINUSE error if the port is already in use
+        app.on('error', reject)
+        app.on('listening', () => resolve())
+        app.listen(port)
+      })
+      let stdout = '',
+        stderr = ''
+      await launchApp(dir, port, {
+        stdout: true,
+        stderr: true,
+        onStdout(msg) {
+          stdout += msg
+        },
+        onStderr(msg) {
+          stderr += msg
+        },
+      })
+      await new Promise((resolve) => app.close(resolve))
+      expect(stderr).toMatch('already in use')
+      expect(stdout).not.toMatch('ready')
+      expect(stdout).not.toMatch('started')
+      expect(stdout).not.toMatch(`${port}`)
+      expect(stdout).toBeFalsy()
+    })
+
     test('--hostname', async () => {
       const port = await findPort()
       const output = await runNextCommandDev(