계획대로 되지 않는 것이 인생

npx create-next-app@latest

  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.1.2"
  },

위와 같이 처음 next app을 만들고, yarn dev 를 하면

우측 하단에 이런 에러가 뜨는 경우가 있다.

정말 아무 것도 건드리지 않았는데 뜨는 경우인데... 에러 로그를 자세히 보면,

(개인적으로 제일 해결하기 어려운) Hydration error 가 발생했다고 뜬다.

하지만 맨 처음 만들자마자 생긴 에러라서, 뭔가 버전에 에러가 있나 싶었더니, 에러 맨 아랫줄의 "브라우저 확장 프로그램"이 문제였다.

혹시 아래 확장프로그램 중 하나가 있다면 삭제해보자.

깔끔하게 사라진다.

필자는 ColorZilla였다.

1 - ColorZilla

2 - Wappalyzer

3 - Urban VPN

4 - LastPass

5 - Hacker Vision

6 - WhatFont

7 - Video Speed Controller for HTML videos

8 - Glot

9 - AI Grammar Checker & Paraphraser – LanguageTool

10 - Grammarly

11 - Invert

12 - Dashlane

출처

https://www.reddit.com/r/nextjs/comments/1gabiqn/hydration_error_when_installing_nextjs_15/?rdt=49864