Env variables show up undefined while using static site generation with NextJS 13's app router

Question

I am using NextJS 13's app router. I want to generate a bunch of pages during build time by fetching remote data. And the way I am trying to do this is by storing my api key in .env.local like so.

HEADLESS_API_KEY=topsecret

And then using this in my page /app/articles/[slug]/page.tsx, like so

export const dynamic = 'force-static';
export const dynamicParams = false;

export async function generateStaticParams() {
  console.log('top secret key', process.env.HEADLESS_API_KEY); // <-- shows undefined.
  const response = await fetchData(process.env.HEADLESS_API_KEY);
}

const Page = ({ params }: { params: { slug: string } }) => {
  const { slug } = params
  return (
    <span>Page for {slug}</span>
  )
};

export default Page;

This code runs during build time and my understanding is that generateStaticParams() runs in the Node.js environment and should have access to process.env.HEADLESS_API_KEY. But it shows undefined when I try to log it to console.