Problem with environment variable
Unanswered
Mrigal carp posted this in #help-forum
Mrigal carpOP
Hello, I have a problem, if you can help me. The environment variable in the API key, reads only at the beginning, after it becomes undefined:
import Head from "next/head";
import Results from "../../components/Results";
import styles from "../books/styles.module.css";
const Games = ({results, search}) => {
return (<div data-testid="games">
<Head>
<title>{search !== '' ?
</Head>
{results === 'Oups nous avons un problème !' ? <p className={styles.error}>{results}</p> : <Results results={results}/>}
</div>)
}
Games.getInitialProps = async (ctx) => {
const search = ctx?.query?.search ?? "";
if (search !== ''){
try {
const response = await fetch(
const datas = await response.json();
return {
results: datas.Search,
search
}
}catch(e){
return {
results: 'Oups nous avons un problème !',
search
}
}
}
else {
return {
results: [],
search
}
}
}
export default Games;
import Head from "next/head";
import Results from "../../components/Results";
import styles from "../books/styles.module.css";
const Games = ({results, search}) => {
return (<div data-testid="games">
<Head>
<title>{search !== '' ?
${search} - Jeux | MY LIBRARY : Jeux | MY LIBRARY}</title></Head>
{results === 'Oups nous avons un problème !' ? <p className={styles.error}>{results}</p> : <Results results={results}/>}
</div>)
}
Games.getInitialProps = async (ctx) => {
const search = ctx?.query?.search ?? "";
if (search !== ''){
try {
const response = await fetch(
https://www.omdbapi.com/?apikey=${process.env.API_KEY}&s=${search}&type=game);const datas = await response.json();
return {
results: datas.Search,
search
}
}catch(e){
return {
results: 'Oups nous avons un problème !',
search
}
}
}
else {
return {
results: [],
search
}
}
}
export default Games;
2 Replies
@Mrigal carp Hello, I have a problem, if you can help me. The environment variable in the API key, reads only at the beginning, after it becomes undefined:
import Head from "next/head";
import Results from "../../components/Results";
import styles from "../books/styles.module.css";
const Games = ({results, search}) => {
return (<div data-testid="games">
<Head>
<title>{search !== '' ? `${search} - Jeux | MY LIBRARY` : `Jeux | MY LIBRARY`}</title>
</Head>
{results === 'Oups nous avons un problème !' ? <p className={styles.error}>{results}</p> : <Results results={results}/>}
</div>)
}
Games.getInitialProps = async (ctx) => {
const search = ctx?.query?.search ?? "";
if (search !== ''){
try {
const response = await fetch(`https://www.omdbapi.com/?apikey=${process.env.API_KEY}&s=${search}&type=game`);
const datas = await response.json();
return {
results: datas.Search,
search
}
}catch(e){
return {
results: 'Oups nous avons un problème !',
search
}
}
}
else {
return {
results: [],
search
}
}
}
export default Games;
process.env.API_KEY is a server-side env var, so it is not available on the clientgetInitialProps is run both on the server and on the client. On the server it can access the api key, but since the api key is a server-side env var, the run on the client cannot access this keyhow to fix:
* use getServerSideProps (recommended)
* if the api key is not a secret then you can rename it to
NEXT_PUBLIC_API_KEY then you will have access to it everywhere