I'm trying to use getServerSideProps in next.js, from a component that lies in my pages folder. I'm trying to just return a Hello message to make it work but seems like I'm just getting an empty object as props. my file structure

The component where I'm trying to fetch the data is savedFiles, and I want to render that component in the header, which is also in the pages folder ( I know my folder structure is probably not the best right now ).

Here is the code for the savedFiles component:

/* eslint-disable react/prop-types */
import React from 'react';

export async function getServerSideProps(context) {

    return {
        props: {
            message: "Hello"
        }
    }
  }

// eslint-disable-next-line react/prop-types
export default function SavedFiles(props) {
    console.log(`saved files msg`);
    console.log(props);
    return (
        // eslint-disable-next-line react/destructuring-assignment
        <h2 className="savedFiles">{props.message}</h2>
    )
}

and in the header I just return it like so:

return (
        <div className="ui">
            <SavedFiles />
             <Connection rosStatus = {handler.connectionStatus} serverStatus = { handler.serverIsScanning }/>
            <PresetButtons />
            {handler.isScanning || (handler.serverIsScanning === "Scanning") ? <StopButton /> : <StartButton />}
        </div>
    )

I tried fetching the data from the index page and there it works fine but I'm not sure what the problem is when trying to do it from my component since it is also in the pages folder?