Preview deployment renders published content instead of draft entries

Answer to the Questions

1. Recommended pattern for injecting preview tokens in PR builds
   • Next.js: Set a single CI env var, e.g., PREVIEW_TOKEN. In getStaticProps or getServerSideProps call draftMode() and forward the token in a custom header (e.g., X-Contentful-Preview) to the CMS. Keep the header generation server‑side so it never reaches the client bundle.
   • Astro: Use the preview middleware (e.g., astro:preview) that reads PREVIEW_TOKEN from a cookie or header. The middleware attaches the token to outgoing CMS requests. Ensure the middleware runs only in the preview environment.
   • Gatsby: Configure the source plugin (e.g., gatsby-source-contentful) to read PREVIEW_TOKEN from process.env and pass it to the CMS client. Set CONTENTFUL_PREVIEW_ACCESS_TOKEN only for PR builds and avoid bundling it in the client code.
2. Verifying no production delivery token at build time
   • In the CI pipeline, add a pre‑build script that scans process.env for known production token names (e.g., CONTENTFUL_DELIVERY_TOKEN, SANITY_TOKEN, PRISMIC_ACCESS_TOKEN). If any are found, abort with a clear error message.
   • Optionally, perform a lightweight CMS call using PREVIEW_TOKEN and assert that a draft‑only field is returned. This confirms the token is active and that no production token is being used.
   • Use the CI’s secret‑masking feature to ensure the preview token never appears in logs.
3. CMS preview API injection modes
   • Header‑based (recommended): Used by Contentful, Sanity, Strapi, GraphCMS, and most modern headless providers. The token is sent in a dedicated HTTP header (e.g., X-Contentful-Preview). This keeps the token out of URLs and logs, making CI secret handling safer.
   • Query‑parameter (legacy or limited cases): Used by Prismic and older Netlify CMS setups. The token is appended as ?preview=true&preview_token=…. This exposes the token in URLs, logs, and browser history, so it requires stricter CI log masking and should be avoided if a header option exists.
   • When a CMS only supports query parameters, store the token in an environment variable, inject it into the URL during runtime, and ensure the CI pipeline masks the value in logs.

Likely Explanation & Assumptions

The guidance assumes:

• CI secrets are injected into the build environment but not committed to source control.
• Frameworks are configured to run preview middleware only in non‑production deployments.
• The CMS supports a short‑lived preview token that grants read access to draft content.

Uncertainty remains around the specific CMS provider and its exact preview‑token header name; adjust the header key accordingly.

Practical Steps for This Case

1. Define a single preview secret in the CI
   • In GitHub Actions, set PREVIEW_TOKEN as a repository secret and reference it in the workflow step that runs the build.
   • Do not set any production token variables for PR builds.
2. Add a pre‑build verification script

   #!/usr/bin/env bash
   # Verify no production token is present
   for var in CONTENTFUL_DELIVERY_TOKEN SANITY_TOKEN PRISMIC_ACCESS_TOKEN; do
     if [[ -n ${!var} ]]; then
       echo "Error: Production token $var detected in PR build environment. Aborting." >&2
       exit 1
     fi
   
   done
   # Optional: quick CMS call to confirm preview token works
   # curl -H "X-Contentful-Preview: $PREVIEW_TOKEN" https://cdn.contentful.com/spaces/…/entries?access_token=$PREVIEW_TOKEN
   

3. Configure framework‑specific injection
   • Next.js: In getStaticProps or getServerSideProps, call draftMode() and pass PREVIEW_TOKEN in X-Contentful-Preview header to the CMS client.
   • Astro: Use astro:preview middleware that reads PREVIEW_TOKEN from a cookie or header and attaches it to outgoing requests.
   • Gatsby: Set CONTENTFUL_PREVIEW_ACCESS_TOKEN=${PREVIEW_TOKEN} in the plugin options and ensure gatsby build runs only in the preview environment.
4. Deploy the preview site and test by navigating to a page that displays a draft‑only field. Verify the field appears and that no production token is visible in the request headers.
5. Audit CI logs to confirm the preview token is masked and never printed.

Missing Diagnostic Detail

To tailor the header key and exact API call, could you specify which headless CMS you are using for preview data? This will ensure the correct header name and endpoint format are applied.