Next.js에서 strict mode 비활성화하기

리액트의 strict mode는 예상하지 못한 에러를 방지해 주는 역할을 한다.

배포할 때는 strict mode가 자동으로 비활성화되지만, 개발하는 과정에서는 예상치 못한 에러를 만들기도 한다.

그래서 strict mode를 비활성화하고 사용하는 걸 선호하는데, React에서는 app.js 또는 index.js 파일에서 <React.StrictMode> 부분을 없애주면 된다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  // <React.StrictMode>  // 이 부분을 주석 처리하거나 제거
      <App />
  // </React.StrictMode>
);

 

 

하지만 Next.js는 React와 파일 구조가 다르기 때문에 next.config.ts 파일(ts를 사용하지 않는다면 next.config.js)에서 strict mode를 비활성화시켜야 한다. 이를 위해 reactStrictMode 옵션을 false로 설정해준다.

// next.config.ts(혹은 next.config.js)

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: false,
};

export default nextConfig;

이렇게 설정하면 Next.js에서 React Strict Mode가 비활성화되며, 예상하지 못한 두 번의 마운트나 콘솔 로그 중복 문제를 해결할 수 있다.