next.js app works fine in local but returns 500 internal server error on production

the problem i'm having is basically my app works fine in local but in production anywhere that i've used server side rendering returns 500 internal server error. the other parts of my site which are called normally like in useEffect or componentDidMount work completely fine, like my dashboard or authorization process works without a problem, but anywhere that i have used ssr returns 500. Below is some examples of how i have handled my ssr pages.

index page:

import React from 'react';
import HomePage from '../components/homePage/index'
import { Api, GuestHeaders } from '../components/config'

const Home = (props) => {
  return <HomePage {...props} />
}

export async function getServerSideProps() {
  const Response = await Api.get(`/v1/index`, { headers: GuestHeaders })
  return {
    props: {
      Detail: Response.data,

    }
  }
}

export default Home

here is my Api component:

import axios from 'axios';

const GuestHeaders = {
    'Authorization': "",
    'content-type': 'application/json'
}

const Api = axios.create({
    baseURL: 'baseUrl'
})

export { Api, GuestHeaders };

here is my server.js:

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

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

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl


  }).listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

and my next.config.js:

module.exports = {
    basePath: '',
    trailingSlash: false,
}