Render Twice in Next.js

Next.js 개발 환경의 이중 렌더링과 reactStrictMode 설정을 확인한 기록.

Next.js, Frontend, TypeScript, React

각 이벤트가 두 번씩 렌더링 된다.
각 이벤트가 두 번씩 렌더링 된다.

React에서 StrictMode를 설정하면 두 번 렌더링되는 문제처럼, Next.js에서도 두 번 렌더링하는 경우가 있다.

다만 React에서는 index.js에서 React.StrictMode으로 랩핑하던 것을 없애주면 되는데 비해, Next.js에서는 _app.js나 index.js에서는 그런 설정을 할 수 있는 부분을 찾을 수 없다.

next.config.js의 reactStrictMode를 false로 변경해주자.
next.config.js의 reactStrictMode를 false로 변경해주자.

대신, Next.js 패키지의 설정을 관리하는 파일인 next.config.js에서 reactStrictMode가 true로 되어있는 경우, 혹은 CNA로 패키지를 만들었을 경우 프리셋은 true로 설정되어있는데, 이를 false로 설정하고 서버를 재시작해주면 된다.

React v18.0 - React Blog

Next dev with React 18, Always render twice · Issue #35822 · vercel/next.js


원문: Medium