NextJS refactoring API route from SSR to SSG

Question

I have a SSR API that I want convert to SSG to generate it at build time

/pages/api/dostuff/[cid].tsx

export default async function handler(req, res) {
  const { cid } = req.query;
  let data;
  data = await doStuff(cid);
  res.status(200).json(data)
}

My approach has been to start implementing getStaticPaths as follows:

export const getStaticPaths: GetStaticPaths = async () => {

  return {
    paths: [
      { params: {"cid": "AAA"} },      
      { params: {"cid": "BBB"} },      
    ],
    fallback: false // false or 'blocking'
  };
}

But than I stopped because I couldn't find a viable option of implementing getStaticProps in order to have SSG.

I would have proceeded like follow

export async function getStaticProps(context) {

  const { cid } = context.params.cid;
  let data;
  data = await doStuff(cid);
  return { props: { data } };

}

Should I create a component that just outputs plain JSON? This doesn't look right to me; what's the best approach ?