Hi everyone, I created a React and Next.js website, and I'm refactoring my code to clean console erros. The website has multiple languages and dark/light theme.

When I run npm run dev, it shows this 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 <main> in <div>.

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

Component Stack
main
Home
ThemeProvider
MyApp

I think the problem is in the index.tsx because when I remove the commented lines below, all the erros go away.

//imports

// export async function getServerSideProps({ locale }: { locale: string }) {
//     return {
//         props: {
//             ...(await serverSideTranslations(locale, ['common'])),
//         },
//     };
// }

function Home() {
    const { theme } = useTheme();
    const { t, i18n, ready } = useTranslation('common');
//code

    return (
        <main>
            {ready ? (
                <>
                    //code
                </>
            ) : (
                <div>Loading...</div>
            )}
        </main >
    );
}

export default Home;

Or maybe the problem is in one of these files:

next-i18next.config.js:

module.exports = {
    i18n: {
        defaultLocale: 'pt-BR',
        locales: ['en-US', 'es-ES', 'pt-BR'],
    },
};  

next.config.js:

/** @type {import('next').NextConfig} */
const { i18n } = require('./next-i18next.config');
const nextConfig = {
    i18n
}

module.exports = nextConfig;