How to use Firebase Cloud Messaging with NextJS API Routes

According to the Firebase Cloud Messaging docs on Setting up Javascript Client, it is required that you place a firebase-messaging-sw.js file in the root of your domain. In the NextJS examples with-firebase-cloud-messaging, the firebase-messaging-sw.js is configured using a custom server.

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.get('/service-worker.js', (req, res) => {
    app.serveStatic(req, res, './.next/service-worker.js')
  })

  const serviceWorkers = [
    {
      filename: 'service-worker.js',
      path: './.next/service-worker.js',
    },
    {
      filename: 'firebase-messaging-sw.js',
      path: './static/firebase-messaging-sw.js',
    },
  ]

  serviceWorkers.forEach(({ filename, path }) => {
    server.get(`/${filename}`, (req, res) => {
      app.serveStatic(req, res, path)
    })
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

My Application is already using API Routes, so do I need to also add a custom server, or is there a way this can be achieved with API Routes?

from How to use Firebase Cloud Messaging with NextJS API Routes