Next.js sw.js 404 오류 해결

새 프로젝트를 시작했는데, 콘솔에 계속 이상한 요청이 찍혔다.
/sw.js, _next/static/chunks/... 등등 404 오류가 반복적으로 발생했다.
심지어 내가 명시적으로 서비스워커를 등록하지도 않았는데 말이다.
왜일까?

 

처음엔 .next 폴더 캐시 문제인 줄 알았다

Next.js 프로젝트에서 정적 파일이 404 나는 경우는 대부분 .next/ 폴더 때문이라고 알고 있어서, 바로 이렇게 지웠다.

rm -rf .next
yarn dev

그런데도 sw.js, _next/static/... 이런 요청들이 계속 404 Not Found로 찍히는 거다.
심지어 새 프로젝트인데다가 없는 파일인데도 말이다.
그래서 처음에는 “아 이거 Vercel 캐시인가?” “정적 경로 꼬였나?” 별의별 생각을 다 했는데…

 

원인은 다음과 같았다.

전 프로젝트에서 PWA + 서비스워커(sw.js) 사용했다. 브라우저는 한 번 등록된 service worker를 계속 사용한다.

도메인 기준으로 등록되기 때문에, 같은 주소(localhost:3000등)에서 실행하면 서비스워커가 재실행된다.

하지만 새 프로젝트에는 sw.js가 없기 때문에 404 에러가 발생하는 것이다,

 

여기서, 🔧 Service Worker란?

Service Worker는 브라우저가 백그라운드에서 동작하는 스크립트다.
우리가 페이지를 닫아도 계속 실행될 수 있고, 네트워크 없이도 앱이 동작하게 해주는 리소스.

요약하면,

• 📦 오프라인에서도 앱 실행 가능하게 만들기 (캐시)
• 🔔 푸시 알림 받기
• 🌐 네트워크 요청 가로채서 캐싱 또는 응답 가공하기
• ⚡ 웹 앱을 네이티브 앱처럼 동작하게 만들기 (PWA 핵심 기능)

즉, 브라우저에 등록해서 계속 살아있는 JS 파일이고, 내가 직접 지우지 않으면 다음 실행에도 계속 작동한.

 

그러면 📄 sw.js는?

sw.js는 service worker를 정의한 자바스크립트 파일 이름이야.
보통 public/sw.js에 위치하고, 앱이 처음 로딩될 때 다음처럼 등록된다.

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js");
  });
}

이 코드가 있으면 브라우저는 /sw.js를 요청해서 받아오고, 그걸 등록해서 백그라운드에서 돌리기 시작한다.
문제는 한 번 등록된 sw는 프로젝트를 새로 만들어도, 파일이 없어도 계속 요청된다... 그래서 /sw.js 404가 계속 뜨는 거다.

 

해결방법은 다음과 같다.

브라우저 서비스워커 캐시 삭제하면 된다.

 

1. 크롬에서 개발자 도구 (F12) 열기

2. Application 탭 클릭

 

3. 좌측 메뉴 → Service Workers 선택

4. Unregister 눌러서 다 지우기

5. Clear Storage 이동

6. Clear Storage 가서 Clear site data 클릭

이렇게 하면 sw.js 404 오류가 말끔히 해결되고 원래의 프로젝트가 정상 렌더링 된다.