title: 500: Internal Server Error with Next Js in some routes
body: <p><a href="https://kochenlay.vercel.app" rel="nofollow noreferrer"><strong>Live Demo</strong></a></p>
  <p>After deploying a project written in Next JS to Vercel, some page paths, such as (<strong>xxx.vercel.app/first</strong> or / <strong>second</strong>) pages, display &quot;<em><strong>500: Internal Server Error</strong></em>&quot;. All Page Routes do not receive any errors <strong>except these two Routes</strong>.</p>
  <p>There is no solution yet, so I came to StackOverFlow to ask.</p>
  <p>In my local development, <strong>everything ran smoothly</strong>. 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.</p>
  <p>The following is the code for each page path I wrote for that <em><strong>two routes</strong></em>:</p>
  <p><strong>@config/ To run my Server</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const dev = process.env.NODE_ENV !== 'production'
  
  export const server = dev
      ? 'http://localhost:3001'
      : 'https://kochenlay.vercel.app'</code></pre>
  </div>
  </div>
  </p>
  <p><strong>This is for the first page.</strong> route path will be like this  (<strong>xxx.vercel.app/history</strong>)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
          &lt;MainLayout title='Live Histories'&gt;
              {myData?.map((result, index) =&gt; (
                  &lt;LiveHistories key={result.id} data={result} index={index} /&gt;
              ))}
              {/* Go back */}
              &lt;GoBackHome /&gt;
          &lt;/MainLayout&gt;
      )
  }
  
  // * 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),
          },
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>This is for the second page.</strong> route path will be like this (<strong>xxx.vercel.app/lottery</strong>)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
          &lt;MainLayout title='3D Live'&gt;
              &lt;ThreeDLiveCard data={liveResult} /&gt;
              &lt;ThreeDLive data={calendarData} /&gt;
              &lt;GoBackHome /&gt;
          &lt;/MainLayout&gt;
      )
  }
  
  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),
          },
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/5dJUq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5dJUq.png" alt="500: Internal Server Error with Next Js" /></a></p>