Deploy Next.js on Azure Devops Pipeline
Unanswered
Berylline Hummingbird posted this in #help-forum
Berylline HummingbirdOP
Hi, all.
There's a Next.js app, I'm currently working on and there's an axios instance which I'm using for API request to the FASTAPI server.
Here I use environment variable for pointing the endpoint url and it's set as NEXT_PUBLIC_API_BASE_URL=https://server-endpoint-url.ai
Locally it works fine, but after it gets deployed in the Azure Devops pipeline, it started to make an api request to the wrong endpoint.
Is there any specific tech when deploying Next.js to Azure Devops pipeline?
Thank you in advance
There's a Next.js app, I'm currently working on and there's an axios instance which I'm using for API request to the FASTAPI server.
Here I use environment variable for pointing the endpoint url and it's set as NEXT_PUBLIC_API_BASE_URL=https://server-endpoint-url.ai
Locally it works fine, but after it gets deployed in the Azure Devops pipeline, it started to make an api request to the wrong endpoint.
Is there any specific tech when deploying Next.js to Azure Devops pipeline?
Thank you in advance
1 Reply
Short mackerel
Probably a little late, but I noticed this went unanswered.
The NEXT_PUBLIC environment variables will be compiled at build time and so they are hard coded from that point on in your client components. If you change the environment variables for a different runtime (ie a different environment like stage/prod etc) then the NEXT_PUBLIC ones won't have any affect.
Not sure if this is your case, but it sounds related.
You can either build for every environment, passing your different .env files for each build. Use a package to handle this, like next-runtime-env (there are some draw backs to their method however). Or pass those variables to your client components from your server component (root layout) and store the values in window.ENV, using window.ENV in your client components/axios calls when you need to use those variables. (server components use the values from the runtime .env file). Remix have a good example of doing this in their docs.
The NEXT_PUBLIC environment variables will be compiled at build time and so they are hard coded from that point on in your client components. If you change the environment variables for a different runtime (ie a different environment like stage/prod etc) then the NEXT_PUBLIC ones won't have any affect.
Not sure if this is your case, but it sounds related.
You can either build for every environment, passing your different .env files for each build. Use a package to handle this, like next-runtime-env (there are some draw backs to their method however). Or pass those variables to your client components from your server component (root layout) and store the values in window.ENV, using window.ENV in your client components/axios calls when you need to use those variables. (server components use the values from the runtime .env file). Remix have a good example of doing this in their docs.