Hi @queen halo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Reading Runtime env
grim flameBOT
Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Next.js documentation on Environment Variables (https://nextjs.org/docs/app/building-your-application/configuring/environment-variables) for more information.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
queen halo
@grim flame Can we maybe use getServerSideProps in _document.js for this?
grim flameBOT
Let me check the knowledge base for you. One moment! :books:
No, you cannot use getServerSideProps in _document.js. The _document.js file is specifically for customizing the HTML document structure and does not support data fetching methods like getServerSideProps. You can refer to the Next.js documentation on Custom Document (https://nextjs.org/docs/advanced-features/custom-document) for more information.
If you need to fetch data or access environment variables without the NEXT_PUBLIC_ prefix, you should do it in a server-side context, such as using getServerSideProps or getStaticProps in your page components, not in _app.js or _document.js.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
queen halo
@grim flame what approach can I take then to read env variable on frontend side without using NEXT_PUBLIC prefix?
grim flameBOT
Let me check the knowledge base for you. One moment! :books:
To access environment variables on the frontend side without using the NEXT_PUBLIC_ prefix, you can create an API route in your Next.js application and fetch the data from there. This way, you can keep your environment variables secure and only expose the data you need.
- Create an API route, for example,
pages/api/env.js:
export default async function handler(req, res) {
const myEnvVariable = process.env.MY_ENV_VARIABLE;
res.status(200).json({ myEnvVariable });
}
- In your frontend component, fetch the data from the API route:
import { useEffect, useState } from 'react';
function MyComponent() {
const [myEnvVariable, setMyEnvVariable] = useState(null);
useEffect(() => {
async function fetchData() {
const res = await fetch('/api/env');
const data = await res.json();
setMyEnvVariable(data.myEnvVariable);
}
fetchData();
}, []);
return (
<div>
{myEnvVariable ? (
<p>The value of myEnvVariable is: {myEnvVariable}</p>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default MyComponent;
This approach allows you to access the environment variable without exposing it directly to the browser.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
queen halo
@grim flame But wouldn't this be insecure for cases where the env might have api key or some token?
grim flameBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you're correct. Exposing sensitive data like API keys or tokens through an API route can be insecure. The example I provided is for non-sensitive data. For sensitive data, you should handle it server-side using getServerSideProps or getStaticProps in your page components, and avoid exposing it to the frontend.
If you need to use sensitive data on the frontend, consider creating server-side functions (API routes) that use the sensitive data to perform the required actions, and then call those functions from the frontend. This way, you can keep the sensitive data secure and only expose the results of the actions.
Remember that using the NEXT_PUBLIC_ prefix will expose the variable to the browser, so avoid using it for sensitive data.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
queen halo
@grim flame So can getStaticProps be used in _app.js?
grim flameBOT
Let me check the knowledge base for you. One moment! :books:
No, getStaticProps cannot be used in _app.js. The _app.js file is used to initialize pages and is not meant for data fetching methods like getStaticProps. You should use getStaticProps in your individual page components instead.
For more information, you can refer to the Next.js documentation on Custom App (https://nextjs.org/docs/pages/building-your-application/routing/custom-app) and getStaticProps (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
queen halo
@grim flame does using getInitialProps in _document cause to opt out of automatic static optimization?
grim flameBOT
Let me check the knowledge base for you. One moment! :books: