3

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

Chen Lay
  • 115
  • 1
  • 2
  • 13
  • Can you post the code for _both_ `page/first.js` and `pages/second.js` please? – code Dec 18 '21 at 18:47
  • Now you can seeking out which I does edited on those two routes. :) – Chen Lay Dec 18 '21 at 19:04
  • is there any console output for error on your browser's dev tool? – hakki Dec 18 '21 at 19:05
  • where do you use `notFound ` ? – hakki Dec 18 '21 at 19:06
  • I'd got this message which "**Failed to load resource: the server responded with a status of 500 ()**" in the browser's dev tool. I forgot to remove notFound when I try to testing with getStaticProps. But, it won't work any way. It was totally fined and worked well on my localhost. :( – Chen Lay Dec 18 '21 at 19:13
  • I has been provided a demo link to check whether all you guys suggest to solve me any issues or not. – Chen Lay Dec 18 '21 at 19:31
  • can you wrap getServerSideProps inside a try-catch block and console.log the error that gets caught? – whygee Dec 18 '21 at 19:48
  • @ChenLay error code 500 means there is something wrong with your server (code), so try to find any errors in your code. Try `console.log`ging as much as possible to find your error. – code Dec 18 '21 at 20:16
  • In your first JavaScript page, you get information from `axios` with object destruturing: `const { data } = await axios(...)`; but you're trying to access your data with `data.data || []`. Since `data.data` doesn't exist, it'll always be an empty array. Just do `data || []`. By the way, are you sure the information you fetched is JSON? You might have to call `JSON.parse` first, or you'll have some interesting result and lots of frustration. – code Dec 18 '21 at 20:19
  • I can't do with anything for `ServerSideProps` and `getStaticProps`. I can only injecting the data with by using useEffect and useState hooks alongside with axios api called. – Chen Lay Dec 19 '21 at 05:46
  • What's the value for `server` when you run the app in Vercel? Does it have a valid value? Can you share the `@config/index` file? Also, you should be able to check the logs in Vercel to verify what's the actual error. – juliomalves Dec 19 '21 at 18:22
  • @juliomalves I don't see any errors logs when I deployed on Vercel. You can take a look at @config/index on my post which I already updated. – Chen Lay Dec 20 '21 at 18:34
  • You shouldn't be calling your internal API in `getServerSideProps`, instead you want to use the logic that's in your API route directly. See [Internal API fetch with getServerSideProps? (Next.js)](https://stackoverflow.com/questions/65752932/internal-api-fetch-with-getserversideprops-next-js). – juliomalves Dec 20 '21 at 18:45

1 Answers1

1

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

Chen Lay
  • 115
  • 1
  • 2
  • 13