import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps } from "next/document";
type Props = Record & DocumentProps;
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
const isEmbed = ctx.req?.url?.includes("embed=");
return { ...initialProps, isEmbed };
}
render() {
const props = this.props;
const { locale, gssp } = this.props.__NEXT_DATA__;
const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr";
// gssp -> getServerSideProps allow us to know that this page was rendered server side and thus would have ctx.req.url with embed query param(if it was there in the request)
// In that case only, we should consider embed to be enabled. For other cases it should be handled at client side and the component should ensure that flicker due to changing css doesn't occur
const isEmbedCorrectlyDetected = gssp && props.isEmbed;
return (
{/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
);
}
}
export default MyDocument;