Exploring the integration of Styled-components in NextJs13 for server-side rendering

Question

Exploring the integration of Styled-components in NextJs13 for server-side rendering

ERROR MESSAGE:

The server encountered an error. The specific error message is: TypeError: createContext only works in Client Components. To resolve this issue, add the "use client" directive at the top of the file. More information can be found here



import Link from "next/link";
import StyledHero from "./Hero.style";

const Hero = () => {
    return (
        <StyledHero>
            <h1>Stowarzyszenie Juz Lepiej</h1>
            <h2>Przybywam w celu:</h2>
            <Link about="Panel wolontariusza" href={"/volunteer"}>Uzyskania pomocy</Link>
            <Link about="Panel podopiecznego" href={"/mentee"}>Niesienia pomocy</Link>
            
        </StyledHero>
    )
};

export default Hero;

import styled from "styled-components";

const StyledHero = styled.main`
    width: 100%;
    height: auto;
    padding: 10em;

`
export default StyledHero;

I am encountering an error when using Styled Component. How do I use StyledComponents with SSR in Next13? None of the solutions I have found are working. However, changing <StyledHero> to <main></main> fixes the issue.

I have tried configuring .babelrc as follows:

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
     [
       "styled-components",
       {
          "ssr": true,
          "displayName": true,
          "preprocess": false
        }
     ]
    ]
}

This is my package.json configuration:

{
  "name": "mentalhealthcharity",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.2.4",
    "@types/node": "18.15.11",
    "@types/react": "18.0.31",
    "@types/react-dom": "18.0.11",
    "@types/styled-components": "^5.1.26",
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "^5.3.9",
    "typescript": "5.0.2",
    "zustand": "^4.3.6"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^2.0.7"
  }
}

javascript typescript next.js styled-components server-side-rendering

Answer 1

Answer №1

After thoroughly investigating this matter, it appears that implementing styled-components for server-side rendering in Next.js 13 with the app router is not feasible. However, there are workarounds to ensure styled-components function properly in Next.js 13 without encountering any "delay bugs" by utilizing client-side rendering.

To achieve this, follow these steps:

Include the code snippet below in your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

Create a registry.tsx file containing the provided code:

'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return styles
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

3 - Insert the 'use client' directive into your layout.tsx file and wrap all the child components of your layout with the StyledComponentsRegistry component.

I have created a detailed tutorial video on Youtube addressing this issue, which elaborates on the workaround:

watch?v=3tgrPm2aKog

Answer 2

After thoroughly investigating this matter, it appears that implementing styled-components for server-side rendering in Next.js 13 with the app router is not feasible. However, there are workarounds to ensure styled-components function properly in Next.js 13 without encountering any "delay bugs" by utilizing client-side rendering.

To achieve this, follow these steps:

Include the code snippet below in your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

Create a registry.tsx file containing the provided code:

'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return styles
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

3 - Insert the 'use client' directive into your layout.tsx file and wrap all the child components of your layout with the StyledComponentsRegistry component.

I have created a detailed tutorial video on Youtube addressing this issue, which elaborates on the workaround:

watch?v=3tgrPm2aKog

Answer 3

Answer №2

To enhance your styled components, make sure to include the use client directive at the beginning of your file.

"use client";

import styled from "styled-components";

const StyledHero = styled.main`
    width: 100%;
    height: auto;
    padding: 10em;

`
export default StyledHero;

For more information on this topic, visit: https://github.com/styled-components/styled-components/issues/3856#issuecomment-1304740381

Answer 4

To enhance your styled components, make sure to include the use client directive at the beginning of your file.

"use client";

import styled from "styled-components";

const StyledHero = styled.main`
    width: 100%;
    height: auto;
    padding: 10em;

`
export default StyledHero;

For more information on this topic, visit: https://github.com/styled-components/styled-components/issues/3856#issuecomment-1304740381

Exploring the integration of Styled-components in NextJs13 for server-side rendering

Answer №1

Answer №2

Similar questions

Determining the most appropriate time to utilize the 'async' built-in function in ES2017 versus implementing 'npm i async' can depend on a variety of factors such

Combining multiple arrays of arrays in JavaScript

Adding JSON information into a .js file using ajax technology

Throw TypeError: The `pipe` property of `ngrx/store` is undefined during testing

Organizing Telephone Number Entries in Angular

Initiate the function one time

Guide to Automatically Updating Angular Component When Service Data Changes

Combining Python Bottle with Polymer Paper Elements

Gain access to the "computed style" of elements in a directive

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

Shadows on menu buttons transform when clicked using React and CSS

When attempting to access index.html, the Express Server responds with a "Page Not Found"

Is there a JavaScript function available that can be used to execute a script once content has been loaded via AJAX?

Issue with displaying nested React Elements from Component

Encountering an issue with Spring and AngularJS, as I am receiving an HTTP Status 404 error message

The ExpressJS app generator seems to be struggling to identify and interpret the flags

Adjusting the size of content tags depending on their popularity

Can we selectively execute certain tests in Cypress using support/index.js?

Screen goes dark after switching to full-screen mode (panolens.js/three.js)

Tips for utilizing maps in a react component within a Next.js application