const { MODULE_ID, MODULE_MODE } = publicRuntimeConfig

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

-# .env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

const dbHost = process.env.DB_HOST;

NEXT_PUBLIC_HELLO='I am publically accessable'

NEXT_PUBLIC_HELLO='I am publically accessable'

We don't use NEXTPUBLIC variabels as we don't need to build any of them into client side code

$ MODULE_MODE=standalone npx next start

import { unstable_noStore as noStore } from 'next/cache'
 
export default function Component() {
  noStore()
  // cookies(), headers(), and other dynamic functions
  // will also opt into dynamic rendering, meaning
  // this env variable is evaluated at runtime
  const value = process.env.MY_VALUE
  // ...
}

export default function Component() {
  return (
    <button onClick={() => fetch(process.env.API_URL)... }>
      Click me
    </button>
  )
}

export default function Component() {
  return (
    <button onClick={() => fetch(process.env.NEXT_PUBLIC_API_URL)... }>
      Click me
    </button>
  )
}

'use client'
export default function Foo() {
  return <button onClick={() => console.log(process.env.NEXT_PUBLIC_FOO)}>Click me</button>
}

FOO=asd pnpm dev

FOO="asd"

export default function Home(props: {foo: string}) {
  console.log({foo}) // will always be set
  return <div />
}

export async function getServerSideProps() {
  return {
    props: { foo: process.env.FOO as string }
  }
}

const nextConfig = {
  publicRuntimeConfig: {
    FOO: process.env.FOO,
    // ...