Почему извлечение данных в next.js с помощью жестко заданного API-ключа работает, но не с переменной среды?

Я следовал документации Next.js, поэтому создал файл с именем .env.local и сохранил внутри свой ключ API.

Когда console.info этот ключ отображается в консоли сервера, а не в консоли браузера. Пока я это понимаю.

Проблема: я хочу получить некоторые данные с заданного URL. Как я могу это сделать, не передавая свой API_KEY браузеру?

Я думаю, что эта тема довольно запутанна для новичков (как и я), и я, как и многие другие (так я думаю), были бы вне себя от радости, если бы кто-нибудь смог избавиться от путаницы.

Вот мой код: (Если я жестко запрограммирую свой API_KEY внутри URL-адреса, он отлично работает)

import Haversine from '../components/Haversine'
import LangLat from '../components/LangLat'
import axios from 'axios'
import { useEffect } from 'react'

const key = process.env.API_KEY

const index = () => {
  console.info(key)

  const getLangLat = async () => {
    try {
      const response = await axios.get(
        `https://geocode.search.hereapi.com/v1/geocode?q=wimpfener str 40 backnang&apiKey=${key}`
      )
      console.info(response.data)
    } catch (err) {
      console.error(err.message)
    }
  }
  useEffect(() => {
    getLangLat()
  })
  return (
    <div>
      <Haversine />
      <LangLat />
    </div>
  )
}

export default index