AWS Amplify environment variable coming through as undefined when called - amazon-web-services

Question

I'm launching my nextjs application through AWS Amplify and I have an environment variable that return undefined with called in my node application.
I defined the environment variable from the Amplify console shown here:
Amplify Environment Variable
The variable STRAPI is a 256 character string which according to the documentation I found should be ok.
Here is the code that uses the environment variables:
import qs from "qs";
/**
* Get full Strapi URL from path
* #param {string} path Path of the URL
* #returns {string} Full Strapi URL
*/
export function getStrapiURL(path = "") {
return `${
process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337"
}${path}`;
}
/**
* Helper to make GET requests to Strapi API endpoints
* #param {string} path Path of the API route
* #param {Object} urlParamsObject URL params object, will be stringified
* #param {Object} options Options passed to fetch
* #returns Parsed API call response
*/
export async function fetchAPI(path, urlParamsObject = {}, options = {}) {
// Merge default and user options
const token = process.env.STRAPI;
console.log("Token in process.env:");
console.log(process.env.STRAPI);
console.log("Token in token var:");
console.log(token);
const mergedOptions = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
...options,
};
// Build request URL
const queryString = qs.stringify(urlParamsObject);
const requestUrl = `${getStrapiURL(
`/api${path}${queryString ? `?${queryString}` : ""}`
)}`;
console.log("Request url:");
console.log(requestUrl);
// Trigger API call
const response = await fetch(requestUrl, mergedOptions);
// Handle response
if (!response.ok) {
console.error(response.statusText);
throw new Error(`An error occurred please try again`);
}
const data = await response.json();
return data;
}
This code was lifted from another project credit to its original author
NEXT_PUBLIC_STRAPI_API_URL comes out fine it's just the STRAPI environment variable that comes out undefined.
Side note: I'm fully aware you shouldn't log tokens and I 100% plan on regenerating the token once the issue is resolved.
Here are the logs from CloudWatch and as you can see the NEXT_PUBLIC_STRAPI_API_URL comes out fine.
cloudfront logs
I'm not sure the issue here, but I've tried the following:
Giving the STRAPI var a new value and it still came out as undefined after redeploying.
I delete the env var and created a new one to see if there was some bug there and that did not resolve it after redeploying.
I verified the setup is working locally on my machine.
Not sure what next steps to take here.

Answer 1

The problem is NextJS needed the environment variable to be prefixed with NEXT_PUBLIC_ to be exposed to the application. This was introduced in about NextJS 9. It's been awhile since I used NextJS.