styled of styled component not working in nextjs
//create .babelrc { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] } yarn add -D babel-plugin-styled-components // pages/_documents.js import Document from 'next/document' import { ServerStyleSheet } 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(<App {...props} />), }) const initialProps = await Document.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), } } finally { sheet.seal() } } }
Source: github.com
styled components error in nextjs
//update in new version of next.js // at next.config.js add styledComponents:true in compiler @type {import('next').NextConfig} const nextConfig = { /* config options here */ reactStrictMode:true, compiler:{ styledComponents:true, } } export default nextConfig
styled components error in nextjs
//update in new version of next.js // at next.config.js add styledComponents:true in compiler @type {import('next').NextConfig} const nextConfig = { /* config options here */ reactStrictMode:true, compiler:{ styledComponents:true, } } export default nextConfig