1 of 1 error Next.js (15.1.4) out of date (learn more) (Turbopack)
Console 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
- A server/client branch
if (typeof window !== 'undefined'). - Variable input such as
Date.now()orMath.random()which changes each time it's called. - Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
- data-new-gr-c-s-check-loaded="14.1231.0"
- data-gr-ext-installed="" Show ignored frames how off this kind of error in my nextjs application i dont want to show
Fixing React Hydration Errors in Next.js
It looks like you're experiencing a hydration error in your Next.js application. The error message indicates that there's a mismatch between the server-rendered HTML and what React expects on the client side. The attributes data-new-gr-c-s-check-loaded="14.1231.0" and data-gr-ext-installed="" suggest this is likely caused by a browser extension (possibly Grammarly) that's modifying your HTML before React can hydrate it 1.
How to Fix This Issue
There are several approaches to resolve this:
Solution Approaches
1. Add suppressHydrationWarningsto your HTML element
The simplest approach is to add the suppressHydrationWarnings attribute to your HTML element in your root layout. This tells React to ignore hydration mismatches for the entire document 1.
<html lang="en" suppressHydrationWarnings>
<body>{children}</body>
</html>2. Use a component wrapper for specific sections
For more targeted suppression, use the SuppressHydrationWarning component I've provided. This is useful for wrapping specific parts of your UI that might cause hydration issues.
3. Use a Client-Only component
For components that use dynamic data like dates or random values, render them only on the client side using the ClientOnly component:
<ClientOnly>
<p>Current time: {new Date().toLocaleTimeString()}</p>
</ClientOnly>4. Fix the root cause (recommended)
While suppressing warnings works, it's better to fix the underlying issues:
- For browser extensions like Grammarly that add attributes, you can't control this directly, so the suppression approach is valid
- For date/time values, use a consistent approach between server and client
- For random values, generate them on the server and pass them as props
- For client-side only code, use proper conditional rendering with the
ClientOnlycomponent
Best Practices to Avoid Hydration Errors
- Use proper conditional rendering: Avoid using
typeof window !== 'undefined'directly in your JSX. - Consistent data sources: Ensure server and client render with the same data.
- Handle dynamic content properly: For content that must differ between server and client, use the
useEffecthook to update it after mounting. - Use Next.js built-in features: Leverage
next/dynamicwithssr: falsefor components that should only render on the client. - Validate HTML structure: Ensure your HTML is properly nested and follows standards.
React 19 (included in Next.js 15.1) has improved hydration error reporting with better diffs to help identify the exact mismatch 1.
