Lessons from open-source: You cannot use these reserved port numbers to start your Next.js development server

#javascript #react #nextjs #opensource

This lesson is picked from Next.js source code. In this article, you will learn the reserved port numbers that cannot be used to start your Next.js development server.

next dev

You use next dev to start your next.js development server. In order to specify a custom port number, Next.js provides the option -p. Find out CLI options at Next.js docs.

But does this mean you can use any random number as your port number? Yes, you can except for the following:

/\*\* https://fetch.spec.whatwg.org/#port-blocking \*/
export const KNOWN\_RESERVED\_PORTS = {
  1: 'tcpmux',
  7: 'echo',
  9: 'discard',
  11: 'systat',
  13: 'daytime',
  15: 'netstat',
  17: 'qotd',
  19: 'chargen',
  20: 'ftp-data',
  21: 'ftp',
  22: 'ssh',
  23: 'telnet',
  25: 'smtp',
  37: 'time',
  42: 'name',
  43: 'nicname',
  53: 'domain',
  69: 'tftp',
  77: 'rje',
  79: 'finger',
  87: 'link',
  95: 'supdup',
  101: 'hostname',
  102: 'iso-tsap',
  103: 'gppitnp',
  104: 'acr-nema',
  109: 'pop2',
  110: 'pop3',
  111: 'sunrpc',
  113: 'auth',
  115: 'sftp',
  117: 'uucp-path',
  119: 'nntp',
  123: 'ntp',
  135: 'epmap',
  137: 'netbios-ns',
  139: 'netbios-ssn',
  143: 'imap',
  161: 'snmp',
  179: 'bgp',
  389: 'ldap',
  427: 'svrloc',
  465: 'submissions',
  512: 'exec',
  513: 'login',
  514: 'shell',
  515: 'printer',
  526: 'tempo',
  530: 'courier',
  531: 'chat',
  532: 'netnews',
  540: 'uucp',
  548: 'afp',
  554: 'rtsp',
  556: 'remotefs',
  563: 'nntps',
  587: 'submission',
  601: 'syslog-conn',
  636: 'ldaps',
  989: 'ftps-data',
  990: 'ftps',
  993: 'imaps',
  995: 'pop3s',
  1719: 'h323gatestat',
  1720: 'h323hostcall',
  1723: 'pptp',
  2049: 'nfs',
  3659: 'apple-sasl',
  4045: 'npp',
  5060: 'sip',
  5061: 'sips',
  6000: 'x11',
  6566: 'sane-port',
  6665: 'ircu',
  6666: 'ircu',
  6667: 'ircu',
  6668: 'ircu',
  6669: 'ircu',
  6697: 'ircs-u',
  10080: 'amanda',
} as const

type ReservedPort = keyof typeof KNOWN\_RESERVED\_PORTS

export function isPortIsReserved(port: number): port is ReservedPort {
  return port in KNOWN\_RESERVED\_PORTS
}

export function getReservedPortExplanation(port: ReservedPort): string {
  return (
    \`Bad port: "${port}" is reserved for ${KNOWN\_RESERVED\_PORTS\[port\]}\\n\` +
    'Read more: https://nextjs.org/docs/messages/reserved-port'
  )
}

This above code is picked from get-reserved-port.ts. This file has a comment at the top of the file which points to https://fetch.spec.whatwg.org/#port-blocking

What is the WHATWG?

The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving the web through standards and tests.

The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML, and apparent disregard for the needs of real-world web developers. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

In 2017, Apple, Google, Microsoft, and Mozilla helped develop an IPR policy and governance structure for the WHATWG, together forming a Steering Group to oversee relevant policies. — WHATWG FAQ

Conclusion:

I usually use 3000 or 8080 or 8000 as port numbers to start a server on. It is good to know what port numbers to avoid that are reserved. This study also helped me find WHATWG standards for fetch API.