title: NextJS not reading environment variables
body: <p>I have a NextJS app which is running Next.js v12.2.5, but it doesn't seem to be reading environment variables.</p>
  <p>I have created a <code>.env.local</code> file which has:</p>
  <pre><code>NEXT_PUBLIC_SERVER_URL=http://localhost:3001
  </code></pre>
  <p>And my next.config.js is:</p>
  <pre><code>/** @type {import('next').NextConfig} */
  const withTM = require('next-transpile-modules')(['react-daisyui'])
  module.exports = withTM({
      reactStrictMode: true,
      swcMinify: true,
      images: {
          domains: ['placeimg.com'],
      },
      env: {
          NEXT_PUBLIC_SERVER_URL: process.env.NEXT_PUBLIC_SERVER_URL,
      },
  })
  </code></pre>
  <p>In one of my component's index.tsx file, I'm doing the following:</p>
  <pre><code>const apiURL = process.env.NEXT_PUBLIC_SERVER_URL
  
  console.log(process.env.NEXT_PUBLIC_SERVER_URL)
  console.log(apiURL)
  </code></pre>
  <p>On the server once I do <code>npm run dev</code> and go to the route on Chrome, I get the following for my log statements:</p>
  <pre><code>undefined
  undefined
  </code></pre>
  <p>And on the browser I get:</p>
  <pre><code>trips:1          GET http://localhost:3000/trips 404 (Not Found)
  </code></pre>
  <p>Note my NextJS is on <code>http://localhost:3000</code> and my Express backend which I'm trying to connect to is on <code>http://localhost:3001</code></p>
  <p>Why is NextJS not reading the environment variables I have set?</p>