Search code examples
javascriptreactjsnext.jsserver-side-renderingvercel

NextJS SSR functions doesn't work on Vercel Server

My pages which I use getStaticProps or getServerSideProps working on my localhost but I get Internal Server Error or build time error when I deploy to vercel.

I searched everywhere for error logs. but I couldn't find any solution.

import React from 'react';
import {Wrapper} from "#layouts";
import axios from "axios";

function PrivacyPolicy({data}) {
    return (
       <Wrapper>
           {data &&
               <div className="conditions" dangerouslySetInnerHTML={{__html: data}} />
           }
       </Wrapper>
    );
}

export async function getStaticProps() {
    const settings = await axios.get(`${process.env.BASE_URL}/getSettings`).then(res => res.data);

    return { props: { data: settings?.confident_agree } }
}

export default PrivacyPolicy;

When I use getStaticProps (build time error):

GET] /_next/data/xIyCYnTjWYvq1SkNn0EfE/privacy-policy.json
14:05:24:19
nt-length': '699',
      date: 'Wed, 20 Jul 2022 11:05:26 GMT',
      'alt-svc': 'quic=":443"; ma=2592000; v="43,46", h3-Q043=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-Q050=":443"; ma=2592000, h3-25=":443"; ma=2592000, h3-27=":443"; ma=2592000'
    },
    config: {
      transitional: [Object],
      adapter: [Function: httpAdapter],
      transformRequest: [Array],
      transformResponse: [Array],
      timeout: 0,
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      maxContentLength: -1,
      maxBodyLength: -1,
      env: [Object],
      validateStatus: [Function: validateStatus],
      headers: [Object],
      method: 'get',
      url: 'xxx/api/getSettings',
      data: undefined
    },
    request: <ref *1> ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      _contentLength: 0,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      socket: [TLSSocket],
      _header: 'GET /api/getSettings HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'Access-Control-Allow-Origin: *\r\n' +
        'Access-Control-Allow-Credentials: true\r\n' +
        'Access-Control-Allow-Methods: GET,PUT,POST,DELETE\r\n' +
        'Content-Type: application/json\r\n' +
        'User-Agent: axios/0.27.2\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: noopPendingOutput],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      path: '/api/getSettings',
      _ended: true,
      res: [IncomingMessage],
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'popil.berataras.com',
      protocol: 'https:',
      _redirectable: [Writable],
      [Symbol(kCapture)]: false,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype]
    },
    data: '<!DOCTYPE html>\n' +
      '<html style="height:100%">\n' +
      '<head>\n' +
      '<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />\n' +
      '<title> 403 Forbidden\r\n' +
      '</title></head>\n' +
      '<body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">\n' +
      '<div style="height:auto; min-height:100%; ">     <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">\n' +
      '        <h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">403</h1>\n' +
      '<h2 style="margin-top:20px;font-size: 30px;">Forbidden\r\n' +
      '</h2>\n' +
      '<p>Access to this resource on the server is denied!</p>\n' +
      '</div></div></body></html>\n'
  },
  page: '/privacy-policy'
}
RequestId: fd64c257-6f5c-46fa-b1d3-e2e8ef855bd7 Error: Runtime exited with error: exit status 1
Runtime.ExitError

and when I use getServerSideProps (just in page):

enter image description here

Solution

  • try this

        const settings = await fetch(`${process.env.BASE_URL}/getSettings`, {
       method: 'get'
    });
    const result = await settings.json()

    And check process.env.BASE_URL has the correct value

    P.S you should have CORS enabled

    P.S2 maybe your path should be /api/getSettings ?