How i can dynamically set env variable?

Unanswered

Sloth bear posted this in #help-forum

Sloth bearOP

2024-02-08T21:26:25.000Z

So i have env variable set in my next.config.js file like:

env: {
      DB_HOST: 'http://localhost:4000',
    },

This variable is used in various components to connect my database. I want this variable to be changed depending which subdomain user is having, to connect into correct database. Whats the best way to do this?

19 Replies

Snowshoe

2024-02-09T16:23:34.000Z

you can't change an environment variable via code. You could use DB_HOST as a starting point, and then change it depending on the subdomain, or store that variants in your database

@Snowshoe you can't change an environment variable via code. You could use DB_HOST as a starting point, and then change it depending on the subdomain, or store that variants in your database

Sloth bearOP

2024-02-10T16:08:31.000Z

how would you do that, i mean changing it depending on the subdomain?

Sloth bearOP

2024-02-11T09:56:03.000Z

Anyone please? I have tried to solve this for so long now

@Sloth bear Anyone please? I have tried to solve this for so long now

Kokoni

2024-02-11T13:10:23.000Z

Hey:) the answer is: don't rely on env vars! Parse out the values of the subdomain manually and put it in some sort of store to match against.

So for instance you might have a db table for all of your websites called "Global" and a table in global called "Config." The ID row of Config is the subdomain, and the cols of config are various bits of information such as... "database_url"

@Kokoni So for instance you might have a db table for all of your websites called "Global" and a table in global called "Config." The ID row of Config is the subdomain, and the cols of config are various bits of information such as... "database_url"

Sloth bearOP

2024-02-11T13:59:02.000Z

Thanks for your answer. Yeah seems like env variables here are not an option, but parsing subdomain or current url is the thing im struggling at the moment, because api urls are used in client and server components

Sloth bearOP

2024-02-11T17:45:49.000Z

Still havent solved this, any assistance is appreciated

@Sloth bear Still havent solved this, any assistance is appreciated

Brown bear

2024-02-11T17:47:11.000Z

could you do something like this:
process.env.DB_HOST + subdomain

and dynamically change the subdomain

ex:

'http://localhost:4000' + '/home'

@Sloth bear Thanks for your answer. Yeah seems like env variables here are not an option, but parsing subdomain or current url is the thing im struggling at the moment, because api urls are used in client and server components

Kokoni

2024-02-11T19:30:40.000Z

What did you mean by this?

Have you used useRouter() and get the location?

@Kokoni Have you used useRouter() and get the location?

Brown bear

2024-02-11T19:38:11.000Z

https://nextjs.org/docs/app/api-reference/functions/use-pathname

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  const dbPath = process.env.DB_HOST + pathname

return(
//your component here
)
}

Kokoni

2024-02-11T19:39:53.000Z

Usepathname won't work for the whole URL, it'll only return the URL segments.

So it won't work for subdomains.

Brown bear

2024-02-11T19:40:36.000Z

hmm

Kokoni

2024-02-11T19:41:23.000Z

Userouter should get that

Getting URL from server actions/server components is an antipattern from what I remember

@Kokoni Userouter should get that

Brown bear

2024-02-11T19:41:53.000Z

it might, i'm not sure