Integrating next-i18next into a NextJS Typescript project

[aymardika]

Hi next-i18next team,
I applied the steps described into this :
https://github.com/adrserr/adrserr.com/blob/main/data/posts/en/i18n-typescript-next.mdx
but it does not seem to work on my application. So wondering if I am missing something in importing the json resources bundle ?

@adrai please could you help?

Here is the code block

• In public/locales/en/settings.json

{
"update-infos": "Update My Information",
"credentials" : "Credentials",
"payment-methods": "Payment Methods",
"my-orders":"My Orders",
"my-messages": "My Messages",
"addresses" : "Addresses"
}

• In react-i18next.d.ts

// import the original type declarations
import 'react-i18next'
// import all namespaces (for the default language, only)
import { Resources as LocaleResources } from "@custom-types/locales";

declare module 'react-i18next' {
// and extend them!
interface Resources extends LocaleResources {}
}

• In /pages/user/settings/index.tsx

''''
_import { Router, useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Resources from "react-i18next"

interface Props {
selectedIndex:Number
selectedStyle:String
}

type ClickFunction = (event: React.MouseEvent<Element, MouseEvent>)=>void

type ClickableElement = {
name:string
clickFunction:ClickFunction
}

export default function SideMenu({selectedIndex,selectedStyle}:Props):JSX.Element{
const { t } = useTranslation('settings');
const router = useRouter();

const items:ClickableElement[] = [
{
name: t('settings.update-infos'),
clickFunction:(e)=>router.push("/user/settings")
},
{
name: t('settings.credentials'),
clickFunction:(e)=>router.push("/user/credentials")
},
name: t('settings.my-messages'),
clickFunction:(e)=>router.push("/user/my-messages")
},
{
name: t('settings.addresses'),
clickFunction:(e)=>router.push("/user/addresses")
}
]

return(

{items.map((item,k)=>(

    <li onClick={item.clickFunction} key={k} className={`relative hover:font-bold ${selectedIndex!==k?"":selectedStyle}`}>
    <a className="flex items-center pb-6 overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 text-lg rounded transition duration-300 ease-in-out" href="#!" data-mdb-ripple="true" data-mdb-ripple-color="dark">
      {/* <svg aria-hidden="true" focusable="false" data-prefix="fas" className="w-3 h-3 mr-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
      </svg> */}
      <span>{item.name}</span>
    </a>
  </li>
    ))}

</ul>

) }

export const getStaticProps = async ({ locale }: {locale : string}) => ({

props: {
...(await serverSideTranslations(locale, [
  'components.modules.nav',
  'settings',
  'components.modules.footer',
  'components.modules.languageSelector',
   ])),

},

});_
''''

[adrai]

Did you try #1887 (comment) ?

[aymardika]

We finally got it resolved. It was due to a wrongs module definition. So we replaced :

module.exports = Settings

By

export default Settings

and it worked

[aymardika]

Thanks @adrai