title: Using .env.local file for API Credentials to connect to my Airtable DB
body: <p>This is my very first time using a .env file and I'm in the process of learning Next.js.</p>
  <p>I have tried reading the Next.js docs and searching online but I hear they updated Next.js recently and everything changed and I'll admit I am currently way out of my depth.</p>
  <p>Here's my .env.local file (changed api details for obvious reasons)</p>
  <pre><code># .env
  DB_URL=https://api.airtable.com/v0/
  DB_APPID=app1234567890
  DB_TABLE=Table%1234567890
  DB_KEY=key1234567890
  </code></pre>
  <p>Here's my create.js page:</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import Router, { withRouter } from 'next/router'
  
  export async function getStaticProps() {
    const db = await myDB.connect({
      AirBaseUrl: process.env.DB_URL,
      AirAppId: process.env.DB_APPID,
      AirTable: process.env.DB_TABLE,
      AirKey: process.env.DB_KEY,
    })
  }
  
  const Create = () =&gt; {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const [author, setAuthor] = useState('mario');
  
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      const blog = { title, body, author };
  
      fetch(AirBaseUrl + AirAppId + &quot;/&quot; + AirTable, {
        method: 'POST',
        headers: {
          'Authorization': &quot;Bearer &quot; + AirKey,
          &quot;Content-Type&quot;: &quot;application/json&quot;
        },
        data: {
          &quot;records&quot;: [
            {
              &quot;fields&quot;: {
                &quot;Notes&quot;: &quot;Notes posted here&quot;,
                &quot;Company Name&quot;: &quot;Joe Blogs&quot;
              }
            }
          ]
        },
        body: JSON.stringify(blog)
      }).then(() =&gt; {
        // history.go(-1);
        Router.push({
          pathname: '/'
        })
      })
    }
  
    const getAirtable = (e) =&gt; {
      e.preventDefault();
      const blog = { title, body, author };
  
      fetch(AirBaseUrl + AirAppId + &quot;/&quot; + AirTable, {
        method: 'GET',
        headers: {
          'Authorization': &quot;Bearer &quot; + AirKey,
          &quot;Content-Type&quot;: &quot;application/json&quot;
        },
        body: JSON.stringify(blog)
      }).then(() =&gt; {
        // history.go(-1);
        Router.push({
          pathname: '/'
        })
      })
    }
  
    return (
      &lt;div className=&quot;create&quot;&gt;
        &lt;h2&gt;Add a New Blog&lt;/h2&gt;
        &lt;div&gt;Airtable info to be posted here&lt;/div&gt;
        &lt;button onClick={getAirtable}&gt;Get Airtable Data&lt;/button&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;label&gt;Blog title:&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            required
            value={title}
            onChange={(e) =&gt; setTitle(e.target.value)}
          /&gt;
          &lt;label&gt;Blog body:&lt;/label&gt;
          &lt;textarea
            required
            value={body}
            onChange={(e) =&gt; setBody(e.target.value)}
          &gt;&lt;/textarea&gt;
          &lt;label&gt;Blog author:&lt;/label&gt;
          &lt;select
            value={author}
            onChange={(e) =&gt; setAuthor(e.target.value)}
          &gt;
            &lt;option value=&quot;mario&quot;&gt;mario&lt;/option&gt;
            &lt;option value=&quot;yoshi&quot;&gt;yoshi&lt;/option&gt;
          &lt;/select&gt;
          &lt;button&gt;Add Blog&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default Create;
  </code></pre>
  <p>I'm currently getting an error: <code>myDB is not defined</code></p>
  <p>I also can't workout how to use the credentials from .env.local</p>
  <p>I have copied this text from the docs:</p>
  <pre><code>export async function getStaticProps() {
    const db = await myDB.connect({
      AirBaseUrl: process.env.DB_URL,
      AirAppId: process.env.DB_APPID,
      AirTable: process.env.DB_TABLE,
      AirKey: process.env.DB_KEY,
    })
  }
  </code></pre>
  <p>But I'm not sure where myDB should be sense my error.</p>
  <p>Finally, you'll notice in the code I have a GET function and a POST function, when you click the button, it should post the GET info in the div but I can't quite workout who I would go about that. The POST function should post details to the Airtable DB when it's click. I've just added dummy info for now.</p>
  <p>Can anyone enlighten me as to how I get over the finish line?</p>