import Page from '../components/Page'
import Script from 'next/script'
import * as snippet from '@segment/snippet'

// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
const DEFAULT_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa'

function renderSnippet() {
  const opts = {
    apiKey: process.env.NEXT_PUBLIC_ANALYTICS_WRITE_KEY || DEFAULT_WRITE_KEY,
    // note: the page option only covers SSR tracking.
    // Page.js is used to track other events using `window.analytics.page()`
    page: true,
  }

  if (process.env.NODE_ENV === 'development') {
    return snippet.max(opts)
  }

  return snippet.min(opts)
}

function MyApp({ Component, pageProps }) {
  return (
    <Page>
      {/* Inject the Segment snippet into the <head> of the document  */}
      <Script dangerouslySetInnerHTML={{ __html: renderSnippet() }} />
      <Component {...pageProps} />
    </Page>
  )
}

export default MyApp

@@ -798,16 +798,52 @@
  %3CScript
+%0A        id=%22segment-script%22%0A       
  dangero
@@ -888,16 +888,22 @@
 pet() %7D%7D
+%0A     
  /%3E%0A    

Add id to inline Segment script (#32878)