Fix Next + Cloudfare integration snippet #43

kellenwiltshire · 2023-03-28T12:29:52Z

import Document, { Html, Main, NextScript } from "next/document";
const isProd = process.env.NODE_ENV === "production";

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html>
        <body>
          <Main />
          <NextScript />
          {/* Cloudflare Web Analytics */}
          {isProd && (
            <>
              <script
                defer
                src="https://static.cloudflareinsights.com/beacon.min.js"
                data-cf-beacon='{"token": "your_token", "spa": true}'
              />
            </>
          )}
        </body>
      </Html>
    );
  }
}

This should include <Head /> from 'next/document` in order to not break styling.

import Document, { Html, Main, Head, NextScript } from "next/document";
const isProd = process.env.NODE_ENV === "production";

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          {/* Cloudflare Web Analytics */}
          {isProd && (
            <>
              <script
                defer
                src="https://static.cloudflareinsights.com/beacon.min.js"
                data-cf-beacon='{"token": "your_token", "spa": true}'
              />
            </>
          )}
        </body>
      </Html>
    );
  }
}

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Next + Cloudfare integration snippet #43

Fix Next + Cloudfare integration snippet #43

kellenwiltshire commented Mar 28, 2023 •

edited

Fix Next + Cloudfare integration snippet #43

Fix Next + Cloudfare integration snippet #43

Comments

kellenwiltshire commented Mar 28, 2023 • edited

kellenwiltshire commented Mar 28, 2023 •

edited