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:

    publish/.github/workflows/build.yml

    Lines 36 to 41 in 8d1a173

    	run: |
    	docker build . \
    	--tag registry.digitalocean.com/${{ secrets.DOCR_NAME }}/${{ matrix.site_tlds }}/publish-${{ matrix.apps }}:$tagname \
    	--tag registry.digitalocean.com/${{ secrets.DOCR_NAME }}/${{ matrix.site_tlds }}/publish-${{ matrix.apps }}:latest \
    	--build-arg NEXT_PUBLIC_STRAPI_BACKEND_URL=${{ secrets.NEXT_PUBLIC_STRAPI_BACKEND_URL }} \
    	--file docker/${{ matrix.apps }}/Dockerfile

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