Next.js Почему переменная окружения недоступна в хуке useEffect?

В файле env.local находится переменная окружения INFURA_ID. Внутри компонента, в хуке useEffect пытаюсь получить её process.env.INFURA_ID, но всё время получаю undefined. Код:

'use client';

import styles from './page.module.css';
import { ethers } from 'ethers';
import { useState, useRef, useEffect } from 'react';

export default function Home() {
  const [address, setAddress] = useState('');
  const [balance, setBalance] = useState('');
  const provider = useRef(null);

  useEffect(() => {
    const infuraId = process.env.INFURA_ID;
    provider.current = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/${infuraId}`);
  }, []);

  const balanceBtnClickHandler = async () => {
    try {
      const balance = await provider.current.getBalance(address);
      setBalance(ethers.utils.formatEther(balance));
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <main className='container'>
      <h1>Basic operations with blockchain</h1>
      <fieldset>
        <label htmlFor="eth-address">Please, input wallet address:</label>
        <input type="text" id="eth-address" onChange={(evt) => setAddress(evt.target.value)}></input>
        <button type='button' className={styles.btn} onClick={balanceBtnClickHandler}>
          Get balance
        </button>
      </fieldset>

      {balance && (
        <p>
          {`ETH Balance of ${address} - ${balance} ETH`}
        </p>
      )}
    </main>
  );
}

Почему нет доступа к переменной окружения?