Next_public_base_url
System env vars not getting set in Turborepo Next deployments
Hi, scratching my head a bit.
Building out based on the Vercel Turborepo Next template. I have a few custome environment variable and want to build use of the system ones like VERVEL_URL etc.
I have a file for local dev, and setting the vars in the Dashboard for deployed envs.
Disable and re-enabled the “Automatically lay bare System Environment Variables”
The build log was Warning that the envs were not allows in turborepo so added them to the array. Warnings now gone. But vars still not showing up in the deployed build.
I’ve put up some console logs which work locally.
But deployed they return undefined
Lib function to restore the base URL
Deployed, check console: https://member-git-basic-partner-dash-onfire-health.vercel.app/login
“next”: “^15.3.0”,
“react”: “^19.1.0”,
“turbo”: “^2.5.4”,
“node”: “>=18”
“packageManager”: “bun@1.2.18”,
Next.js .env secrets base url keeps showing as localhost:3000
I am deploying a Next app and when trying to obtain a value from the .env file it’s either undefined or it reads the wrong value of http://localhost:3000
In the .env file it’s defined as:
I have it defined in the fly.io webpage admin in secrets with name & value;
in my local terminal if I use flyctl secrets list I can view the secret listed;
I have seen this help page Fly.io build secrets which states we need to
- mount the secrets on the dockerfile
- provide the value when fly deploy
In the docker file there is this section where it’s mounted:
then when I deploy in terminal I use:
(this deploy seems to be much faster than a normal deploy with out the secret;)
In the page I placed a simple console log to view the value in the browser such as
But what occurs is that the value of the secret is stuck on “http://localhost:3000” not the production value which should be “https:www.rleaguez.com/”
If you want to see the console log the page is here:
What needs to be done differently to get the correct secret value in this Next.js app on fly.io?
Thanks in advance for any & all feedback~
I am trying to deplay my marketing template demo with almost no changes to vercel and it fails to build on first try. I am a new user to contentful and vercel and nextjs but I am a developer who can understand directions please tell me how to fix this new
I am trying to use contentful cms marketing template and the vercel deployment option to host my demo app for testing. Here is the failing build log entries.
Build Failed
Command “NEXT_PUBLIC_BASE_URL=”${NEXT_PUBLIC_BASE_URL:-https://$next_public_vercel_url}/" yarn build" exited with 1
Build Log
Detected Next.js version: 12.3.1
Running “NEXT_PUBLIC_BASE_URL=”${NEXT_PUBLIC_BASE_URL:-https://$next_public_vercel_url}/" yarn build"
yarn run v1.22.19
$ next build
warn - Invalid next.config.js options detected:
Failed to compile.
./src/components/features/card-leadership/card-leadership.tsx:88:32
Type error: Argument of type ‘{ fieldId: string; }’ is not assignable to parameter of type ‘({ fieldId: string; manuallyTagged: boolean | undefined; } | { fieldId: string; manuallyTagged: boolean | undefined; assetId: string; }) & Pick<LivePreviewProps, “locale” | … 1 more … | “space”>’.
Type ‘{ fieldId: string; }’
Boolean Art
No, its not a placeholder, I did mean to say
A lot of advanced features on a website depend upon the full canonical url of your site including the domain used for deployment. For this purpose setting up a variable that gives you your site base url can greatly simplify your code.
During development we want
http - localhost:3000
For preview environment we want
https - generated_preview_url
For production we want
https - domain_for_production
Full guide with VERCEL (free community resource) 🕺🏻
Setup a BASE_URL for client and server
Lesson from "Professional NextJS": Setup a BASE_URL for client and server
How to use environment variables in Next.js
Next.js comes with built-in support for environment variables, which allows you to do the following:
Warning: The default template ensures all files are added to your . You almost never want to commit these files to your repository.
Loading Environment Variables
Next.js has built-in support for loading environment variables from files into .
This loads , , and into the Node.js environment automatically allowing you to use them in Next.js data fetching methods and API routes.
For example, using :
Loading Environment Variables with
If you need to load environment variables outside of the Next.js runtime, such as in a root config file for an ORM or test runner, you can use the package.
This package is used internally by Next.js to load environment variables from files.
To use it, install the package and use the function to load the environment variables:
Then, you can import the configuration where needed. For example: