Make Docker image compatible with multiple environments

[sidemt]

Currently, we are using an environment variable NEXT_PUBLIC_STRAPI_BACKEND_URL in the frontend app. But this variable gets fixed at build time, making the Docker image only compatible with a single environment.

Current situation:

• To make an environment variable accessible in the browser, we have to prefix the variable with NEXT_PUBLIC_
• But by doing so, the value will be fixed at build time -> this is causing the problem now
  • We are passing in the variable at the build time here: https://github.com/freeCodeCamp/publish/blob/8d1a1731a5e997a83220aa64ff3c6b74042b068e/.github/workflows/build.yml#L36-L41

To fix the issue, we have to either:

• use getServerSideProps
• use App Router
• if we can't avoid using NEXT_PUBLIC_ variable, build the frontend Docker image for each environment

Reference: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#runtime-environment-variables