안녕하세요, 강의는 수강중이기도하고 아래에 비슷한 맥락의 질문이 있는데 제가 이해한게 맞나 궁금해서
질문 올립니다!

현재 next14 버전과 styled-component를 사용중이며 공식문서
https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
내용 과 검색등을 통하여 적용하였습니다.

// libs/styledCompnents/Registry.tsx

'use client';

import { useServerInsertedHTML } from 'next/navigation';
import { ReactNode, useState } from 'react';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

const Registry = ({ children }: { children: ReactNode }) => {
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof document !== 'undefined') {
    return <>{children}</>;
  }

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  );
};

export default Registry;

//libs/styledComponets/Provider.tsx

'use client';

import { ThemeProvider } from 'styled-components';
import GlobalStyles from '@/styles/GlobalStyles';
import theme from '@/styles/theme';
import { PropsWithRequiredChildren } from '@/types/common';
import { StyledComponentsRegistry } from '.';

const Providers = (props: PropsWithRequiredChildren) => {
  return (
    <StyledComponentsRegistry>
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        {props.children}
      </ThemeProvider>
    </StyledComponentsRegistry>
  );
};

export default Providers;

// layout.tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import AdminLayout from '@/layouts/AdminLayout/AdminLayout';
import { StyledComponentsProvider } from '@/libs/styledComponents';
import { MSWComponent } from '@/mocks/MSWComponent';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <MSWComponent>
          <StyledComponentsProvider>
            <AdminLayout>{children}</AdminLayout>
          </StyledComponentsProvider>
        </MSWComponent>
      </body>
    </html>
  );
}

현재 이렇게 사용중인데 AdminLayout에 'use client'를 사용하지않으면, 아래와 같은 에러가 나오고
'use client' 를 사용하면 에러 없이 렌더링이 정상적으로 됩니다.

```

Server Error

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

o

node_modules/styled-components/dist/styled-components.esm.js (1:15911)