CODEWITHSUNDEEP
node.jsreactjsnext.jsvercelhttp-status-code-500
Chan Lay
Chan Lay

Reputation: 144

500: Internal Server Error with Next Js in some routes

Live Demo

After deploying a project written in Next JS to Vercel, some page paths, such as (xxx.vercel.app/first or / second) pages, display "500: Internal Server Error". All Page Routes do not receive any errors except these two Routes.

There is no solution yet, so I came to StackOverFlow to ask.

In my local development, everything ran smoothly. However, this is an error I get when I run on Vercel, so I would like to get some suggestions on how to fix it.

The following is the code for each page path I wrote for that two routes:

@config/ To run my Server

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

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

This is for the first page. route path will be like this (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),
        },
    }
}

This is for the second page. route path will be like this (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),
        },
    }
}

500: Internal Server Error with Next Js

Upvotes: 5

Views: 24662

Answers (1)

Chan Lay
Chan Lay

Reputation: 144

Finally, I solved the issues where I replaced to work with getStaticProps instead of getServerSide rendering and alongside with using SWR npm packages.

Upvotes: 1

Related Questions