I have the following:

// FetchData.js

export const fetchData = async (url, options) => {
    const res = await fetch(url, {
        headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
        ...options,
    })
    const data = await res.json()
    return data
}

// prototype.jsx

import { fetchData } from '../../lib/FetchData'

const Prototype = ({ data }) => {
    console.log('OpenSea API', data)
    return ( 
        <div className="h-screen">
            Prototype page
            {data}
        </div>
     );
}
 
export default Prototype;

export async function getSeverSideProps(context) {
    // retrieve assets from OpenSea API
    const url = `https://api.opensea.io/api/v1/assets?owner=0xa48db0a225703b25ef95b863c1aa44929bba7fde&order_direction=desc&offset=0&limit=20`;
    // const url = `https://api.opensea.io/api/v1/collections?asset_owner=0x9f5499EfaeD12770762d44261538151b47E8d902&offset=0&limit=300&offset=0&limit=300`
    // const url = `https://api.rarible.org/v0.1/collections/ETHEREUM:0x1eeabf7196c6610a3336add6d5f1a178c0734577`
    const options = {method: 'GET'};
    const data = await fetchData(url, options)

    return {
        props: {
            data
        }
    }
}

When I console logged from the page, it is "undefined". I surmised that it may be because I need to request an API key from OpenSea, so instead of I have tried fetching with Rarible API and it remains undefined.

I have tried by OpenSea and Rarible API on Postman and both received a JSON data with status 200. But when tried it in NextJS, it keeps getting undefined.