[공지사항] 푸샤 깃허브 블로그 업데이트 사항

Global CSS Must Be in Your Custom <App>

왜 이러한 에러가 발생하는가

pages/_app.js 이외의 파일에서 전역 CSS를 가져오려고 했습니다.

글로벌 CSS는 부작용 및 순서 문제로 인해 [Custom ](https://nextjs.org/docs/advanced-features/custom-app) 이외의 파일에서 사용할 수 없습니다.

해결 방법

이러한 충돌을 피하기 위해서는, 모든 first-party 글로벌 css를 pages/_app.js file에서 import하도록 고치세요.

혹은, CSS 모듈을 통해 로컬 CSS(구성 요소 수준 CSS)를 사용하도록 구성 요소를 업데이트합니다. 이것이 선호하는 접근 방식입니다.

예시

styles.css라는 스타일 시트를 고려하십시오.

//styles.css
body {
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

아직 없는 경우 pages/_app.js 파일을 만듭니다. 그런 다음 styles.css 파일을 가져옵니다.

// pages/_app.js
import "../styles.css";

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

요약

  • 해당 에러메세지가 되었다면, 위의 페이지를 참조한다.
  • 위의 방식데로 하였는데, 에러가 발생한다면 next 버전을 확인해본다. 11.X.X 버전에서 해당 이슈가 발생해서 리액트 및 next를 최신버전으로 업데이트해보니 해당 에러가 해결되었다

Dynamic Import 로 인한 Re-render 에러

Dynamic Import?

Next.js는 ES2020의 dynamic import 문법을 지원하는데, dynamic import를 사용하면 모듈(혹은 컴포넌트)을 빌드 타임이 아닌 런타임에 불러오도록 한다. 이를 통해 번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다.

현상

외부 스크립트(google map, paypal, 등 외부 자바스크립트나 라이브러리 등)를 불러오는 컴포넌트를 Dynamic Import 불러오는데, 스크립트를 맨 처음에 두 번 이상 불러오는 현상이 발생하였다. useEffect ... [] 사용했음에도 불구하고. 해당 스크립트는 window 이벤트를 사용하고 창의 크기를 변경할 때마다 수시로 스크립트를 새로 불러왔다.

해결 방법

간단하게 dynamic import 하지말고 그냥 import 불러온다. dynamic import는 런타임에 불러옴에 따라 전역 객체인 window 이벤트를 두 번 볼러오는거 같았다.

참조 문서 및 사이트

  • [Global CSS Must Be in Your Custom <App>]https://nextjs.org/docs/messages/css-global()

상단으로 푸샤 깃허브 이동

댓글남기기

참고