An issue arose after deploying my Next.js application to Netlify using Git. I utilize a .env.local file to store the backend route URL that is used across the entire app for fetch requests. However, post deployment, the process.env.NEXT_PUBLIC_BACKEND_ROUTE is returning undefined.
The content of the .env.local file is as follows:
NEXT_PUBLIC_BACKEND_ROUTE=https://[the name of the url].herokuapp.com/To illustrate, here is an example of a page in the app utilizing this environment variable:
import axios from 'axios';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export default function Home() {
const router = useRouter();
useEffect(() => {
axios
.get(`${process.env.NEXT_PUBLIC_BACKEND_ROUTE}/findAllPictures`)
.then((doc) => {
const arr = doc.data;
if (arr.length !== 0) {
const mappedArr = arr.map((obj) => {
return obj.id;
});
const amount = mappedArr.length;
const rand = Math.floor(Math.random() * amount);
const routeId = mappedArr[rand];
router.push(`/view/${routeId}`);
}
});
}, [null]);
return <div></div>;
}