How to set up custom koa.js server in next.js

Question

I have set up custom koa.js server and every time I make a request to api for example

/api/login

It always ends up in being 404 not found.

I have tried looking for a solution but, could not really find it.

Below is my server.js file

import '@babel/polyfill';
import dotenv from 'dotenv';
import 'isomorphic-fetch';
import next from 'next';
import Koa from 'koa';
import Router from 'koa-router';
import UserRouter from './routes/user';
import cors from '@koa/cors';

dotenv.config();

const compression = require('compression');

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 = new Koa();
  const router = new Router();
  server.use(
    cors({
      origin: '*',
    })
  );

  router.get('*', async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
  });

  server.use(UserRouter.routes()).use(UserRouter.allowedMethods());
  server.use(router.allowedMethods());
  server.use(router.routes());
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`Server ready on ${port}`);
  });
});