Next.js: Warning: Prop `className` did not match.

[bcjohnblue]

Bug report

Describe the bug

I have read #7322 #7423, which is similar to my questions.
However, I don't use any Styled components and these solutions above can not help me.

To Reproduce

1. Go to nextjs-classname-not-match
2. Clone the repository and run
3. See the Warning: Prop className did not match
4. Also, yon can see the token is on the screen, but className can't be bind on the DOM.

Expected behavior

The className of 'token' should be bind on the DOM correctly.

Screenshots

System information

• OS: mac
• Browser: chrome 79
• Version of Next.js: latest (9.1.6)

[aganglada]

This makes a lot of sense, as you are using a browser functionality and you are expecting it to work on the server as well.

export default () => {
  const token = process.browser ? localStorage.getItem('token') : ''
  const className = token ? 'token' : ''
  console.log('className:', className);

  return (
    <div className={className}>
      {token}
    </div>
  )
}

To fix your problem, I would wrap that code in an useEffect call and update it when mounted.

This is not a nextjs specific problem, but how react SSR hydration works.
For further issues, please ask here https://spectrum.chat/zeit.

Close this bug request.

[bcjohnblue]

This makes a lot of sense, as you are using a browser functionality and you are expecting it to work on the server as well.

export default () => {
  const token = process.browser ? localStorage.getItem('token') : ''
  const className = token ? 'token' : ''
  console.log('className:', className);

  return (
    <div className={className}>
      {token}
    </div>
  )
}

To fix your problem, I would wrap that code in an useEffect call and update it when mounted.

This is not a nextjs specific problem, but how react SSR hydration works.
For further issues, please ask here https://spectrum.chat/zeit.

Close this bug request.

Thanks, It is fixed by using useEffect.