Proxy file page in Nextjs | Next.js | Page 1

How can I create a proxy page component so to say to view my files from my s3 bucket inside my webapp, so I don't need to open the files using the s3 url.

So I would pass the presigned url from my backend to my component page I guess, which I already created inside

pages/file/[id].tsx

The basic setup looks like this

import { useRouter } from 'next/router';

const FilePage = () => {
  const router = useRouter();
  const { src } = router.query;

  return (
    <>
      < img src={src} />
    </>
  );
};

export default FilePage;

But I want to file the file just how the browser would view a file, is that even possible?

#Proxy file page in Nextjs