Hi Jake, first of all thanks for building bumbag, I just found it out and it looks awe

Hi! Seems that the "Getting Started" docs was missing the <code clas

Bumbag + NextJS SSR not working with 1.0.0-rc0 about bumbag-ui HOT 3 CLOSED

jxom commented on August 15, 2024

Bumbag + NextJS SSR not working with 1.0.0-rc0

from bumbag-ui.

Comments (3)

jxom commented on August 15, 2024

Hi!

Seems that the "Getting Started" docs was missing the <Head/> tag in the Next.js example.

Try copy and paste the following into your _document.js file, and try again:

import Document, { Head, Main, NextScript } from 'next/document'
import { extractCritical } from 'emotion-server'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = extractCritical(initialProps.html)
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style
            data-emotion-css={styles.ids.join(' ')}
            dangerouslySetInnerHTML={{ __html: styles.css }}
          />
        </>
      ),
    }
  }

  render() {
    return (
      <html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

from bumbag-ui.

agustif commented on August 15, 2024

Still no SSR, with your version or importing head like this doesn't work either.

import Document, { Main, NextScript } from 'next/document'
import { extractCritical } from 'emotion-server'
import Head from 'next/head'
export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = extractCritical(initialProps.html)
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <styles
            data-emotion-css={styles.ids.join(' ')}
            dangerouslySetInnerHTML={{ __html: styles.css }}
          />
        </>
      ),
    }
  }

  render() {
    return (
      <html>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}