https://github.com/thdk/nextjs-envs-demo
https://github.com/thdk/nextjs-envs-demo
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/thdk/nextjs-envs-demo
- Owner: thdk
- Created: 2023-06-27T20:44:07.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-03T17:32:37.000Z (almost 3 years ago)
- Last Synced: 2024-12-29T13:48:27.707Z (over 1 year ago)
- Language: JavaScript
- Size: 54.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Using environment variables with nextjs
Inspired by https://www.saltycrane.com/blog/2021/04/buildtime-vs-runtime-environment-variables-nextjs-docker/
## Setup
Create a dummy nextjs 12 app
```sh
npx create-next-app@12 nextjs-envs-demo && cd nextjs-envs-demo && npm i next@12
```
Log two envrionment variables from with the render method of your App component:
```js
// _app.js
function MyApp({ Component, pageProps }) {
console.log('FOO', process.env.FOO);
console.log('NEXT_PUBLIC_FOO', process.env.NEXT_PUBLIC_FOO);
return
}
export default MyApp
```
## SSG Pages (Static Site Generation)
Run following commands and visit: [http://localhost:3000]
| set env at | cmd | log in browser console | log in server terminal at build time |
| --- | --- | --- | --- |
| none |```npm run dev```| undefined | |
| both |```FOO=bar npm run dev```| undefined | bar (runtime server terminal)|
| build time|```FOO=bar npm run build; npm run start```| undefined | bar |
| run time|```npm run build; FOO=bar npm run start```| undefined | |
| both |```NEXT_PUBLIC_FOO=bar npm run dev```| bar | bar (runtime server terminal)|
| build time |```NEXT_PUBLIC_FOO=bar npm run build; npm run start```| bar | bar |
| run time |```npm run build; NEXT_PUBLIC_FOO=bar npm run start```| undefined | |
## SSR (Server Side Rendered)
```js
// pages/server.js
export function getServerSideProps() {
return {props: {}};
}
```
Run following commands and visit: [http://localhost:3000/server]
| set env at | cmd | log in browser console | log in server terminal at run time |
| --- | --- | --- | --- |
| none |```npm run dev```| undefined | undefined |
| both|```FOO=bar npm run dev```| undefined | bar |
| build time |```FOO=bar npm run build; npm run start```| undefined | undefined |
| run time |```npm run build; FOO=bar npm run start```| undefined | bar |
| both |```NEXT_PUBLIC_FOO=bar npm run dev```| bar | bar |
| build time |```NEXT_PUBLIC_FOO=bar npm run build; npm run start```| bar | bar |
| run time |```npm run build; NEXT_PUBLIC_FOO=bar npm run start```| undefined | bar |