next-i18next useTranslation without getStaticProps

Question

My problem is that I can't make translations to work outside a regular page component.

The only case that works is when I use getStaticProps. Example that works just fine:

import {useTranslation} from 'next-i18next';
export async function getStaticProps({locale}: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'login'])),
    },
  };
}

export default function Login() {
  const {t} = useTranslation(); 
  console.log(t('common:user')); //returns 'User' as it's defined in the translation files.
  return <></>
}

However when I try to use next-i18next in a regular component it just doesn't work no metter what I do. Example:

import {useTranslation} from 'next-i18next';
export function Sidebar(props: SidebarProps) {
  const {t} = useTranslation('common');
  console.log(t('common:user')); // returns 'common:user'
}

I after 5 hours of google, gpt and documentations, I gave up everything that I try, simply doesn't work.

Here are some infos about the project:

public folder has the following structure: public/locales/es/common.json , login.json , sidebar.json ...

next-i18next.config.js:

module.exports = {
  i18n: {
    defaultLocale: 'pt',
    locales: ['pt', 'en', 'es'],
    fallbackLng: ['en'],
  },
};

next.config.js:

const { i18n } = require('./next-i18next.config')
module.exports = {
  trailingSlash: true,
  reactStrictMode: false,
  i18n,
  env: {
    BASE_URL: process.env.BASE_URL,
    VIACEP: process.env.VIACEP,
    DEFAULT_IMAGE_TYPE: process.env.DEFAULT_IMAGE_TYPE
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  }
};

_app.tsx:

import {DefaultLayout} from '#/layout';
import {appWithTranslation} from 'next-i18next';
import type {AppProps} from 'next/app';
import {useEffect, useState} from 'react';
import 'react-toastify/dist/ReactToastify.css';
import 'react-toggle/style.css';
import styled from 'styled-components';
import {useLoader} from '#/components/loader';
import {useConfirmModal} from '#/components/modal/confirm-modal';
import {useErrorModal} from '#/components/modal/error-modal';
import {useToast} from '#/components/toast';
import {useGlobalContext} from '#/hooks/use-global-context';
import {useReload} from '#/hooks/use-reload';
import '#/styles/globals.css';
import {useThemeProvider} from '#/theme/theme';
import {GlobalStyle} from './global-styles';

console.warn = console.error = () => {};

const AppView = styled.div`
  position: relative;
  z-index: 1;
  width: 100vw;
`;

function App({Component, pageProps, ...appProps}: AppProps) {
  const Theme = useThemeProvider();
  const Context = useGlobalContext();
  const Loader = useLoader();
  const ErrorModal = useErrorModal();
  const ConfirmModal = useConfirmModal();
  const Toast = useToast();
  const Reload = useReload();

  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === 'undefined') {
    return <></>;
  }

  function getContent() {
    if ([`/login`].includes(appProps.router.pathname)) return <Component {...pageProps} />;

    return (
      <DefaultLayout>
        <Component {...pageProps} />{' '}
      </DefaultLayout>
    );
  }

  return (
    <Context.Component>
      <Theme.Component>
        <AppView>
          <Loader.Component />
          <Toast.Component />
          <ErrorModal.Component />
          <ConfirmModal.Component />
          <Reload.Component />
          <GlobalStyle />
          {getContent()}
        </AppView>
      </Theme.Component>
    </Context.Component>
  );
}

export default appWithTranslation(App);

version: "next-i18next": "^14.0.0",

Any help would be appreciated! Thanks in Advance!

I tried everything that I found and nothing seems to work

next-i18next useTranslation without getStaticProps

0 Answers0