React/Next.js recommended way to set constants such as backend API URLs

Question

I am looking through next.js documentation and trying to understand what the suggested approach is for setting URLs that change in different environments. Mostly, I want to ensure that I'm pointing backend URLs correctly in development versus production.

I suppose you can create a constants configuration file, but is there a supported, best practice for this?

Grindlay

nextjs.org/docs/api-reference/next.config.js/… ? – Galagalactagogue

Since Next.js 9.4, the recommended way to configure environment variables is documented in nextjs.org/docs/basic-features/environment-variables. – Ubiquitarian

Answer 1

You can configure your next app using next-runtime-dotenv, it allows you to specify serverOnly / clientOnly values using next's runtime config.

Then in some component

import getConfig from 'next/config'

const {
  publicRuntimeConfig: {MY_API_URL},  // Available both client and server side
  serverRuntimeConfig: {GITHUB_TOKEN} // Only available server side
} = getConfig()

function HomePage() {
  // Will display the variable on the server’s console
  // Will display undefined into the browser’s console
  console.log(GITHUB_TOKEN)

  return (
    <div>
      My API URL is {MY_API_URL}
    </div>
  )
}

export default HomePage

If you don't need this separation, you can use dotenv lib to load your .env file, and configure Next's env property with it.

// next.config.js

require('dotenv').config()
module.exports = {
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
  },
}

Check this with-dotenv example.

Jair

Answer 2

Open next.config.js and add publicRuntimeConfig config with your constants:

module.exports = {
  publicRuntimeConfig: {
// Will be available on both server and client
yourKey: 'your-value'
},
}

you can call it from another .js file like this

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()
console.log(publicRuntimeConfig.yourKey)

or even call it from view like this

${publicRuntimeConfig.yourKey}

Mathematician

This feature is deprecated – Sinfonietta

Answer 3

There are multiple options depending on whether you'd like to check the constants in your version control system or not.

1. Checking in via the next.config.js (env property):

   You can add any key/value pair in this file like this:

   module.exports = {
     env: {
       customKey: 'my-value',
     },
   }
   

   Now you can access process.env.customKey in your code. For example:

   function Page() {
     return <h1>The value of customKey is: {process.env.customKey}</h1>
   }
   
   export default Page
   

2. Keeping the constants in a separate .env.local file to differentiate your local and production environments:

   You can add any key/value pair in this file like this:

   DB_HOST=localhost
   DB_USER=myuser
   DB_PASS=mypassword
   

   These variables will also be accessible via the environment variables. For example:

   myDB.connect({
     host: process.env.DB_HOST,
     username: process.env.DB_USER,
     password: process.env.DB_PASS,
   })
   

Sinfonietta