title: Secure client side env variables in Next JS
body: <p>I am worried that my Keys for various functions are exposed to the client. I have this function</p>
  <pre><code>onRunOCR = async (event) =&gt; {
     const client = new SomeAPI({
       credentials: {
         accessKeyId: 'ffg23f23f23f32f23',
         secretAccessKey: 'GZMIKGDoISDGpsgjMIPSGMDIPG',
       },
     })
  }
  </code></pre>
  <p>This is basically an on click function in my class component. This is fully exposed to anyone right?
  How can I secure it. Would <code>NEXT_PUBLIC_ACCESS_KEY</code> work or is that the same just stores it as a variable?</p>
  <p>Thanks</p>