GET/POST запрос на NextJS Server не работает (NextJS and NextJS backend)

Решил прикрутить сервер к калькулятору, чтобы отсылать получившееся значение выражения в БД (в будущем), пока ограничился проверкой работы GET/POST запросов, используя fetch и axios, сервер запускаю одновременно с клиентом, благодаря SSR могу запускать клиент на хосте сервера (4000), хотя клиент всегда по умолчанию идет на 3000, даже для уверенности прописал в package proxy на 4000 хост и совершал запросы находясь на 4000 хосте клиента. Вот ошибка и код проекта.

SyntaxError: Unexpected token < in JSON at position 0
MainCalc.js:13 GET http://localhost:4000/api 404 (Not Found)

package.json

{
  "name": "calc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "server": "node server.js",
    "drok": "concurrently \"npm run server\" \"npm run dev\""
  },
  "proxy": "http://localhost:4000",
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "axios": "^0.19.2",
    "body-parser": "^1.19.0",
    "concurrently": "^5.3.0",
    "express": "^4.17.1",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.1",
    "next": "9.5.1",
    "node": "^12.13.0",
    "nodemon": "^2.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

server.js

const app = require('express')();
const next = require('next');
const server = require('http').Server(app);
const bodyParser = require('body-parser');
const PORT = 4000 || process.env.PORT;

const dev = process.env.NODE_ENV !== 'production'
const nextApp = next({dev});
const handle = nextApp.getRequestHandler();

nextApp.prepare().then(() => {
    app.get('*', (req,res) => {
        return handle(req,res)
    })
    app.use(bodyParser.urlencoded({ extended: true }))
    app.use(bodyParser.json())   

    server.listen(PORT, console.log(`Server have started with apollo at ${PORT} port`))
    app.get('/api', (req, res) => {
        let data = {
            name: 'Slava',
            age: 15
        }
        console.log('Great GET request')
        res.send(data)
    })
})

MainCalc.js

import React, {useState}from 'react'
import styles from '../styles/Home.module.css'
import TextField from '@material-ui/core/TextField'
import { useRouter } from 'next/router'
import axios from 'axios'
import Cookie from 'js-cookie'

const MainCalc = ({stars}) => {
    const router = useRouter()
    const [value, setValue] = useState('')
    const onGet = async () => {
        try {
            let res = await fetch('/api')
            let json = await res.json()
            console.log(json)
        } catch (e) {
            console.log(e)
        }
    }
    const onRes = async () => {
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
        const json = await res.json()
        console.log(json.title)
        //console.log(date.data)
        setValue(eval(value))
        Cookie.set('number', eval(value))
        router.push('/nick')
    }
    return (
        <div className={styles.calc}>
        <button onClick={onGet}>GET API</button>
        <TextField style={{marginTop: '100px', marginRight: '120px'}} className={styles.res} type="text" value={value}/>
        <div className={styles.calc_grid}>
        <button onClick={() => setValue('')} className={styles.butt}>C</button>
        <button onClick={() => setValue(prev => prev + '.')} className={styles.butt}>.</button>
        <button onClick={() => setValue(prev => prev + '*')}className={styles.butt}>&times;</button>
        <button onClick={() => setValue(prev => prev + '/')}className={styles.butt}>÷</button>
        <button onClick={() => setValue(prev => prev + 7)} className={styles.butt}>7</button>
        <button onClick={() => setValue(prev => prev + 8)} className={styles.butt}>8</button>
        <button onClick={() => setValue(prev => prev + 9)} className={styles.butt}>9</button>
        <button onClick={() => setValue(prev => prev + '-')} className={styles.butt}>-</button>
        <button onClick={() => setValue(prev => prev + 4)} className={styles.butt}>4</button>
        <button onClick={() => setValue(prev => prev + 5)} className={styles.butt}>5</button>
        <button onClick={() => setValue(prev => prev + 6)} className={styles.butt}>6</button>
        <button onClick={() => setValue(prev => prev + '+')} className={styles.butt}>+</button>
        <button onClick={() => setValue(prev => prev + 1)} className={styles.butt}>1</button>
        <button onClick={() => setValue(prev => prev + 2)} className={styles.butt}>2</button>
        <button onClick={() => setValue(prev => prev + 3)} className={styles.butt}>3</button>
        <button onClick={() => setValue(prev => prev + 0)} className={styles.butt}>0</button>
        <button onClick={onRes} className={styles.butt}>=</button>
        </div>
        </div>
    )
}

export const getStaticProps = async () => {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
    const json = await res.json()
  
    return {
      props: {
        stars: json.stargazers_count,
      },
    }  
}

export default MainCalc

Помогите, это мой 2 проект на NextJS с сервером, делал идентично первому, но тот работает, а этот нет.