Getting 'useLayoutEffect' Warning with basic nextjs setup

[SanskarDahiya]

🐛 Bug Report

Getting the below mentioned warning

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at MyApp (webpack-internal:///./src/pages/_app.tsx:164:18)
at I18nextProvider (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/react-i18next@15.0.1_i18next@23.14.0_react-dom@18.2.0_react-native@0.75.2_react@18.2.0/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:11:5)
at AppWithTranslation (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next-i18next@15.3.1_i18next@23.14.0_next@13.1.6_react-i18next@15.0.1_react@18.2.0/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:82:22)
at StyleRegistry (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/styled-jsx@5.1.1_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react@18.2.0/node_modules/styled-jsx/dist/index/index.js:449:36)
at PathnameContextProviderAdapter (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/router/adapters.js:60:11)
at AppContainer (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/render.js:290:29)
at AppContainerWithIsomorphicFiberStructure (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/render.js:326:57)
at div
at Body (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/render.js:613:21)

To Reproduce

Versions: "react": "^18.2.0", "i18next": "^23.14.0", "i18next-chained-backend": "^4.6.2", "i18next-http-backend": "^2.6.1", "i18next-localstorage-backend": "^4.2.0", "next-i18next": "^15.3.1", "react-i18next": "^15.0.1", "next": "^13.1.6",

A minimal reproducible example. A codesandbox example or similar or at least steps to reproduce the behavior:

// Paste your code here

Expected behavior

A clear and concise description of what you expected to happen.

// Paste the expected results here

Your Environment

• v20.16.0
• i18next version
• os: Mac
• any other relevant information

[adrai]

You may ask in the Next.js repo.... there is not much we can do here