Styled Components & Next.js 15 pages router. #79249

Mu-selim · 2025-05-15T15:50:27Z

Mu-selim
May 15, 2025

I am upgrading from Next 12 to Next 15, I am using the old page routing and currently not planning to migrate to the app router.

I want to configure styled-components in the server but I am getting an error which was working well in Next 12.

_document.tsx:

import { ServerStyleSheet } from 'styled-components';
import Document, { DocumentContext } from 'next/document';

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

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

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

error:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

This line is the reason of the error enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),

Macw07 · 2025-05-15T17:35:10Z

Macw07
May 15, 2025

Hello,

In React 18 (Next.js 15), returning a JSX code fragment containing styles in the styles field of Document.getInitialProps is no longer supported. The initialProps.styles may contain an array or React elements that are not valid as-is when wrapped in a fragment.

To fix the issue, make sure the styles field returns a flat array of valid React nodes. You can do this by explicitly converting initialProps.styles using React.Children.toArray and appending the styled-components styles:

styles: [
  ...React.Children.toArray(initialProps.styles),
  sheet.getStyleElement(),
],

6 replies

icyJoseph May 15, 2025
Collaborator

@Mu-selim could you verify? I remember the with-styled-components Pages Router example _document did as @Macw07 describes. Introduced here, https://github.com/vercel/next.js/pull/37237/files#diff-132e2dffc97a22e8c2cdca181aaa13064c01089a53adca591f779e3683bf6c0f

Mu-selim May 15, 2025
Author

@icyJoseph I use the same code as you referred but I am getting this error:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

I noticed that enhanceApp and return object cause the problem:

enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />)
...
return {
  ...initialProps,
   styles: (
    <>
      {initialProps.styles}
      {sheet.getStyleElement()}
    </>
  ),
};

this docs example works well:

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from 'next/document'
 
class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const originalRenderPage = ctx.renderPage
 
    // Run the React rendering logic synchronously
    ctx.renderPage = () =>
      originalRenderPage({
        // Useful for wrapping the whole react tree
        enhanceApp: (App) => App,
        // Useful for wrapping in a per-page basis
        enhanceComponent: (Component) => Component,
      })
 
    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
    const initialProps = await Document.getInitialProps(ctx)
 
    return initialProps
  }
 
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
 
export default MyDocument

icyJoseph May 16, 2025
Collaborator

Doesn't this give you flashes of un-styled content? You have removed the styled components SSR step.

icyJoseph May 16, 2025
Collaborator

https://stackblitz.com/edit/nextjs-ccuactjh?file=pages%2F_document.tsx,pages%2Findex.tsx,package.json,next.config.js this example works fine though, could you try to modify it until it breaks?

Mu-selim May 16, 2025
Author

I think the problem is related to my next config as I am using @expo/next-adapter which does not support react 19. you can correct me If I am wrong.

ayushman1413 · 2025-05-15T17:41:44Z

ayushman1413
May 15, 2025

Solution :
1st. Update the enhanceApp method to use the latest approach for styled-components.
2nd. Make sure styled-components is properly configured for SSR (Server-Side Rendering).

and you can change the code
the correct code is : save the file in code.tsx or your choise -

import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
DocumentInitialProps,
} from "next/document";
import { ServerStyleSheet } from "styled-components";

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

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

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

}
render() {
return (

);
}
}

2 replies

Mu-selim May 15, 2025
Author

still same error.

ayushman1413 May 16, 2025

ohhh,
i'll check

Styled Components & Next.js 15 pages router. #79249

Uh oh!

Mu-selim May 15, 2025

Replies: 2 comments · 8 replies

Uh oh!

Macw07 May 15, 2025

Uh oh!

Uh oh!

icyJoseph May 15, 2025 Collaborator

Uh oh!

Mu-selim May 15, 2025 Author

Uh oh!

icyJoseph May 16, 2025 Collaborator

Uh oh!

icyJoseph May 16, 2025 Collaborator

Uh oh!

Mu-selim May 16, 2025 Author

Uh oh!

ayushman1413 May 15, 2025

Uh oh!

Mu-selim May 15, 2025 Author

Uh oh!

ayushman1413 May 16, 2025

Mu-selim
May 15, 2025

Replies: 2 comments 8 replies

Macw07
May 15, 2025

icyJoseph May 15, 2025
Collaborator

Mu-selim May 15, 2025
Author

icyJoseph May 16, 2025
Collaborator

icyJoseph May 16, 2025
Collaborator

Mu-selim May 16, 2025
Author

ayushman1413
May 15, 2025

Mu-selim May 15, 2025
Author