Any example for a Next.js **Page Router** implementation of v6? How to use StyleSheetManager?

[ntltd]

Hi there! ✋

I'm looking for an example of an integration of Styled-Components 6 and Next.js 13/14 using Page Router. Did someone achieved to do this? I'd like to use StyleSheetManager in order to apply enableVendorPrefixes because I need old browsers support on my app.

I've found example for App Router and an old example for Page Router, but the second example does not include a way to use StyleSheetManager.

Any help is greatly appreciated!

[jdavidferreira]

I was looking for the same thing.

In that search, I found a solution that works, but I don't know if it is the right solution or the most optimal.

import Document from "next/document";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props =>
            sheet.collectStyles(
              <StyleSheetManager sheet={sheet.instance} enableVendorPrefixes> // 👈🏻 Use StyleSheetManager here
                <App {...props} />
              </StyleSheetManager>
            )
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  }
}

Source: One of the codesandboxes linked here: #2857

[ntltd]

Thanks for your answer.

I came up with the same solution, but in order to use shouldForwardProp (which is no longer provided by default) both server and client side I had to add the manager in both _document and _app.

My abstraction:

import { StyleSheetManager as SSM } from 'styled-components'
import isPropValid from '@emotion/is-prop-valid'

const shouldForwardProp = (propName, target) => {
  if (typeof target === 'string') {
    // For HTML elements, forward the prop if it is a valid HTML attribute
    return isPropValid(propName)
  }
  // For other elements, forward all props
  return true
}

const StyleSheetManager = ({
  children,
  enableForwardProp,
  enableVendorPrefixes,
  sheet,
}) => {
  return (
    <SSM
      shouldForwardProp={enableForwardProp ? shouldForwardProp : undefined}
      enableVendorPrefixes={enableVendorPrefixes}
      sheet={sheet?.instance}
    >
      {children}
    </SSM>
  )
}

export default StyleSheetManager

_document:

  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(
              <StyleSheetManager
                sheet={sheet.instance}
                enableForwardProp
                enableVendorPrefixes
              >
                <App {...props} />
              </StyleSheetManager>,
            ),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: [initialProps.styles, sheet.getStyleElement()],
      }
    } finally {
      sheet.seal()
    }
  }

_app:

export default function MyApp({ Component, pageProps }) {
return (
  <StyleSheetManager enableVendorPrefixes enableForwardProp>
    <Component {...pageProps} />
  </StyleSheetManager>
}

But I'm not sure either if it is the right solution or the most optimal... ^^