title: Adding elements to list in Nextjs from a json response
body: <p>I'm currently working on a <strong>Nextjs</strong> project, where I have to get a response from an <strong>API</strong> and convert it into a <strong>JSON response</strong>.</p>
  <p>Let's say this is an API, <a href="https://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/users</a></p>
  <p>I fetch data from this API using getStaticProps,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fetch_url = "https://jsonplaceholder.typicode.com/users"
  
  export const getStaticProps = async () =&gt; {
    const res = await fetch(fetch_url);
    const data = await res.json();
  
    return {
      props: { worksheets_data: data },
    };
  };</code></pre>
  </div>
  </div>
  </p>
  <p>I want only unique usernames from the JSON response and display them on my webpage.</p>
  <p>Help me with this! Thanks in advance!</p>