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

Executing a function in the view/template with Angular 2+

What is the best way to create an instance method in a subclass that can also call a different instance method?

Utilizing dynamic routes and incorporating additional search parameters within the URL structure in NextJS has never

What is the preferred way to handle return values in a JQuery Ajax function - true or

Exploring the possibility of detecting page scrolling in Javascript by clicking on scroll bars

What sets aws-cdk-lib apart from @aws-cdk/core, @aws-cdk/aws-iam, and others?

Issue with Material-ui autocomplete not updating its displayed value according to the value prop

The combination of Node.js module.exports and shorthand ternary operators for conditional statements

"Improprove your website's user experience by implementing Material UI Autocomplete with the

Having trouble with document.getElementById.innerHTML not displaying the correct content?

"execute loop in a strange and peculiar manner using JavaScript

Revise a catalog when an object initiates its own removal

Is it possible to terminate an active server process triggered by an HTTP post request in Node.js prior to returning a response?

JavaScript not functional, database being updated through AJAX calls

Preventing page refresh when typing in a form input: Tips and tricks

Tips for swapping out a page for a component

Accessing and fetching data from a PostgreSQL database using JavaScript through an API

What steps should I take to ensure that elements beneath a div are made visible?

Ways to thwart CSRF attacks?

Eliminate duplicate objects from arrays of objects by a specific key name