styled-components 가 아닌 css SSR 적용

Question

nextjs9 에서 styled-components 와 CSS를 같이 사용해서 작업중인데 (외부 스타일 라이브러리 때문에) ssr 때 지금 사용하는 css도 같이 _document 에서 서버사이드 렌더링으로 스타일 처리를 해주고 싶습니다. 또한, 이미지는 Lazy 하게 불러오더라도 해당 css 파일에 font-face 코드가 있는데 그래서 그런지 로컬 렌더링 후에 폰트가 적용되는 어색한 화면이 나옵니다. 혹시 어떻게하면 좋을지 참고할 수 있는 관련 링크라도 알려주시면 감사하겠습니다.

제로초(조현영) · Answer

제가 말씀드린 것은 이렇게 직접 넣는 것이었습니다. 저렇게 fs.readFileSync로 하면 브라우저에서 _document.js 불러올 때는 에러가 날 수 있어서요. 외부 스타일 CSS가 있으면 그냥 _app.js에서 import 'CSS경로'하면 알아서 Next.js가 번들링해줍니다. 제가 강좌에서 antd css import한 것 처럼요.

Tony · Answer

네.. 혹시 예시 코드나 링크가 있을까요? https://github.com/vercel/next-plugins/issues/238 이걸 바탕으로  class InlineStylesHead extends Head { getCssLinks ({ allFiles }) { console . log ( "Inline Styles Head" ); console . log ( allFiles ); return allFiles . filter (( file ) => file . endsWith ( ".css" )) . map (( file ) => ( < style key = { file } nonce = { this . props . nonce } dangerouslySetInnerHTML = {{ __html : fs . readFileSync ( path . join ( ".next" , file ), "utf-8" ), }} /> )); } } 이렇게 코드를 만들어서 Head 대신에 넣어봤는데, .next 폴더에 css 파일이 없더라구요.

제로초(조현영) · Answer

_document에 Head(next/head)를 넣으시고 css나 style 태그를 넣어두면 제일 먼저 그 부분이 렌더링되므로 css가 먼저 적용된 상태로 컴포넌트가 렌더링됩니다.