Just as a reminder…

In the client side…

export default function SomeFunction({ data }) {
//do something with the data
return...
}

Server side…

export async function getServerSideProps(context) {
//parameters from the url...    
const url_params = context.query
// Fetch data from external API
/*console.info("process.env.AWS__X_API_KEY_ALPHA ", process.env.AWS__X_API_KEY_ALPHA)
console.info("process.env.HEADERS_ORIGIN ", process.env.HEADERS_ORIGIN)*/
const url = process.env.API_BASE_ADDRESS_ALPHA + "/devices/gets/by_serial_number"
const request_params = require('../t5pages/common/fetch_api_params').api_call()
if (url_params.sn) {
request_params.headers["serial_number"] = url_params.sn
}
//console.info(request_params)
const res = await fetch(url, request_params)
.then((response) => {
//console.log("ASDF" + JSON.stringify(response))
if (!response.ok) {
throw new Error(response.error)
}
return response.json();
})
.then(data => {
return data
})
.catch(function (error) {
console.error("caught Error: " + JSON.stringify(error))
console.error("caught Error: " + error)
return { props: { error } }
//return error
});
const data = JSON.stringify(res)
return { props: { data } }
}

And the api call parameters are:

exports.api_call=()=>{
return {
method: "GET",
mode: 'cors',//not needed from server. I guess
headers: {
'Accept-Encoding': "gzip, deflate, br",
'x-api-key': process.env.AWS__X_API_KEY_ALPHA,
'Access-Control-Request-Method': 'GET',
'Access-Control-Request-Headers': 'Origin, Content-Type, X-Auth-Token',
'Origin': process.env.HEADERS_ORIGIN,
}
}
}