I have declared a file called Ssr.tsx (in the pages directory i created under the app folder)

within this file i have this code

import { InferGetServerSidePropsType } from 'next';

function Page({
    data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
    return (
        <div>
            <h1>Server Side Rendered page</h1>
            <p>{data}</p>
        </div>
    );
}

export default Page;

export async function getServerSideProps() {
    const data = 'This is a static string';

    return {
        props: { data },
    };
}

and when i go to localhost/ssr i get 404.

Shouldnt this be the most basic example one can make? No clue as to why its not working