Accessing env variable defined in next.config.js

Answered

GetPsyched posted this in #help-forum

2023-09-22T14:29:04.000Z

I have defined my next config as:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: { appDir: true },
  env: {
    breadboardURL: 'https://breadboard.up.railway.app',
  },
};

I am trying to use this env in a fetcher utility as:

export const fetcher = async (url: URL | RequestInfo) => {
  const response = await fetch(process.env.breadboardURL + url);
  const responseJson = await response.json();
  // snip

Answered by riský

just put a ! at the end of the name to make it quiet: process.env.NEXT_PUBLIC_BREADBOARD_URL!

View full answer

66 Replies

GetPsychedOP

2023-09-22T14:37:20.000Z

I have also tried using .env.local:

export const fetcher = async (url: URL | RequestInfo) => {
  const response = await fetch(process.env.NEXT_PUBLIC_BREADBOARD_URL + url);
  const responseJson = await response.json();
  // snip

The linter says process is an undefined variable

Cannot find name 'process'. Do you need to install type definitions for node? Try npm i --save-dev @types/node.

riský

2023-09-22T14:46:22.000Z

~~is NEXT_PUBLIC_BREADBOARD_URL defined in your .env file...~~

ahh you are getting TS errors

@GetPsyched > Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

riský

2023-09-22T14:47:24.000Z

and you have installed said types?

GetPsychedOP

2023-09-22T14:48:15.000Z

bruh. I didn't have node_modules in its entirety

riský

2023-09-22T14:48:28.000Z

well that would make ts angry...

GetPsychedOP

2023-09-22T14:48:40.000Z

yeah, me as well. wtf am I doing lmao

riský

2023-09-22T14:48:52.000Z

so install it?

GetPsychedOP

2023-09-22T14:49:01.000Z

yeah it's downloading shit

nothing in the cache because this is my first time developing web stuff after formatting my OS

@riský and you have installed said types?

GetPsychedOP

2023-09-22T14:51:39.000Z

is this because I only have .env.local and not .env.production?

because I have it defined in .env.local

riský

2023-09-22T14:52:11.000Z

just put a ! at the end of the name to make it quiet: process.env.NEXT_PUBLIC_BREADBOARD_URL!

Answer

riský

2023-09-22T14:52:22.000Z

but you should actualy validate that it exists...

GetPsychedOP

2023-09-22T14:52:27.000Z

I don't like the idea of making my linter shut up. Sounds like a recipe for disaster

riský

2023-09-22T14:53:09.000Z

like make a env.ts file that exports the envs after making sure that they exist (and corectly types them as existent)

GetPsychedOP

2023-09-22T14:53:18.000Z

oh that's the problem?

riský

2023-09-22T14:53:25.000Z

like this is a popular one: https://env.t3.gg/

@GetPsyched oh that's the problem?

riský

2023-09-22T14:53:30.000Z

yeah...

@GetPsyched I don't like the idea of making my linter shut up. Sounds like a recipe for disaster

riský

2023-09-22T14:54:04.000Z

it isn't making it shut up, just telling it that the variable is defined (should only use when you can fully know tho)

GetPsychedOP

2023-09-22T14:59:30.000Z

I see

Thanks

@GetPsyched Thanks

riský

2023-09-22T15:04:48.000Z

so it works now ðŸŽ‰

GetPsychedOP

2023-09-22T15:18:08.000Z

Yeah, I didn't want to go as far as using a env.ts

riský

2023-09-22T15:18:48.000Z

i would say in the long term, it is a good investment (as it is a good place to see what is required to set / should set)

GetPsychedOP

2023-09-22T15:19:48.000Z

Fair enough

I'll do it later as a refactor

I'm just trying to push out basic functionality rn without sacrificing code quality too much

GetPsychedOP

2023-09-22T15:26:14.000Z

uh I'm still getting these errors in my console even though the URL is fine:

error - TypeError: Failed to parse URL from /clubs
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  type: 'TypeError',
  page: '/clubs/Technobyte'
}
error - TypeError: Failed to parse URL from /clubs
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  type: 'TypeError',
  page: '/clubs/Microbus'
}

riský

2023-09-22T15:27:15.000Z

you shouldn't be using relative urls for server fetch

GetPsychedOP

2023-09-22T15:27:16.000Z

I printed the URL it's fetching and it seems to be fine

riský

2023-09-22T15:27:22.000Z

o.O

@riský you shouldn't be using relative urls for server fetch

GetPsychedOP

2023-09-22T15:27:34.000Z

it's not relative though. I'm just passing it to my fetcher util

riský

2023-09-22T15:27:42.000Z

i just saw

GetPsychedOP

2023-09-22T15:27:47.000Z

// fetcher.ts
export const fetcher = async (url: URL | RequestInfo) => {
  console.log(process.env.NEXT_PUBLIC_BREADBOARD_URL! + url);
  const response = await fetch(process.env.NEXT_PUBLIC_BREADBOARD_URL! + url);
  const responseJson = await response.json();

  if (!response.ok) {
    const error = new Error('An error has occured while fetching data.');
    error.cause = responseJson.errors;
    throw error;
  }

  return responseJson.data;
};

and I call it like: const club: Club = await fetcher(``/clubs/${name}``);

riský

2023-09-22T15:28:20.000Z

does NEXT_PUBLIC_BREADBOARD_URL end in a /?

GetPsychedOP

2023-09-22T15:28:27.000Z

nope

@GetPsyched I printed the URL it's fetching and it seems to be fine

GetPsychedOP

2023-09-22T15:28:36.000Z

you can see the resolved URL here

Wait I think I might have removed the full length from somewhere that's not using the fetcher util

  const {
    data: courses,
    isLoading,
    error,
  }: { data: Course[] | undefined; isLoading: boolean; error: any } = useSWR(
    '/courses',
    fetcher
  );