next-i18next: Text content does not match server-rendered HTML

🐛 Bug Report

When a use t function inside a component, next return to me, this error: , have any aformation about that?

To Reproduce

I’m using ChakraUI, and Next with typescript, inside my component file a had this code:

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import { GetStaticProps } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'react-i18next'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {

  const { t } = useTranslation('common')

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {t('title')}
      </main>
    </>
  )
}

export const getStaticProps : GetStaticProps = async ({locale}) => {
  const lang = {
    ...(await serverSideTranslations(locale ?? 'en', ["common"])),
  };
  return { props: { ...lang } };
}

Your Environment

runtime version: v16.16.0
next version:v13.2.4
i18next version: v22.4.13
os: Windows

About this issue

Original URL
State: closed
Created a year ago
Comments: 19 (9 by maintainers)

Most upvoted comments

I think the problem is that you are using useTranslation from react-i18next, and you should be using it from next-i18next

Yes, for sure this is an issue. Forget about my comment above.

Just use the correct import: import { useTranslation } from 'next-i18next';

adrai on Mar 24, 2023

You passed the arguments to the serverSideTranslations function in the wrong way…

export async function getStaticProps({ locale }: { locale: any }) {
  return {
    props: {
-      ...(await serverSideTranslations(locale || "es", ["common"]),
+       ...(await serverSideTranslations(locale || "es", ["common"],
      nextI18nextConfig,
-      ["en", "es"]),
+      ["en", "es"])),
      // Will be passed to the page component as props
    },
  };
}

and also remove the resourcesToBackend part here:

/** @type {import('next-i18next').UserConfig} */

module.exports = {
  debug: process.env.NODE_ENV === "development",
  i18n: {
    defaultLocale: "es",
    locales: ["en", "es"],
  },
  // localePath: typeof window === 'undefined' ? require('path').resolve('./public/locales') : '/locales',
  react: {
    useSuspense: false,
  },
-  resourcesToBackend: (language, namespace) =>
+  //resourcesToBackend: (language, namespace) =>
-    require("path").resolve(`./public/locales/${language}/${namespace}.json`),
+    //require("path").resolve(`./public/locales/${language}/${namespace}.json`),
  // webpack5: true,
  // webpack: (config) => {
  //   config.resolve.fallback = { fs: false, path: false };
  //   return config;
  // },
};

here a fixed fork

adrai on Feb 15, 2024

Hey @adrai! Sorry for bringing this up again but why do we need to import useTranslation from next-i18next? I’m building a component library for React and Next.js applications and I’d like to always import from react-i18next.

Also, I’ve checked the code and it seems that next-i18next is simply re-exporting react-i18next, is that correct?

andrejoaquim-dc on Mar 29, 2023

If it’s not the wrong import statement, please provide a minimal reproducible example repository and create a new issue.

adrai on Oct 10, 2023