nextjs preload 에러 발생 이유 및 해결

 

The resource http://localhost:3000/_next/static/css/app/layout.css?
was preloaded using link preload but not used within a few seconds from the window's load event.

Please make sure it has an appropriate as value and it is preloaded intentionally.

 

이 에러 메시지는 Next.js (또는 일반 웹 앱)에서 CSS 리소스를 preload했는데, 실제로는 안 썼다는 경고야.

preload한 CSS가 몇 초 안에 쓰이지 않았다는 브라우저 경고

 

"너 link preload로 CSS를 미리 불러오긴 했는데, 실제로 그 CSS는 몇 초 내에 쓰이지 않았어. 괜히 preload 하지 말고 필요할 때 불러와~"

즉, 페이지 동작에는 영향ㄴㄴ 최적화 경고일뿐!

대부분 무시 가능, 아니면 preload 제거하거나 정확히 as="style" 지정

 

왜 발생하냐면?

Next.js나 다른 프레임워크에서 자동으로 preload 태그를 삽입하는 경우가 있어.
이때 실제 페이지 렌더링에서 해당 CSS가 안 쓰이거나, 늦게 로딩되면 이 경고가 뜨는 거지.

특히 이런 경우에 자주 나와:

1. layout.css가 기본 페이지에서 안 쓰이고, 나중에 lazy load 되는 페이지에서만 쓰일 때
2. Dynamic import로 컴포넌트를 불러오고, 그 안에서 CSS를 쓸 때
3. CSS 모듈이지만 실제로는 특정 조건일 때만 적용되는 스타일일 때

 

해결 방법은?

사실 무시해도 괜찮은 경고야. 앱이 동작에는 문제가 없거든.
다만, 경고 없애고 싶다면:

1. ❌ preload를 직접 넣었다면 → rel="preload" 제거

2. ✅ lazy load된 컴포넌트에 해당 CSS를 사용하고 있다면 그냥 무시해도 됨 (Next.js가 최적화 도중 자동으로 넣는 거라 발생)

          또는 as="style"을 정확히 명시했는지 확인