Next.js basic GetStaticProps+GetStaticPaths with TypeScript

home.tsx

import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
import { ParsedUrlQuery } from "querystring";

interface Data {
  title: string;
}

interface HomePageProps {
  data: Data;
}

const Home: NextPage<HomePageProps> = (props) => {
  return (
    <div>
      <h1>{props.data.title}</h1>
    </div>
  );
};

interface Params extends ParsedUrlQuery {
  uid: string;
}

export const getStaticProps: GetStaticProps<HomePageProps, Params> = async (
  context
) => {
  const { uid } = context.params!;

  try {
    const { data, errors } = await someQuery(`get/${uid}`);
    if (errors || !data) {
      return { notFound: true };
    }
    return { props: { data } };
  } catch (err) {
    return { notFound: true };
  }
};

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  const paths = Array.from({ length: 10 }, (_, index) => ({
    params: {
      uid: (index + 1).toString(),
    },
  }));

  return {
    paths,
    fallback: false,
  };
};

export default Home;