Next.js: How to set env that can be accessed both by server and client?

[zhaoyao91]

In Meteor, we can use the SETTINGS env.
In create-react-app app, we can set REACT_APP_XXX.

How to do similar things in Next.js?

[timneutkens]

Please have a look at https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration 😄

[sedubois]

But I do think this raises a valid concern, that something easier ought to be baked-in. Why Next.js couldn't have a similar env var?

[zhaoyao91]

I have tried this in my app, but it complains:

project structure

.babelrc

env-config.js

usage in settings.js

you can have a try with this repo
https://github.com/zhaoyao91/docit/tree/show-global-env-problem

[timneutkens]

Lets re-open it then.

[arunoda]

Here's how to fix this problem.

You need to have a value for "APP_SERVER_URL" always. So, do something like this:

module.exports = {
  APP_SERVER_URL: process.env.APP_SERVER_URL || 'http://some.url'
};

And make sure to clean the babel cache by:

• Running rm -rf node_modules/.cache or
• Changing the content inside the page.

[arunoda]

@zhaoyao91 Reopen again, it this doesn't fix your app.

[dariye]

I'm also getting the same error @arunoda . This issue might stem from a recent commit/update.

[arunoda]

@pauldariye did you follow my steps here: https://github.com/zeit/next.js/issues/1415#issuecomment-286489055

If that didn't work well, send me a sample repo.

[ex3ndr]

Can cache cleaning be avoided?

[timneutkens]

Check https://github.com/zeit/next.js/tree/canary/examples/with-universal-configuration-runtime

[griffithtp]

This might be what you are looking for ?
https://github.com/zeit/next.js#exposing-configuration-to-the-server--client-side