Can you share your code?

cant share the code as it contains secrets, but it is like this:

.env

#Google MAPS API KEY
PLACES_API_KEY="Key"

next config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    //Google MAPS API KEY
    PLACES_API_KEY: process.env.PLACES_API_KEY,
  },
  images: {
    domains: [
    ],
  },
};

module.exports = nextConfig;

I have never used nextConfig for defining env variables. Can't you just access them from app by:

process.env.ENV_VARIABLE

Code where you are using the api ke

yes you can

I wasn't even sure why you were using config for env variables

Try to create /src/constants/env.ts file, and make your env variables type-safe:

const PLACES_API_KEY = process.env.PLACES_API_KEY ?? null
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"

export {PLACES_API_KEY, BASE_URL}

If you import non-prefixed constant in client component it will be null since it's not exposed to the client, and in server components it will work as usual but will be type-safe. No need for using next.config.js.

the next verison is 13.4.3 so there are no server components

if you are using app router there are

the code is very old, i came up with this solution of:
shifting all the code which needs env to api folder, then hitting it to get the data

but thats just alot of manual work

any other alternative?

can we use app router in next 13.4.3?

Yes I believe it's the first version in which it is stable

i am using pages directory btw

so i dont have any src folder

creating a high level constants file will work?

I think it will

i still can find my key in the sources folder

by doing this:

export const PLACES_API_KEY = process.env.PLACES_API_KEY;

axios
    .get(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${PLACES_API_KEY}`
    )

can you share your entire file where you are using the key

.env

PLACES_API_KEY=key

constants.js

export const PLACES_API_KEY = process.env.PLACES_API_KEY;

customHook.js

import { PLACES_API_KEY } from "@/constants";

 axios
    .get(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${PLACES_API_KEY}`
    )

this is it

keys getting exposed

any thing?

Why not use env.d.ts

if you're sure it'll be there

If you're not sure, then this is the best solution

Can you share more part of your code, like where you are using this function

custom hook file is where i am using the env variable

let me share the next config file

It'll obv be visible to client, because hooks are running on client side

so basically what i want is

i want to call an api from client using a env variable but don't want that variable to he leaked on the client side

is it possible, or not, i dont think so

Its not possible. If you call it from client, variable will be released

and yes, its a xy problem https://xyproblem.info/

got it, thanks

for now sticking to shifting the code to api folder

Mark solution please

@Gray Kingbird are you gonna call api from your components or pages? the correct way to do data fetch is on the server side, in page router you have next.js specific functions getStaticProps(), getServersideProps() there you can access to the envs

from the components

so thats where was the issue