NextJS应用出现Fetch Failed错误及500内部服务器错误，求解决

我的NextJS应用此前运行正常，现在启动后出现500内部服务器错误，相关报错信息如下：

• 错误提示：
• 控制台错误信息：
• 本地服务器页面：

以下是我的index文件代码：

import LayoutPage from "@/components/LayoutPage";
import List from "@/components/List";
import Fetch from "@/data/fetching";
import Slide from "@/components/Splide";
import Head from "next/head";

const index = ({
  getTrendingMovies,
  getUpcomingMovies,
  getNowPlayingMovies,
  getPopularMovies,
}) => {

  return (
    <>
      <Head>
        <title>Home</title>
      </Head>
      <LayoutPage>
        <section className="w-full">
          <Slide data={getTrendingMovies.results} height={500} poster={true} />
          <List data={getUpcomingMovies} title="Upcoming Movies" />
          <List data={getNowPlayingMovies} title="Now Playing Movies" />
          <List data={getPopularMovies} title="Popular Movies" />
        </section>
      </LayoutPage>
    </>
  );
};

export default index;

export async function getServerSideProps() {
  const getTrendingMovies = await Fetch.getTrending();
  const getUpcomingMovies = await Fetch.getUpcoming();
  const getNowPlayingMovies = await Fetch.getNowPlaying();
  const getPopularMovies = await Fetch.getPopular();
  const getPopularActor = await Fetch.getPopular("person");
  return {
    props: {
      getTrendingMovies,
      getUpcomingMovies,
      getNowPlayingMovies,
      getPopularMovies,
      getPopularActor,
    },
  };
}

以下是我的Fetch.js文件代码：

class Fetch {
    static getTrending = async (media = 'movie', time = 'day') => {
        const response = await fetch(`${hostname}/trending/${media}/${time}?api_key=${apiKey}`)
        const responseJson = await response.json()
        responseJson.results.map(data => {
            data.media = media
        })
        return responseJson
    }

    static getRecommendation = async (media, id) => {
        const response = await fetch(`${hostname}/movie/${id}/recommendations?api_key=${apiKey}&page=1`)
        const responseJson = await response.json()
        responseJson.results.map(data => {
            data.media = media
        })
        return responseJson
     }

    static getUpcoming = async () => {
        const response = await fetch(`${hostname}/movie/upcoming?api_key=${apiKey}&language=en-US&page=1`)
        const responseJson = await response.json()
        responseJson.results.map(data => {
            data.media = 'movie'
        })
        return responseJson.results
    }

    static getNowPlaying = async () => {
        const response = await fetch(`${hostname}/movie/now_playing?api_key=${apiKey}&language=en-US&page=1`)
        const responseJson = await response.json()
        responseJson.results.map(data => {
            data.media = 'movie'
        })
        return responseJson.results
    }

    static getPopular = async (media = 'movie') => {
        const response = await fetch(`${hostname}/${media}/popular?api_key=${apiKey}&language=en-US&page=1`)
        const responseJson = await response.json()
        responseJson.results.map(data => {
            data.media = media
        })
        return responseJson.results
    }

    static getSimilar = async (media, id) => {
        const response = await fetch(`${hostname}/${media}/${id}/similar?api_key=${apiKey}&page=1`)
        const responseJson = await response.json()
        responseJson.results.map(data => {
            data.media = media
        })
        return responseJson
    }

    static getImages = async (media = 'movie', id) => {
        const response = await fetch(`${hostname}/${media}/${id}/images?api_key=${apiKey}`)
        const responseJson = await response.json()
        // console.log(responseJson.backdrops.slice(0, 10))
        return responseJson
    }

    static getDetail = async (media = 'movie', id) => {
        const response = await fetch(`${hostname}/${media}/${id}?api_key=${apiKey}`)
        const responseJson = await response.json()
        // console.log(responseJson)
        return responseJson
    }

    static getVideos = async (media = 'movie', id) => {
        const response = await fetch(`${hostname}/${media}/${id}/videos?api_key=${apiKey}`)
        const responseJson = await response.json()
        // console.log(responseJson.results.filter(video => video.type === 'Teaser' || video.type === 'Clip' ))
        return responseJson.results.filter(video => video.type === 'Teaser' || video.type === 'Clip')
    }

    static getCredits = async (media = 'movie', id) => {
        const response = await fetch(`${hostname}/${media}/${id}/credits?api_key=${apiKey}`)
        const responseJson = await response.json()
        return responseJson
    }

    static getCombineCreditsPerson = async (id) => {
        const response = await fetch(`${hostname}/person/${id}/combined_credits?api_key=${apiKey}`)
        const responseJson = await response.json()
        // console.log(responseJson)
        return responseJson.cast
    }
}

export default Fetch

希望能得到帮助。

内容的提问来源于stack exchange，提问作者Rifki T