Simply adding: <html lang='pt-br'>
to my component in _app.tsx
const Layout = (props: ILayoutProps) => {
return (
<html lang='pt-br'>
<div className={`${inter.className} layout`}>
<div className='w-full h-full flex flex-col justify-between'>
<Left>
{children}
</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.