Page on Static Web App throw a 500 error when I used getServerSideProps from Next.js

[aadlc]

I am not sure why the app works as expected on my local, but as soon it is published as a Static Web App on Azure, it throws a 500 Internal Server Error.

It is my first Next.js app on Azure. Perhaps I am missing something, a configuration, settings, etc. ?
Or,
Something wrong on my code?

Any way, your help will be appreciated.

Summary

I believe the problem is caused by getServerSideProps method from Next.js. In my application, getServerSideProps calls a public API that returns a token (JWT) that is used in subsequent calls.

What have a I tried

1. Initially, I thought the environment variables were not pulled into the application by build process.

• I hardcode the process.env.CPL_API_USER_PROD and process.env.CPL_API_PSWRD_PROD values on the getCplApiToken method. I got the 500 error.
• I used getStaticProps from next.js, returned process.env.CPL_API_USER_PROD from it, then logged the variable value to the browser console. The correct value was logged, this worked on local and Azure.

2. All of the environment variables are saved as gitHub secrets, and their names match the ones on my .env.local file.
   
   

3. I commented the getServerSideProps code in my page.

• The 500 error disappear on Azure.

4. IMPORTANT : deployed application to Vercel

• Worked as expected. No 500 error message

My code

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { Box, Button, Typography } from '@mui/material'
import TextFieldCustom from '@/components/TextField'
import FormLayout from '@/components/FormLayout'
import useCustomForm from '@/hooks/useCustomForm'
import { yupResolver } from '@hookform/resolvers/yup'
import {schema} from '@/lib/frm1-schema'
import {defaultValues} from '@/lib/frm1-defaultValues'
import getCplApiToken from '@/api/getCplApiToken'
import usePasswordManagementStore from '@/store/passwordManagementStore'

export async function getServerSideProps() {

  const resObj = await getCplApiToken()
  return {
    props: {
      serverProps: {status: resObj.status, token: resObj.data[0].token}
    }, // will be passed to the page component as props
  }
}
const Form = ({ serverProps }) => {
  const { bearerToken, setBearerToken, setAccountData } = usePasswordManagementStore()
  const router = useRouter()
  const {
    control,
    formState: { errors },
    handleSubmit,
    watch
  } = useCustomForm({
    mode: 'all',
    defaultValues: defaultValues,
    shouldUnregister: true,
    resolver: yupResolver(schema)
  })


  const formData = watch()
  
  const isEmptyFieldPresent = Object.values(formData).some(
    (value) => value === '' || value === null)

  useEffect(() => {
    if (!bearerToken)
    {
      setBearerToken(serverProps.token)
    }
  }, [bearerToken, setBearerToken])

  const submit = data => {
    setAccountData(data)
    router.push('/password-management/account-validation')
  }
  return (
    <FormLayout>
    <section>
        <Typography variant='h2' component='h1' gutterBottom>PIN Reset</Typography>
        <Typography variant='h4' component='h2' gutterBottom>Reset your PIN securely</Typography>
        <Typography variant='body1' gutterBottom>
         Receive a validation code via email or SMS to the associated contact information on your library account.
        </Typography>
        <Box my={2}>
          <Typography variant='body2'>Need help? Contact library staff.</Typography>
        </Box>
      <form noValidate autoComplete='off' onSubmit={handleSubmit(submit)}>
      <TextFieldCustom
          required
          fullWidth
          name='cardNumber'
          label='Library card number'
          control={control}
          error={!!errors.cardNumber}
          helperText={errors?.cardNumber?.message}
        />
        <TextFieldCustom
          required
          fullWidth
          name='Name'
          label='Name'
          control={control}
          error={!!errors.Name}
          helperText={errors?.Name?.message}
        />
        <TextFieldCustom
          required
          fullWidth
          name='Lastname'
          label='Lastname'
          control={control}
          error={!!errors.Lastname}
          helperText={errors?.Lastname?.message}
        />


        <Box sx={{ mt: 2, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
            <Button
              color='secondary'
              size='large'
              variant='contained'
              type='submit'
              disabled={isEmptyFieldPresent}
            >
              Next
            </Button>
        </Box>
      </form>
      </section>
      </FormLayout>
  )
}

export default Form

While the code in the method called inside getServerSideProps is:

import fetch from 'node-fetch'
const myHeaders = {'Content-Type': 'application/json'}
const getCplApiToken = async () => {
  let ret = null
  let response = null
  let data = null
  const controller = new AbortController()

  const raw = JSON.stringify({
    username: process.env.CPL_API_USER_PROD,
    password: process.env.CPL_API_PSWRD_PROD
  })

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow',
  }

  try {
    response = await fetch(`${process.env.NEXT_PUBLIC_CPL_API_URL_PROD}/Auth`, requestOptions)
    // setTimeout(id)
    if (!response.ok) {
      const resError = await response.text()
      throw resError
    }
    data = await response.text()
    ret = JSON.parse(data)
  } catch (error) {
    // ret = JSON.parse(error)
    console.log(error)
  }
  return { status: response.status, data: ret }
}

export default getCplApiToken

Yml file

on:
  push:
    branches:
      - staging
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - staging
jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        env:
          CPL_API_USER_PROD: ${{ secrets.CPL_API_USER_PROD }}
          CPL_API_PSWRD_PROD: ${{ secrets.CPL_API_PSWRD_PROD }}
          CPL_API_URL_PROD: ${{ secrets.CPL_API_URL_PROD }}
          NEXT_PUBLIC_CPL_API_URL_PROD: ${{ secrets.CPL_API_URL_PROD }}
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_FIELD_09B90541E }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          app_build_command: npm run build
          api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
          ###### End of Repository/Build Configurations ######

          
  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_FIELD_09B90541E }}
          action: "close"

[aadlc]

@Reshmi-Sriram is Next.js method getServerSideProps supported by Azure Static Web App?
Does the app needs a different configuration?
I am having trouble with it

[alexrabin]

I'm pretty sure you have to add the environment variables in the configuration settings in the Azure portal for the Static Web App when you are using getServerSideProps.