An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Some of Our Sources
- Engadget
- Web Designer Wall
- Smashing Magazine
- Vandelay Design
- Fuel Your Creativity
- Naldz Graphics
- Reencoded
- 24 Ways
- CSS Tricks
- Android Headlines
Help Webnuz
Referal links:
Next.js environment variables
A guide on how to use Next.js environment variables
How to create an environment variable for Next.js
First, create a file with a starting in .env.
Depending on the run-time environment, a custom .env file can be created suce as the following:
.env.development- when runningnext dev.env.production- when runningnext start.env.local- will override.env,.env.development, and.env.production.env.test- when runningjestORcypress- host environment variables - AWS, Heroku, Vecel, etc. provide an interface to set environment variables directly
Next, inside the created .env file, add the variables to be used
VARIABLE_NAME=VALUEThis will be accessible via proccess.env
console.log(process.env.VARIABLE_NAME);Two types of environment variables
- Server-side expose variables
- Browser exposed variables
1. Server-side variables
Every variable set in an .env* file will be available on the server-side. Including the second type
DB_HOST=secret_hostDB_USERNAME=usernameDB_PASSWORD=passwordAbove variables can be used in the server-side code such as getStaticProps, getServerSideProps, or in /api
export function getStaticProps() { connectToDatabase({ host: process.env.DB_HOST, username: process.env.DB_USERNAME, password: process.env.DB_PASSWORD, })}2. Browser exposed variables
Accessing the sample variables above will yield undefine.
In order to make a variable available to the browser, it should be prepended with NEXT_PULIC_.
NEXT_PUBLIC_GOOGLE_ANALYTICS=abcde12345NEXT_PUBLIC_NOT_SO_SECRET_URL=https://example.comEven though there will be more keystrokes, I personally like this convention as it gives a clear distinction of what variables are available to the client side.
It is less likely that I will expose any sensitive information to the user.
As per the variables above, it can be used anywhere in React land. For example, setting the Google analytics key.
// _document.tsx<Head> <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} /></Head>Another usage is for something publicly accessible but should not be committed to the repo.
useEffect(() => { fetch(`${process.env.NEXT_PUBLIC_NOT_SO_SECRET_URL}`) // ...})Although you can still access a browser exposed variable in your server-side code, it will not make sense to do it.
Make sure any sensitive information should not be committed in the repo.
Conclusion
Next.js provides an easy way to set environment variables in any run-time environment. It also provides a good convention to separate variables that can be used on the client-side.
Original Link: https://dev.to/codegino/nextjs-environment-variables-omh
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To