Next.js (App Router)

Next.js doesn't allow us to use a <link> element in our RootLayout, so here's the workaround using a <Script> component and injecting the css.


import Script from 'next/script'
import { type Metadata } from 'next'

import dynamic from 'next/dynamic'

export const metadata: Metadata = {
  title: {
    template: '%s - Waitlisty',
    default: 'Waitlisty - Build excitement for your product',
  },
  description: 'Build excitement for your product',
}

// A css loader string will be injected with a <Script> component
const cssLoader = `
    let head = document.getElementsByTagName('HEAD')[0];
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://jzcjrtlxrpzxgszlwttl.supabase.co/storage/v1/object/public/formbuilder_v2/formBuilder_v2.css?t=2024-07-22T17%3A06%3A40.577Z';
    head.appendChild(link);
`

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      {/* Here's the script component */}
      <Script
        id="waitlist-css"
        type=""
        dangerouslySetInnerHTML={{ __html: cssLoader }}
      ></Script>
      <body suppressHydrationWarning={true}>
        {children}
      </body>
      {/* Our Waitlisty widget script */}
      <Script src="https://jzcjrtlxrpzxgszlwttl.supabase.co/storage/v1/object/public/scripts/waitlisty-widget.js" defer></Script>
    </html>
  )
}
PreviousHTML/CSSNextZapier

Last updated