Next.js Discord

Discord Forum

I simply add html tag in the code:

Unanswered
Chinese Alligator posted this in #help-forum
Open in Discord
Chinese AlligatorOP
  <html lang='pt-br'>
        <div className={`${inter.className} layout`}>
          <div className='w-full h-full flex flex-col justify-between'>
              <Left>
                {childrenWithProps}
              </Left>
              <Footer />
          </div>
        </div>
        </html>


I get the error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <html> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error


Why is that? why is even different from server? do I need to compile anything? but simply removing it, make the page work again. This is the main thing used in _app.tsx component.

0 Replies