title: Next.js Environment variables work locally but not when hosted on Kubernetes
body: <p>Have a Next.js project. </p>
  
  <p>This is my next.config.js file, which I followed through with on this guide: <a href="https://dev.to/tesh254/environment-variables-from-env-file-in-nextjs-570b" rel="nofollow noreferrer">https://dev.to/tesh254/environment-variables-from-env-file-in-nextjs-570b</a></p>
  
  <pre><code>module.exports = withCSS(withSass({
      webpack: (config) =&gt; {
          config.plugins = config.plugins || []
          config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack',  {
              loader: 'url-loader',
              options: {
                  limit: 100000,
                  name: '[name].[ext]'
              }}],
          });
  
          config.plugins = [
            ...config.plugins,
  
            // Read the .env file
            new Dotenv({
              path: path.join(__dirname, '.env'),
              systemvars: true
            })
          ]
  
          const env = Object.keys(process.env).reduce((acc, curr) =&gt; {
            acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
            return acc;
          }, {});
          // Fixes npm packages that depend on `fs` module
          config.node = {
            fs: 'empty'
          }
  
           /** Allows you to create global constants which can be configured
          * at compile time, which in our case is our environment variables
          */
          config.plugins.push(new webpack.DefinePlugin(env));
  
          return config
        }
      }),
  
      );
  </code></pre>
  
  <p>I have a .env file which holds the values I need. It works when run on localhost.</p>
  
  <p>In my Kubernetes environment, within the deploy file which I can modify, I have the same environment variables set up. But when I try and identify them they come off as undefined, so my application cannot run.</p>
  
  <p>I refer to it like:</p>
  
  <pre><code>process.env.SOME_VARIABLE
  </code></pre>
  
  <p>which works locally. </p>
  
  <p>Does anyone have experience making environment variables function on Next.js when deployed? Not as simple as it is for a backend service. :(</p>
  
  <p><strong>EDIT:</strong>
  This is what the environment variable section looks like.</p>
  
  <p><strong>EDIT 2:</strong>
  Full deploy file, edited to remove some details</p>
  
  <pre><code>apiVersion: extensions/v1beta1
  kind: Deployment
  metadata:
    annotations:
      deployment.kubernetes.io/revision: "38"
    creationTimestamp: xx
    generation: 40
    labels:
      app: appname
    name: appname
    namespace: development
    resourceVersion: xx
    selfLink: /apis/extensions/v1beta1/namespaces/development/deployments/appname
    uid: xxx
  spec:
    progressDeadlineSeconds: xx
    replicas: 1
    revisionHistoryLimit: 10
    selector:
      matchLabels:
        app: appname
        tier: sometier
    strategy:
      rollingUpdate:
        maxSurge: 1
        maxUnavailable: 1
      type: RollingUpdate
    template:
      metadata:
        creationTimestamp: null
        labels:
          app: appname
          tier: sometier
      spec:
        containers:
        - env:
          - name: NODE_ENV
            value: development
          - name: PORT
            value: "3000"
          - name: SOME_VAR
            value: xxx
          - name: SOME_VAR
            value: xxxx
          image: someimage
          imagePullPolicy: Always
          name: appname
          readinessProbe:
            failureThreshold: 3
            httpGet:
              path: /healthz
              port: 3000
              scheme: HTTP
            initialDelaySeconds: 5
            periodSeconds: 10
            successThreshold: 1
            timeoutSeconds: 1
          resources:
            requests:
              cpu: 100m
              memory: 100Mi
          terminationMessagePath: /dev/termination-log
          terminationMessagePolicy: File
        dnsPolicy: ClusterFirst
        restartPolicy: Always
        schedulerName: default-scheduler
        securityContext: {}
        terminationGracePeriodSeconds: 30
  status:
    availableReplicas: 1
    conditions:
    - lastTransitionTime: xxx
      lastUpdateTime: xxxx
      message: Deployment has minimum availability.
      reason: MinimumReplicasAvailable
      status: "True"
      type: Available
    observedGeneration: 40
    readyReplicas: 1
    replicas: 1
    updatedReplicas: 1
  </code></pre>