add cache control headers to dynamic page (Next.js pages router)

[id].tsx

export const getServerSideProps = (async (context) => {
  const id = context.query.id;

  const res = await fetch(`https://api.../posts/${id}/`, {
    ...
  });

  context.res.setHeader(
    "Cache-Control",
    "public, s-maxage=604800, stale-while-revalidate=59"
  );

  const post = await res.json();
  return { props: { post } };
}) satisfies GetServerSideProps<{
  post: Post;
}>;