Reslove react hydration error in simple way 🚀

Fix Next.js “Text content does not match server-rendered HTML” React hydration error in Next Js

Hydration error

How it look’s

Hydration error in Technologies

1. Next.Js
2. TypeScript
3. React Jsx
4. JavaScript
5. React Js

How it look’s React app

_app.js

Next.js uses the App component to initialize pages. You can override it and control the page initialization and:

1. Persist layouts between page changes
2. Keeping state when navigating pages
3. Custom error handling using componentDidCatch
4. Inject additional data into pages
5. Add global CSS To override the default App, create the file ./pages/_app.js as shown below:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

Reslove hydration in Jsx 🥳

Reslove react hydration error in simple way any so easy. if you want to resolve react hydration error in typeScript go below you will get the code.

import '../styles/globals.css'
import { useEffect, useState } from 'react'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

const Hydrated = ({ children }) => {
  const [hydration, setHydration] = useState(false)
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setHydration(true)
    }
  }, [])
  return hydration ? children : <div></div>
}

Reslove hydration in Tsx 😏

Reslove react hydration error in simple way in Next Js with TypeScript App.

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { useEffect, useState } from 'react'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Hydrated>
      <Component {...pageProps} />
    </Hydrated>
  )
}

export default MyApp

const Hydrated = ({ children }: any) => {
  const [hydration, setHydration] = useState < boolean > false
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setHydration(true)
    }
  }, [])
  return hydration ? children : <div></div>
}

Reslove hydration in React Js ☠️

Reslove react hydration error in simple way in React App.

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render(
  <Hydrated>
    <App />
  </Hydrated>,
  document.getElementById('root')
)

const Hydrated = ({ children }) => {
  const [hydration, setHydration] = useState(false)
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setHydration(true)
    }
  }, [])
  return hydration ? children : <div></div>
}