.env.local variables are not loading in my getStaticProps function
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
After looking through the [loading environment variables](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables) page, I haven't been able to understand how they use a secret variable. If they want to make it public, then they state that one should add
NEXT_PUBLIC_ to every variable in order for it to work and the secret variables only work in the server side of the application and not on the client side from what I understood. But within the official documentation, they post a getStaticProps using these secret variables, where I also use them the same way, but they don't work. They also state that it should be used in fetching methods and API routes? I am using my own variables for the component they are in. Do these variables not work because they're being used in the client browser page?Answered by joulev
There are two problems here none of which is related to environment variables.
1. If you make src/pages/components/Main.tsx, you make a route /components/Main. Users can go to https://yourdomain.com/components/Main. That’s absolutely not what you want. So you must move your components outside the pages directory. That pages directory should only be used for page files, not components.
2. getStaticProps only works for page files. If you go to http://localhost:3000/components/Main in your browser now, you will see the URLs working normally (that is, if Main.tsx is accidentally a valid page file). But when you move your component to outside the pages directory, getStaticProps is no longer available
1. If you make src/pages/components/Main.tsx, you make a route /components/Main. Users can go to https://yourdomain.com/components/Main. That’s absolutely not what you want. So you must move your components outside the pages directory. That pages directory should only be used for page files, not components.
2. getStaticProps only works for page files. If you go to http://localhost:3000/components/Main in your browser now, you will see the URLs working normally (that is, if Main.tsx is accidentally a valid page file). But when you move your component to outside the pages directory, getStaticProps is no longer available
20 Replies
Whoops sorry wrong one
Please send some code in how you are using those variables
Because just from your description it’s hard to guess
Inside getStaticProps then you don’t need the public prefix
@joulev Please send some code in how you are using those variables
Transvaal lionOP
I think my description is pretty straightforward, but I'll drop some code.
Main.tsx
export const getStaticProps: GetStaticProps = () => {
const GitHub = process.env.GITHUB_URL
const LinkedIn = process.env.LINKEDIN_URL
return {
props: {
GitHub,
LinkedIn
}
}
}@Transvaal lion I think my description is pretty straightforward, but I'll drop some code.
Yes it’s clear, but there are many ways to use env vars and from just your description alone I can’t guess anything
Transvaal lionOP
GITHUB_URL=https:XXXXXXX
LINKEDIN_URL=https:XXXXXXX.env.local
Yes, what is the path to this Main.tsx file
@joulev Yes, what is the path to this Main.tsx file
Transvaal lionOP
Do you mean where it is located in the
src folder?Yes
Transvaal lionOP
src / pages / components / Main.tsx@Transvaal lion `src / pages / components / Main.tsx`
So that’s why. Are you running this getStaticProps by calling it manually?
@joulev So that’s why. Are you running this getStaticProps by calling it manually?
Transvaal lionOP
I'm calling it in
Main.tsx. Not sure what you mean by "manually"@Transvaal lion I'm calling it in `Main.tsx`. Not sure what you mean by "manually"
As in, how do you use this Main.tsx? Are you calling getStatocProps() manually in your code like
const { props } = getStaticProps();
const { props } = getStaticProps();
@joulev As in, how do you use this Main.tsx? Are you calling getStatocProps() manually in your code like
const { props } = getStaticProps();
Transvaal lionOP
export const getStaticProps: GetStaticProps = () => {
const GitHub = process.env.GITHUB_URL
const LinkedIn = process.env.LINKEDIN_URL
return {
props: {
GitHub,
LinkedIn
}
}
}
export default function Main({ GitHub, LinkedIn }: InferGetServerSidePropsType<typeof getStaticProps>) {
return <>
{/* code */}
</>
}@Transvaal lion tsx
export const getStaticProps: GetStaticProps = () => {
const GitHub = process.env.GITHUB_URL
const LinkedIn = process.env.LINKEDIN_URL
return {
props: {
GitHub,
LinkedIn
}
}
}
export default function Main({ GitHub, LinkedIn }: InferGetServerSidePropsType<typeof getStaticProps>) {
return <>
{/* code */}
</>
}
There are two problems here none of which is related to environment variables.
1. If you make src/pages/components/Main.tsx, you make a route /components/Main. Users can go to https://yourdomain.com/components/Main. That’s absolutely not what you want. So you must move your components outside the pages directory. That pages directory should only be used for page files, not components.
2. getStaticProps only works for page files. If you go to http://localhost:3000/components/Main in your browser now, you will see the URLs working normally (that is, if Main.tsx is accidentally a valid page file). But when you move your component to outside the pages directory, getStaticProps is no longer available
1. If you make src/pages/components/Main.tsx, you make a route /components/Main. Users can go to https://yourdomain.com/components/Main. That’s absolutely not what you want. So you must move your components outside the pages directory. That pages directory should only be used for page files, not components.
2. getStaticProps only works for page files. If you go to http://localhost:3000/components/Main in your browser now, you will see the URLs working normally (that is, if Main.tsx is accidentally a valid page file). But when you move your component to outside the pages directory, getStaticProps is no longer available
Answer
How to fix?
1. Move the Main.tsx file to outside the pages directory.
2. Get rid of getStaticProps, instead use the public prefix for those environment variables. You will display those URLs inside the component that will be rendered in the browser anyway, so there is no need to “protect†it by not using the public prefix
1. Move the Main.tsx file to outside the pages directory.
2. Get rid of getStaticProps, instead use the public prefix for those environment variables. You will display those URLs inside the component that will be rendered in the browser anyway, so there is no need to “protect†it by not using the public prefix