How to build next.js app with custom server for production - next.js

Question

I have created a next.js app in there I have a custom server dir. I am using koa.js as my custom server. It works fine on development but, when I build the app, the api routes show 404 not found error. Below is my package.json
{
"name": "dogs",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=18.7.0",
"yarn": ">=1.22.17",
"npm": "please-use-yarn"
},
"scripts": {
"dev": "nodemon ./server/index.js",
"ngrok": "ngrok http 3000",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prettier": "prettier --write .",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.20.2",
"#babel/register": "^7.18.9",
"#fireworks-js/preact": "^2.10.1",
"#koa/cors": "^4.0.0",
"#next/font": "13.1.1",
"#react-email/button": "^0.0.6",
"#react-email/container": "^0.0.7-canary.1",
"#react-email/head": "^0.0.4",
"#react-email/hr": "^0.0.4",
"#react-email/html": "^0.0.4",
"#react-email/img": "^0.0.4",
"#react-email/link": "^0.0.4",
"#react-email/preview": "^0.0.5",
"#react-email/render": "^0.0.6",
"#react-email/section": "^0.0.7-canary.1",
"#react-email/text": "^0.0.4",
"#sendgrid/mail": "^7.7.0",
"TagCloud": "^2.3.2",
"autoprefixer": "^10.4.13",
"aws-sdk": "^2.1300.0",
"babel-polyfill": "^6.26.0",
"bcryptjs": "^2.4.3",
"daisyui": "^2.47.0",
"dotenv": "^16.0.3",
"eslint": "8.30.0",
"eslint-config-next": "13.1.1",
"express": "^4.18.2",
"framer-motion": "^9.0.1",
"gsap": "^3.11.4",
"isomorphic-fetch": "^3.0.0",
"jsonwebtoken": "^9.0.0",
"koa": "^2.14.1",
"koa-body": "^6.0.1",
"koa-cache-control": "^2.0.0",
"koa-combine-routers": "^4.0.2",
"koa-conditional-get": "^3.0.0",
"koa-cookie": "^1.0.0",
"koa-etag": "^4.0.0",
"koa-mongo": "^1.9.3",
"koa-multer": "^1.0.2",
"koa-router": "^12.0.0",
"koa-session": "^6.2.0",
"koa-static": "^5.0.0",
"koa-static-cache": "^5.1.4",
"mongodb": "^4.13.0",
"mongoose": "^6.8.2",
"multer": "^1.4.5-lts.1",
"next": "13.1.1",
"postcss": "^8.4.20",
"primereact": "^8.7.3",
"react": "18.2.0",
"react-confetti": "^6.1.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"react-multi-select-component": "^4.3.4",
"react-particles": "^2.8.0",
"react-select": "^5.7.0",
"react-tsparticles": "^2.8.0",
"split-type": "^0.3.3",
"tailwindcss": "^3.2.4",
"tsparticles": "^2.8.0",
"tsparticles-engine": "^2.8.0",
"tsparticles-preset-fireworks": "^2.8.0",
"winston": "^3.8.2"
},
"devDependencies": {
"#babel/core": "^7.20.7",
"#commitlint/cli": "^17.3.0",
"#commitlint/config-conventional": "^17.3.0",
"#storybook/addon-actions": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-interactions": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/react": "^6.5.15",
"#storybook/testing-library": "^0.0.13",
"babel-loader": "^8.3.0",
"cross-env": "^7.0.3",
"husky": "^8.0.2",
"ngrok": "^4.3.3",
"nodemon": "^2.0.20",
"prettier": "^2.8.1"
},
"resolutions": {
"webpack": "^5"
}
}
Below is my server code
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 DataRouter from './routes/data';
import EmailRouter from './routes/emails';
import MongoClientConnection from './db';
import cookie from 'koa-cookie';
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const server = new Koa();
const router = new Router();
// Initialize NextJs instance and expose request handler
const app = next({ dev });
const handler = app.getRequestHandler();
(async () => {
try {
await app.prepare();
router.get('/custom-page', async (ctx) => {
await app.render(ctx.req, ctx.res, '/', ctx.query);
ctx.respond = false;
});
const db = await MongoClientConnection.Get();
server.context.db = db;
const handleRequest = async (ctx) => {
await handler(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
};
router.get('/_next/webpack-hmr', handleRequest); // Webpack content is clear
router.get('(.*)', async (ctx) => {
await handleRequest(ctx);
});
server.use(cookie());
server.use(UserRouter.routes()).use(UserRouter.allowedMethods());
server.use(DataRouter.routes()).use(DataRouter.allowedMethods());
server.use(EmailRouter.routes()).use(EmailRouter.allowedMethods());
server.use(router.routes());
server.listen(port, (_) => console.log(`App running on port ${port}`));
} catch (e) {
console.error(e);
process.exit();
}
})();
How can I build my next.js app so my api routes work on production?