Preview Mode in production not working (only in Chrome)

[ciruz]

Hey,

I'm using next.js 9.5.x (just updated to 9.5.2) with some dependencies (redux, redux-persist, react-query, react-hook-form, ...) and today I implemented the preview mode, as described in the docs.
With getServerSideProps and one variant, where I set a query / GET param, for non server generated stuff (ex. ecommerce product page). Craft CMS is my backend and everything works fine, if next.js is in development mode.

As soon as I build and start the frontend, the preview mode is not working anymore, I'm not talking about Craft CMS Iframe or SameSite Cookie issues. Just nothing happens, the page get's loaded and the context object has no preview informations or preview tokens at all.

Preview URLs.:

• Startpage / getServerSideProps
  https://foobar.com/api/preview?x-craft-live-preview=111111&previewToken=222222
• Catch all Routes / getServerSideProps
  https://foobar.com/api/preview?previewUrl=/about-us&x-craft-live-preview=111111&previewToken=222222
• Dynamic Routing (Product Page) react-query
  https://foobar.com/api/preview?previewUrl=/product/some-product&x-craft-live-preview=111111&previewToken=222222

What I know so far:

• PreviewData cookies are not set in Chrome (neither on localhost, or on the server) when next.js is in production mode
• Preview Mode works on localhost, in production mode but only in Firefox
• On localhost environment, PreviewData cookies in Firefox gets set as SameSite Lax on development mode and SameSite None in production mode.

My shorten code:

// pages/api/preview.js

export default async (req, res) => {
  if (!req.query["x-craft-live-preview"] || !req.query.previewToken) {
    return res
      .status(401)
      .json({ message: "Not allowed to access this route" });
  }

  let previewToken = req.query.previewToken ?? null;

  res.setPreviewData({
    previewToken,
  });

  let parsedUrl = false;
  if (req.query?.previewUrl) {
    // product page
    if (req.query.previewUrl.startsWith("/product/"))
      // set the previewToken as query/get param, for client side (react-query)
      parsedUrl = new URL(
        process.env.URL + req.query.previewUrl + "?previewToken=" + previewToken
      );
    else parsedUrl = new URL(process.env.URL + req.query.previewUrl); // dynamic routing
  } else {
    // no previewUrl = startpage
    parsedUrl = new URL(process.env.URL);
  }

  res.writeHead(307, { Location: parsedUrl.href });
  res.end();
};

// pages/index.js  =>  https://foobar.com

import { fetchContentBySlug } from "../utils/fetch";

export default function Home({ data, preview }) {
  return (
    <Layout preview={preview}>
      <div>foobar</div>
    </Layout>
  );
}

export async function getServerSideProps({
  preview = false,
  previewData = false,
}) {
  const data = await fetchContentBySlug(
    "startpage",
    previewData?.previewToken
  );

  return { props: { data, preview } };
}

// pages/product/[slug].js  =>  https://foobar.com/product/some-product | https://foobar.com/product/another-product
// this works, but next.js is not 100% in preview mode, setPreviewData cookies are missing

import { useRouter } from "next/router";
import { useQuery } from "react-query";
import { fetchProductBySlug } from "../../utils/fetch";

function Product() {
  const router = useRouter();

  let previewToken = router.query.previewToken || false;

  const { status, data, error } = useQuery(
    ["detail", router.query.slug, previewToken],
    fetchProductBySlug
  );

  if (status !== "success") {
    return(<div>loading...</div>)
  }

  return (
    <Layout preview={previewToken}>
        <div>foobar</div>
    </Layout>
  );
}

export default Product;

// pages/[...page].js  =>  https://foobar.com/about-us | https://foobar.com/pricing

import { useRouter } from "next/router";
import DefaultErrorPage from "next/error";
import { fetchContentBySlug } from "../utils/fetch";

export default function Page({ data, preview }) {
  const router = useRouter();

  // 404
  if (!data) return <DefaultErrorPage statusCode={404} />;

  return (
    <Layout preview={preview}>
        <div>foobar</div>
    </Layout>
  );
}

export async function getServerSideProps({
  params,
  res,
  preview = false,
  previewData = false,
}) {
  const data = await fetchContentBySlug(
    ...params.page,
    previewData?.previewToken
  );

  if (data && typeof data === "object") return { props: { data, preview } };

  res.statusCode = 404;
  return {
    props: {
      error: "oops",
    },
  };
}

// utils/fetch.js

export async function fetchContentBySlug(slug, token = "") {
// returns json
}

export async function fetchProductBySlug(key, slug, previewToken = "") {
// returns json
}

// pages/_app.js

import { useStore } from "../store";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState);
  const persistor = persistStore(store);

  return (
    <Provider store={store}>
      <PersistGate loading={<Component {...pageProps} />} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  );
}

Does anybody have an idea or some advice for me?

Thank you.

[ciruz]

It's solved with SSL on production server and running the API as subdomain from the frontend.

Thanks