javascript - NextJs13'te SSR ile Styled-components nasıl kullanılır?

HATA MESAJI:

Sunucu Hatası TypeError: createContext yalnızca İstemci Bileşenlerinde çalışır. Bunu kullanmak için dosyanın en üstüne "use client" yönlendirmesini ekleyin. Daha fazla bilgi: https://nextjs.org/docs/messages/context-in-server-component


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;

Styled Component kullanırken hata alıyorum. Next13'te SSR ile StyledComponents nasıl kullanabilirim? Bulduğum çözümler işe yaramıyor. Ama <StyledHero>'yu <main></main> ile değiştirdiğimde sorunsuz çalışıyor.

.babelrc içinde kullanmayı deniyorum:

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

Benim package.json dosyam:

{
  "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"
  }
}

Cevap #1

Aslında, bu konuyu inceledim ve vardığım sonuç, styled-components'ın sunucu tarafında render edilmesini sağlamanın gerçekten bir yolu olmadığı, en azından Next.js 13 ve app router ile olmadığını gösteriyor... Ama styled-components'ı, bazı geçici çözümler ve istemci tarafı render kullanarak Next.js 13 ile "gecikme hataları" olmadan çalıştırmak mümkün.

Sadece bu adımları takip etmen gerekiyor:

  1. Bunu next.config.js dosyanıza ekleyin:

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

module.exports = nextConfig
  1. Aşağıdaki kod ile registry.tsx dosyasını oluşturun:

'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 - layout.tsx dosyanıza 'use client' direktifini ekleyin ve layout'unuzdaki tüm alt bileşenleri StyledComponentsRegistry bileşeni ile sarmalayın.

Bu konuyla ilgili olarak, Youtube'da bu geçici çözümü daha ayrıntılı şekilde açıkladığım bir video yaptım:

watch?v=3tgrPm2aKog

Cevap #2

Stil bileşenlerinizle birlikte dosyanın en üstüne use client yönergesini ekleyin.

"use client";

import styled from "styled-components";

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

`
export default StyledHero;

Referans: https://github.com/styled-components/styled-components/issues/3856#issuecomment-1304740381

İlgili makaleler