Я хочу визуализировать стилизованные компоненты на стороне сервера в Next.13. Как я сделал?

Question

Я хочу визуализировать стилизованные компоненты на стороне сервера в Next.13. Как я сделал?

компонент визуализируется перед стилизацией в определенное время

Я хочу отображать стилизованные компоненты на стороне сервера.

1

next.js styled-components next.js13 next

Источник

Kauan 01 фев '23 в 14:07

1 ответ

Другие вопросы по тегам next.js styled-components next.js13 next

user6084730 27 май '23 в 18:01 2023-05-27 18:01 · Answer 1 · 2023-05-27 18:01

Ответ в документации: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-comComponents .

создаватьlib/registry.tsxс этим кодом

      '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>
  );
}

и оберните дочерний элемент в глобальный макет (app/layout.tsx)

      import StyledComponentsRegistry from './lib/registry';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}