title: What's the best way to fetch data on form submit in Next.js?
body: <p>I can successfully retrieve the meta data from a url using the below code and <a href="https://www.npmjs.com/package/metadata-scraper" rel="nofollow noreferrer">Metadata-scaper</a> when it is hard coded. But how would I go about allowing the user to input the link using the text input and fetching the meta data on form submit?</p>
  <p>I'm getting confused with passing data to the getStaticProps. Thank you any help be hugely appreciated.</p>
  <pre><code>import Head from 'next/head'
  import { useState } from 'react';
  import styles from '../styles/Home.module.css'
  import getMetaData from 'metadata-scraper'
  
  export async function getStaticProps(name) {
    const url = &quot;http://www.bbc.com&quot;
    const data = await getMetaData(url)
    var urlData = JSON.stringify(data);
  
    if (!urlData) {
      return {
        notFound: true,
      }
    }
  
    return {
      props: { urlData }, // will be passed to the page component as props
    }
  }
  
  export default function Home(urlData) {
    const [name, setName] = useState('');
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
      const data = {
        name,
      };
      getStaticProps(name)
      console.log(data);
    };
  
    const myData = JSON.parse(urlData.urlData)
  
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;main&gt;
          &lt;form onSubmit={handleSubmit} className={styles.form}&gt;
            &lt;label htmlFor=&quot;name&quot;&gt;Name:&lt;/label&gt;
            &lt;input
              id=&quot;name&quot;
              type=&quot;text&quot;
              onChange={e =&gt; setName(e.target.value)}
            /&gt;
  
            &lt;button type=&quot;submit&quot;&gt;Send&lt;/button&gt;
          &lt;/form&gt;
        &lt;/main&gt;
        {console.log(myData.title)}
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;title&lt;/th&gt;
            &lt;th&gt;Provider&lt;/th&gt;
            &lt;th&gt;Author&lt;/th&gt;
            &lt;th&gt;url&lt;/th&gt;
            &lt;th&gt;Language&lt;/th&gt;
            &lt;th&gt;Published&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;{myData.title}&lt;/td&gt;
            &lt;td&gt;{myData.provider}&lt;/td&gt;
            &lt;td&gt;{myData.author}&lt;/td&gt;
            &lt;td&gt;{myData.url}&lt;/td&gt;
            &lt;td&gt;{myData.language}&lt;/td&gt;
            &lt;td&gt;{myData.published}&lt;/td&gt;
          &lt;/tr&gt;
  
        &lt;/table&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Update 3/8/2021 - 15:35 GMT</strong></p>
  <p>I've separated out the API Routes to api/meta.js like so but how do I pass the link from the form there?</p>
  <pre><code>import getMetaData from 'metadata-scraper'
  
  export default async function handler(req, res) {
    try {
      const url = 'www.bbc.com'
      res.statusCode = 200;
      const data = await getMetaData(url)
      res.end(JSON.stringify(data));
      console.log(data)
      
    }
    catch (error) {
      res.json(error);
      res.status(405).end();
    }
  }
  </code></pre>
  <p><strong>Updated index.js</strong></p>
  <pre><code>import Head from 'next/head'
  import { useState } from 'react';
  import styles from '../styles/Home.module.css'
  import useSWR from 'swr'
  
  export default function Home() {
  
    const { data } = useSWR('/api/meta', fetch)
    const [name, setName] = useState('');
    
    const handleSubmit = e =&gt; {
      e.preventDefault();
      fetch('/api/meta', {
        method: 'post',
        body: JSON.stringify({
          name: name,
        })
      })
    };
  
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;main&gt;
          &lt;form onSubmit={handleSubmit} className={styles.form}&gt;
            &lt;label htmlFor=&quot;name&quot;&gt;Name:&lt;/label&gt;
            &lt;input
              id=&quot;name&quot;
              type=&quot;text&quot;
              onChange={e =&gt; setName(e.target.value)}
            /&gt;
  
            &lt;button type=&quot;submit&quot;&gt;Send&lt;/button&gt;
          &lt;/form&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>