NextJS static web app fetching contents from Google Sheets, kind of headless CMS

Hi Thomas John,

Since you're using a static web app, only SSG is supported. That means all external data (like Google Sheets content) must be available at build time, not runtime. If your data fetch happens on the client side (e.g., in useEffect), environment variables won't be available or will expose secrets leading to blank content or security risks.

In your pages/index.js or similar page file, fetch Google Sheets data using getStaticProps. This ensures it runs during the build where secrets are available:

export async function getStaticProps() {
  const res = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/YOUR_SHEET_ID/values/YOUR_RANGE?key=${process.env.GOOGLE_SHEETS_API_KEY}`);
  const data = await res.json();
  return {
    props: {
      sheetData: data,
    },
  };
}

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

Azure Static Web Apps use GitHub Actions to build your project. You must store your GOOGLE_SHEETS_API_KEY as a GitHub secret so it is available during the build:

1. Go to your GitHub repository.
2. Navigate to Settings => Secrets and variables => Actions => New repository secret
3. Name: GOOGLE_SHEETS_API_KEY Value: your actual Google Sheets API key https://docs.github.com/en/actions/security-guides/encrypted-secrets

Use Next.js to expose the environment variable at build time:

// next.config.js
module.exports = {
  env: {
    GOOGLE_SHEETS_API_KEY: process.env.GOOGLE_SHEETS_API_KEY,
  },
};

Never use secrets in client-side JavaScript (like in useEffect or via NEXT_PUBLIC_ prefixed variables), as they’ll be exposed to anyone inspecting the browser. https://nextjs.org/docs/pages/guides/environment-variables#environment-variable-load-order

In your .github/workflows/azure-static-web-apps.yml workflow file, make sure the secrets are passed into the build via the env: block:

env:
  GOOGLE_SHEETS_API_KEY: ${{ secrets.GOOGLE_SHEETS_API_KEY }}

This ensures the build step has access to your secrets when getStaticProps runs. https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=identity&pivots=github-actions#configure-the-build-environment

Environment variables added in the Azure portal (via Configuration) are only available to backend APIs (Azure Functions) at runtime, not to frontend builds or the static site itself.

https://learn.microsoft.com/en-us/azure/static-web-apps/application-settings

Hope this helps, if you have any further concerns or queries, please feel free to reach out to us.