SSR in nextjs witn TS not happening properly

Question

I am using TypeScript to handle SSR for my site. I have written this code for handling api requests for urls of type /Reveal/[slug]. But it gives error while building. Tell me a way to build my code without this error reappearing again and again. I am not also understanding the exact usecase of GETSTATICPATHS & GETSTATICPROPS here.

import { useRouter } from "next/router";
import { FC } from "react";
import { medias, label_names, label_descriptions, bg_colors, text_colors } from "..";
import Image from "next/image";
import { GetStaticPaths, GetStaticProps } from "next";

type Props = {

}

const Reveal: FC<Props> = () => {
    const router = useRouter();
    const { slug } = router.query;

    if (router.isFallback) {
        return (<div>isLoading!!!</div>)
    }

    return (<>
        <div className={bg_colors[Number(slug)] + " h-screen w-screen flex"}>
            <div className="w-1/2 p-10 h-screen flex items-center justify-center">
                <Image src={medias[Number(slug)]} alt={label_names[Number(slug)]} height={medias[Number(slug)].height * 2} width={medias[Number(slug)].width * 2} />
            </div>
            <div className="w-1/2 p-10 h-screen flex flex-col items-center justify-center">
                <div className={"font-hipnouma text-[40em] mix-blend-exclusion title " + text_colors[Number(slug)]}>
                    {Number(slug) + 1 + ".) " + label_names[Number(slug)].toUpperCase()}
                </div>
                <div className={"font-lostar text-[7em] mix-blend-color-dodge " + text_colors[Number(slug)]}>
                    {label_descriptions[Number(slug)]}
                </div>
            </div>
        </div>
    </>)
}

type ParamsPaths = {
    id : string
}

export const getStaticPaths: GetStaticPaths<ParamsPaths> = async () => {
    const paths = label_names.map((el, index) => ({ params: { id : index.toString() } }))

    return {
        paths,
        fallback: false
    }
}

export const getStaticProps: GetStaticProps<Props, ParamsPaths> = async ({ params }) => {
    try {
        if (!params)
            throw new Error("params not provided!!!")

        const res = await fetch(`/Reveal/${params.id}`)

        if (!(res.ok))
            throw new Error(`failed to fetch data from API. Status : ${res.status}`)

        const post = await res.json()

        return {
            props: { post }
        }
    }
    catch (error) {
        throw new Error(`Error in GetStaticProps. ${error}`)
    }
}

export default Reveal