[NextJS] Recoil RecoilRoot 위치 설정

Recoil 공식문서를 보면 RecoilRoot 컴포넌트를 root Component에 적절히 넣어두라고 나와있다.

Components that use recoil state need RecoilRoot to appear somewhere in the parent tree. A good place to put this is in your root component:

공식 문서의 예시에서는 App()에 적혀있는데...NextJS에는 App()이 없다. 그러므로 NextJS의 경우에는 _app.tsx에 RecoilRoot를 적어주면 된다.

//pages/_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";

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