[NextJS / 오류] Duplicate atom key 해결 방법

 

 

1. 문제 원인

NextJS에서 Recoil을 사용할 경우 발생하는 오류로 파일이 변경되면 다시 빌드되면서 Atoms의 State들이 재선언 되어 발생한다. NextJS에서만 발생하는 오류로 기능적으로는 문제가 없다.

 

 

2. 해결 방법(1)

고유성이 보장되는 UUID를 활용하여 key값을 생성한다.

npm install uuid

// TypeScript
npm i --save-dev @types/uuid    

 

import { atom, selector } from "recoil";
import { IVideo } from "../api/youTubeApi";
import { IGetListResult, getPopularList } from "./../api/youTubeApi";
import { v1 } from "uuid";

// 빌드되는 과정에서 재선언 되어 중복 오류가 발생한다. uuid모듈을 활용하여 중복을 방지
export const isVideoAtom = atom<IVideo | undefined>({
  key: `isVideo/${v1()}`,
  default: {
    kind: "",
    etag: "",
    id: "",
    snippet: {
      publishedAt: "",
      channelId: "",
      title: "",
      description: "",
      channelTitle: "",

      thumbnails: {
        default: { url: "", width: 0, height: 0 },
        medium: { url: "", width: 0, height: 0 },
        high: { url: "", width: 0, height: 0 },
        standard: { url: "", width: 0, height: 0 },
        maxres: { url: "", width: 0, height: 0 },
      },
    },
  },
});

 

2. 해결 방법(2)

key 중복검사를 비활성화하는 방법

RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false

• 최상위 폴더에 .env 파일 생성

 

(_app.tsx)

import { RecoilRoot, RecoilEnv } from "recoil";

export default function App({ Component, pageProps }: AppProps) {
    RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
    ...
    return(
    ...
    )
}

• RecoilEnv를 import해서 설정해준다.