// app/api/preview/route.ts
import { draftMode, cookies } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const previewToken = searchParams.get('previewToken');
  const slug = searchParams.get('slug');

  // Check for a slug and for a preview token
  if (!previewToken || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  // Fetch the slug from Hygraph to ensure we don't run into redirect loops
  const res = await fetch(process.env.HYGRAPH_ENDPOINT!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query SinglePage($slug: String!) {
          page(where: { slug: $slug }, stage: DRAFT) {
            slug
          }
        }
      `,
      variables: { slug },
    }),
  });

  // Return the data
  const { data } = await res.json();

  // If the data returns undefined or in the wrong shape, return an error
  if (!data?.page) {
    return new Response('Invalid slug', { status: 401 });
  }

  // Workaround for https://github.com/vercel/next.js/issues/49927
  // Enable draft mode as usual
  draftMode().enable();

  // Update the cookie and set SameSite=None so it works inside the Hygraph iframe
  const cookieStore = cookies();
  const cookie = cookieStore.get('__prerender_bypass');
  cookies().set({
    name: '__prerender_bypass',
    value: cookie?.value,
    httpOnly: true,
    path: '/',
    secure: true,
    sameSite: 'none',
  });

  redirect(`/${data.page.slug}`);
}

// app/[slug]/page.tsx
import { request } from 'graphql-request';
import { draftMode } from 'next/headers';

export default async function Page({ params }: { params: { slug: string } }) {
  // isEnabled is true if the draft mode cookie has been set by the preview route
  // See: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode
  const { isEnabled } = draftMode();

  // Default stage is PUBLISHED. Switch to DRAFT when draft mode is active.
  const query = `
    query Page($slug: String!, $stage: Stage! = PUBLISHED) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
        slug
      }
    }
  `;

  const variables = {
    stage: isEnabled ? 'DRAFT' : 'PUBLISHED',
    slug: params.slug,
  };

  // Use the preview token in draft mode so the DRAFT stage is accessible,
  // and the production token otherwise so only PUBLISHED content is served
  const endpoint = process.env.HYGRAPH_ENDPOINT!;
  const token = isEnabled
    ? process.env.HYGRAPH_PREVIEW_TOKEN!
    : process.env.HYGRAPH_PRODUCTION_TOKEN!;

  const { page } = await request(endpoint, query, variables, {
    Authorization: `Bearer ${token}`,
  });

  return (
    <main>
      <h1>{page.title}</h1>
      <p>{page.description}</p>
    </main>
  );
}

# .env.local
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token

https://your-domain.com/api/preview?secret=MY_SECRET_TOKEN&slug={slug}

// plugins/preview.ts
export default defineNuxtPlugin((nuxtApp) => {
  const route = useRoute();

  // Check for ?preview=true in the URL — set by your Studio preview URL template
  const preview = route.query.preview === 'true';

  if (preview) {
    // Refresh page data whenever a new page finishes loading in preview mode
    nuxtApp.hook('page:finish', () => {
      refreshNuxtData();
    });
  }

  // Expose $preview globally so page components can switch the query stage
  return { provide: { preview } };
});

<!-- pages/[slug].vue -->
<script setup>
import { request } from 'graphql-request';

// $preview is true if ?preview=true was present in the URL when the plugin ran
const { $preview } = useNuxtApp();

const route = useRoute();

// Default stage is PUBLISHED. Switch to DRAFT when $preview is true.
const query = `
  query Page($slug: String!, $stage: Stage! = PUBLISHED) {
    page(where: { slug: $slug }, stage: $stage) {
      title
      description
    }
  }
`;

const variables = {
  stage: $preview ? 'DRAFT' : 'PUBLISHED',
  slug: route.params.slug,
};

const { data: page } = await request(
  process.env.HYGRAPH_ENDPOINT,
  query,
  variables
);
</script>

<template>
  <main>
    <h1>{{ page.title }}</h1>
    <p>{{ page.description }}</p>
  </main>
</template>

https://your-domain.com/{slug}?preview=true

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // SSR is required — static generation caches responses and editors
  // will always see stale content in preview without it
  output: 'server',
  adapter: vercel(), // or node, netlify, cloudflare
});

---
// src/pages/[slug].astro
import { request } from 'graphql-request';

// ASTRO_USE_PREVIEW=true is set in your preview deployment environment only.
// Do not set this in production — it would serve DRAFT content to all visitors.
const isPreview = import.meta.env.ASTRO_USE_PREVIEW === 'true';

// Default stage is PUBLISHED. Switch to DRAFT in the preview deployment.
const query = `
  query Page($slug: String!, $stage: Stage! = PUBLISHED) {
    page(where: { slug: $slug }, stage: $stage) {
      title
      description
    }
  }
`;

const variables = {
  stage: isPreview ? 'DRAFT' : 'PUBLISHED',
  slug: Astro.params.slug,
};

const { page } = await request(
  import.meta.env.HYGRAPH_ENDPOINT,
  query,
  variables
);
---

<html>
  <head><title>{page.title}</title></head>
  <body>
    <main>
      <h1>{page.title}</h1>
      <p>{page.description}</p>
    </main>
  </body>
</html>

# Preview environment only
ASTRO_USE_PREVIEW=true
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master

https://preview.your-domain.com/{slug}