Next.js, getStaticProps not working with component but does with page

getStaticProps works only for page components inside pages folder. And the data is fetched at build time.
Here is what the documentation says:

getStaticProps can only be exported from a page. You cannot export it from non-page files, _app, _document, or _error.

If you wanna use UserTransactionsComponent as a normal component, you should use useEffect and make the API call on mount:

import {useState, useEffect} from "react"

function UserTransactionsComponent() {

  const [data, setData]=useState();

  useEffect(()=>{
    async function fetchData() {
      const res = await fetch(
        'https://proton.api.atomicassets.io/atomicmarket/v1/sales'
      );
      const {data} = await res.json();
      setData(data)
    }
    fetchData()
  },[]);

  if(!data){
   return (<div>Loading...</div>)
  }

  return (
    <PageLayout>
      <div>
        <h1>This is a list of User Transactions!</h1>
      </div>
      <ul>
        {data.map((result) => {
          const {
            sale_id,
            buyer,
            seller,
            listing_price,
            listing_symbol,
            created_at_time,
          } = result;

          if (buyer !== null) {
            return (
              <Card>
                <li key={sale_id}>
                  <h3>
                    {seller} just sold item number {sale_id} to {buyer} for{' '}
                    {formatNumber(listing_price)} {listing_symbol} at{' '}
                    {parseTimestampJM(created_at_time)}
                  </h3>
                </li>
              </Card>
            );
          }
        })}
      </ul>
    </PageLayout>
  );
}

export default UserTransactionsComponent;