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

Question

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,
}

Answer 1

所以，这个问题有一个更简单的答案，那就是如果你想太简单地了解这个错误发生的原因，你应该只将cpanel的应用程序模式放在开发中，这样，它就会显示错误的根源。