Next.js 15에서 "URL.canParse()" 오류 해결하기 (feat: i18next)

문제상황 : Next.js 15에서 i18next를 설치하자 "TypeError: URL.canParse is not a function"오류 발생.

이 에러는 "URL.canParse()"라는 함수가 브라우저나 Node.js 환경에서 아직 정식으로 지원되지 않아서 발생.
특히 "i18next", "resourcesToBackend" 같은 라이브러리 내부에서 이 함수를 사용하는 경우, 별도로 처리해주지 않으면 앱이 크래시가 남.

💡 해결 방법 : 간단한 폴리필(Polyfill) 추가하기

다행히 이 문제는 "폴리필(Polyfill) 을 통해 쉽게 해결 가능.
폴리필이란?
지원되지 않는 기능을 흉내 내는 코드
다음 코드를 앱 진입점 (예: app/layout.tsx 또는 app/page.tsx)상단에 추가하면 에러메세지가 더 이상 뜨지 않는걸 확인할 수 있다.

if (typeof URL.canParse !== "function") {
  URL.canParse = function (url: string) {
    try {
      new URL(url);
      return true;
    } catch {
      return false;
    }
  };
}

이 코드는 "canParse()" 함수가 없을 경우에만 동작하며, 정상적인 URL이면 true, 문제가 있는 URL 이면 false를 반환

✅ Tips
- 이 폴리필(Polyfill)은 Node.js 18 또는 20 환경에서도 안전하게 동작.
- Next.js 15에서 "URL.canParse()"를 직접 쓰지 않더라도, 내부 의존성에서 사용할 수 있으므로 위처럼 미리 막아두는게 안전.
- 특히 i18n 설정 중 "i18next-resources-to-backend" 사용 시 발생 가능성 높음