Managing Your Environment Variables on Your Sitecore JSS Projects With Next.js

There’s a common problem I think everyone who jumps into Next.js faces when they need to add environment variables into their project. Normally, once you have your environment variables setup and the packages needed to allow you to access them. Right of the bat you should be able to access them on any of your components. The problem is that in Next.js these can by default are only accessible on the server. There are a couple of ways to solve this problem. I’ll introduce three ways on how you can easily get them accessible into the different renderings you have created for your JSON Renderings.

How to Handle Non-Secret Environment Variables

I’ll first talk about the way that is quite known for Next.js users that do not involve Sitecore. This will involve using the next.config.js file where a lot of the configuration files are also found.

Using the next.config.js Configuration File

You can easily find this file inside the src folder. Inside the file you will find the nextConfig object which will have tons of configurations already setup for your Sitecore project. Navigate your way into an env key which will already have PUBLIC_URL: publicUrl . The cool thing is you can add more variables inside.

Always remember that the environment variables specified in this way will always be included in the JavaScript bundle. Next.js will replace all the process.env.<CUSTOM_KEY> with the variable set at build time.

Using NEXT_PUBLIC

By prefixing your variable names with NEXT_PUBLIC_ you allow them to be bundled for the browser to use. Environment variables that do not use NEXT_PUBLIC_ are only available to the Node.js environment.

Another cool way of adding it using the config generator Sitecore created.

Using the generate-config.ts File Sitecore Provided

This way is something I discovered while looking for the different environment variables Sitecore has setup. Inside the scripts/generate-config.ts file, you will find code that is responsible for creating the config.ts file you will get inside the temp folder. Around line 13 you will have to define the new environment variables you have in your env here. Here’s an example of that file below.

const defaultConfig: JssConfig = {
  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
  sitecoreNextApiKey: process.env[`${constantCase('sitecoreNextApiKey')}`],
  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
  jssAppName: process.env[`${constantCase('jssAppName')}`],
  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
  graphQLNextEndpoint: process.env[`${constantCase('graphQLNextEndpoint')}`],
  layoutServiceConfigurationName: process.env[`${constantCase('layoutServiceConfigurationName')}`],
};

It’s easy enough to understand, you will just have to know how the constantCase() will parse your environment variable. A simple example is from the variable named THIS_ENVIRONMENT_VARIABLE it will create a key that looks like thisEnvironmentVariable . Then on build it will add it in your config.js file and a new line will look like this.

config.layoutServiceConfigurationName = process.env.LAYOUT_SERVICE_CONFIGURATION_NAME || 'sxa-jss',

A New Updated Way of Handling Secret Environment Variables

Using the getStaticProps/getServerSideProps Function

These are not the getStaticProps or getServerSideProps functions provided by Next.js which can only be used on the page level. These are custom functions which are only available when using JSS. With the latest release JSS 21.6.4 it fixes and introduces a way to keep information on getStaticProps or getServerSideProps not included in the client-side bundle. With these we can fetch data on the component level.

If a component exports these functions, the ComponentPropsService class runs the function. You will notice that the typescript used is different from the functions provided by Next.js. These are GetStaticComponentProps and GetServerSideComponentProps which can be imported like below.

import { GetServerSideComponentProps, GetStaticComponentProps } from '@sitecore-jss/sitecore-jss-nextjs';

To apply these in your component, you will have to add in the function inside the component file, making sure to export it.

export const getStaticProps: GetStaticComponentProps = async () => {
  return {
    baseFormUrl: <ADD_URL_HERE>,
  };
};

The code above will allow you to access the data via props. It will looks like this code below.

type ContentBlockProps = ComponentProps & {
  baseFormUrl?: string;
};

const ContentBlock = ({ baseFormUrl }: ContentBlockProps): JSX.Element => (
  <div className="contentBlock">
    <Text tag="h2" className="contentTitle" field={fields.heading} />
  </div>
);

Does it Really Matter?

We usually store sensitive information within our environment variables and because of this we would want to always make sure it’s secured. Learning the different ways of being able to access your environment variables will give us the tools to make a better decision based on what fits with our project or the data involved.