500: Internal Server Error with Next Js in some routes 错误

Question

Live Demo

将Next JS编写的项目部署到Vercel后，一些页面路径，如(xxx.vercel.app/first或/second) 页，显示“500：内部服务器错误”。除了这两个路由.

，所有页面路由都没有收到任何错误

暂时还没有解决办法，所以来Whosebug上问问

在我本地开发中，一切运行顺利。然而，这是我在 Vercel 上 运行 时遇到的错误，所以我想获得一些关于如何修复它的建议。

下面是我为那个两条路由写的每个页面路径的代码:

@config/ 到 运行 我的服务器

const dev = process.env.NODE_ENV !== 'production'

export const server = dev
    ? 'http://localhost:3001'
    : 'https://kochenlay.vercel.app'

这是第一页的。路由路径将是这样的（xxx.vercel。app/history )

import LiveHistories from '@components/LiveHistories'
import MainLayout from '@components/MainLayout'
import { server } from '@config/index'
import { GoBackHome } from '@utils/index'
import axios from 'axios'

// * Client Side
export default function History({ data }) {
    const myData = JSON.parse(data)
    return (
        <MainLayout title='Live Histories'>
            {myData?.map((result, index) => (
                <LiveHistories key={result.id} data={result} index={index} />
            ))}
            {/* Go back */}
            <GoBackHome />
        </MainLayout>
    )
}

// * Server Side
export async function getServerSideProps() {
    const { data } = await axios({
        method: 'GET',
        url: `${server}/api/twod`,
        responseType: 'json',
        headers: {
            'Content-Type': 'application/json',
        },
    })

    const result = data.data.slice(0, 7) || []


    return {
        props: {
            data: JSON.stringify(result),
        },
    }
}

这是第二页的。路由路径会是这样的(xxx.vercel.app/lottery )

import MainLayout from '@components/MainLayout'
import ThreeDLive from '@components/ThreeDLive'
import ThreeDLiveCard from '@components/ThreeDLive/ThreeDLiveCard'
import { server } from '@config/index'
import { GoBackHome } from '@utils/index'
import axios from 'axios'

export default function ThaiLottery({ calendar, live }) {
    const calendarData = JSON.parse(calendar)
    const liveResult = JSON.parse(live)

    return (
        <MainLayout title='3D Live'>
            <ThreeDLiveCard data={liveResult} />
            <ThreeDLive data={calendarData} />
            <GoBackHome />
        </MainLayout>
    )
}

export async function getServerSideProps() {
    const { data } = await axios({
        method: 'GET',
        url: `${server}/api/threed`,
        responseType: 'json',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    const calendarThreeD = data.data || null
    const threeDLive = data.data[0] || null


    return {
        props: {
            calendar: JSON.stringify(calendarThreeD),
            live: JSON.stringify(threeDLive),
        },
    }
}

Answer 1

最后，我解决了使用 getStaticProps 而不是 getServerSide 渲染以及使用 SWR npm 包的问题。