Fix hostname message in dev/start (#20409)

packages/next/build/output/index.ts

@@ -5,8 +5,8 @@ import createStore from 'next/dist/compiled/unistore'
 import formatWebpackMessages from '../../client/dev/error-overlay/format-webpack-messages'
 import { OutputState, store as consoleStore } from './store'
 
-export function startedDevelopmentServer(appUrl: string) {
-  consoleStore.setState({ appUrl })
+export function startedDevelopmentServer(appUrl: string, bindAddr: string) {
+  consoleStore.setState({ appUrl, bindAddr })
 }
 
 let previousClient: import('webpack').Compiler | null = null

packages/next/build/output/store.ts

@@ -4,8 +4,8 @@ import stripAnsi from 'next/dist/compiled/strip-ansi'
 import * as Log from './log'
 
 export type OutputState =
-  | { bootstrap: true; appUrl: string | null }
-  | ({ bootstrap: false; appUrl: string | null } & (
+  | { bootstrap: true; appUrl: string | null; bindAddr: string | null }
+  | ({ bootstrap: false; appUrl: string | null; bindAddr: string | null } & (
       | { loading: true }
       | {
           loading: false
@@ -15,9 +15,13 @@ export type OutputState =
         }
     ))
 
-export const store = createStore<OutputState>({ appUrl: null, bootstrap: true })
+export const store = createStore<OutputState>({
+  appUrl: null,
+  bindAddr: null,
+  bootstrap: true,
+})
 
-let lastStore: OutputState = { appUrl: null, bootstrap: true }
+let lastStore: OutputState = { appUrl: null, bindAddr: null, bootstrap: true }
 function hasStoreChanged(nextStore: OutputState) {
   if (
     ([
@@ -40,7 +44,7 @@ store.subscribe((state) => {
 
   if (state.bootstrap) {
     if (state.appUrl) {
-      Log.ready(`started server on ${state.appUrl}`)
+      Log.ready(`started server on ${state.bindAddr}, url: ${state.appUrl}`)
     }
     return
   }

packages/next/cli/next-dev.ts

@@ -43,7 +43,7 @@ const nextDev: cliCommand = (argv) => {
 
       Options
         --port, -p      A port number on which to start the application
-        --hostname, -H  Hostname on which to start the application
+        --hostname, -H  Hostname on which to start the application (default: 0.0.0.0)
         --help, -h      Displays this message
     `)
     process.exit(0)
@@ -106,15 +106,12 @@ const nextDev: cliCommand = (argv) => {
   }
 
   const port = args['--port'] || 3000
-  const appUrl = `http://${args['--hostname'] || 'localhost'}:${port}`
+  const host = args['--hostname'] || '0.0.0.0'
+  const appUrl = `http://${host === '0.0.0.0' ? 'localhost' : host}:${port}`
 
-  startServer(
-    { dir, dev: true, isNextDevCommand: true },
-    port,
-    args['--hostname']
-  )
+  startServer({ dir, dev: true, isNextDevCommand: true }, port, host)
     .then(async (app) => {
-      startedDevelopmentServer(appUrl)
+      startedDevelopmentServer(appUrl, `${host}:${port}`)
       // Start preflight after server is listening and ignore errors:
       preflight().catch(() => {})
       // Finalize server bootup:

packages/next/cli/next-start.ts

@@ -42,19 +42,19 @@ const nextStart: cliCommand = (argv) => {
 
       Options
         --port, -p      A port number on which to start the application
-        --hostname, -H  Hostname on which to start the application
+        --hostname, -H  Hostname on which to start the application (default: 0.0.0.0)
         --help, -h      Displays this message
     `)
     process.exit(0)
   }
 
   const dir = resolve(args._[0] || '.')
   const port = args['--port'] || 3000
-  startServer({ dir }, port, args['--hostname'])
+  const host = args['--hostname'] || '0.0.0.0'
+  const appUrl = `http://${host === '0.0.0.0' ? 'localhost' : host}:${port}`
+  startServer({ dir }, port, host)
     .then(async (app) => {
-      Log.ready(
-        `started server on http://${args['--hostname'] || 'localhost'}:${port}`
-      )
+      Log.ready(`started server on ${host}:${port}, url: ${appUrl}`)
       await app.prepare()
     })
     .catch((err) => {

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

@@ -204,6 +204,7 @@ describe('CLI Usage', () => {
     test('--port', async () => {
       const port = await findPort()
       const output = await runNextCommandDev([dir, '--port', port], true)
+      expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`))
       expect(output).toMatch(new RegExp(`http://localhost:${port}`))
     })
 
@@ -214,12 +215,14 @@ describe('CLI Usage', () => {
       const output = await runNextCommandDev([dir, '--port', port], true, {
         env: { NODE_OPTIONS: '--inspect' },
       })
+      expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`))
       expect(output).toMatch(new RegExp(`http://localhost:${port}`))
     })
 
     test('-p', async () => {
       const port = await findPort()
       const output = await runNextCommandDev([dir, '-p', port], true)
+      expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`))
       expect(output).toMatch(new RegExp(`http://localhost:${port}`))
     })
 
@@ -262,7 +265,8 @@ describe('CLI Usage', () => {
         [dir, '--hostname', '0.0.0.0', '--port', port],
         true
       )
-      expect(output).toMatch(new RegExp(`http://0.0.0.0:${port}`))
+      expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`))
+      expect(output).toMatch(new RegExp(`http://localhost:${port}`))
     })
 
     test('-H', async () => {
@@ -271,7 +275,8 @@ describe('CLI Usage', () => {
         [dir, '-H', '0.0.0.0', '--port', port],
         true
       )
-      expect(output).toMatch(new RegExp(`http://0.0.0.0:${port}`))
+      expect(output).toMatch(new RegExp(`on 0.0.0.0:${port}`))
+      expect(output).toMatch(new RegExp(`http://localhost:${port}`))
     })
 
     test('should warn when unknown argument provided', async () => {