next.jsserver-side-renderinghydration

Next.js 15.0.3. Hydration failed because the server rendered HTML didn't match the client

I created the project with npx create-next-app@latest./ When starting the project, there is an error "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used".

I tried removing the template that was set to default and left a blank page:

page.tsx: export default function Home() { return (<div>Test</div>); }

The mistake has not disappeared. I tried the older version next.js 14.2.1, there is no such error.

Settings:

Would you like to use TypeScript? » Yes

Would you like to use ESLint? » Yes

Would you like your code inside a src/ directory? » Yes

Would you like to use App Router? (recommended) » Yes

Would you like to use Turbopack for next dev? » No

Would you like to customize the import alias (@/* by default)? » No

Solution

  • Well, the error was given due to the VPN extension. The VPN itself wasn't enabled, but the error still appeared... I just disabled this extension and everything works as it should.