[ 문제 상황 ]
NextJS 13에서 Stitches를 사용할 때, SSR이 제대로 적용되지 않는 버그가 있다. 초기 로딩하면 스타일이 적용되지 않고, client side에서 적용이 되기 때문에 한 번 새로고침을 해주어야 했다. Stitches 페이지에 NextJS를 적용하는 방식은 pages directory일 때의 방식이라 이를 해결하고자 하였다.
[ 해결 방법 ]
"use client";
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { getCssText } from "@/stitches.config";
const StitchesProvider = ({ children }: { children: React.ReactNode }) => {
const [isRendered, setIsRendered] = useState(false);
useServerInsertedHTML(() => {
if (!isRendered) {
setIsRendered(true);
return <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />;
}
});
return <>{children}</>;
}
export default StitchesProvider;위처럼 StitchesProvider.tsx 파일을 만들고 이를 app/layout.tsx 파일에서 적용시켜주면 된다.
import React from "react";
import StitchesProvider from "@/component/StitchesProvider";
interface LayoutProps {
children: React.ReactNode;
}
const RootLayout = ({children}: LayoutProps) => {
return (
<html>
<body>
<StitchesProvider>
{children}
</StitchesProvider>
</body>
</html>
)
}
export default RootLayout;
[ Reference ]
아래 Github Issue를 보며 해결하였고, 그 밑의 Stitches 페이지는 NextJS 12에서 pages directory를 사용할 때 해결하는 방법이다.
Support for Next.js 13 · Issue #1109 · stitchesjs/stitches
Since Next.js 13 was released yesterday, the beta docs list Stitches as not being support as of right now. There is however a guide on how to integrate styled-jsx that look very similar to how Stit...
github.com
Using Next.js with Stitches — Stitches
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience, by WorkOS.
stitches.dev
'Front-End > NextJS' 카테고리의 다른 글
| [NextJS] NextJS app router - Google Analytics 적용하기 (0) | 2023.10.03 |
|---|---|
| [NextJS] NextJS Google Analytics 적용하기 (0) | 2022.12.18 |
| [NextJS] Image background 설정하기 (0) | 2022.07.02 |
| [NextJS] SyntaxError: Unexpected token u in JSON at position 0 - router.query undefiend 해결하기 (0) | 2022.06.28 |
| [NextJS] Next js를 배워보고 느낀 점 (0) | 2022.06.11 |
댓글