Hey Team!!

I have an ecommerce project where I have different stores. It was built in vue-storefront earlier and now we are migrating it to nextjs 14.

Earlier it was using json based config files to handle different settings on different stores.

For example, currency for each store is different, some stores have auto complete, some don’t, some stores uses certain payment methods and some dont. All of this was configurable via json files in vue-storefront. It uses a package (https://www.npmjs.com/package/config).

I want a similar behaviour in my nextjs project but there are few problems I am facing

- Need some sort of utilities which are shared on both client and server
- This config package priorities config files based on NODE_ENV, so I need to set NODE_ENV to make different builds for different environments. (We have a staging environment and a prod environment, also one for local/development)

So far I have tried adding config on server and then using webpack to inject it on client, but it looks very weird.

I tried to get config from server and set it on client but in this case I had to use different utilities for both RSC and CC.

Not able to set NODE_ENV (I tried setting it by prepending it in build command but that gives a warning as it’s not recommended).

Similarly setting it in .env doesn’t work either.

So I am looking for a scalable solution which I can use on both client and server components without any issues.