next-i18next problem with NextJs Layout folder inside of _app

Question

Hello I am trying to add a multilanguage support with next-i18next inside my NextJs app. Everything is fine expect that I can't use "serverSideTranslations" (next-i18next/serverSideTranslations), inside my Layout component. Layout is inside _app.js

The code is

import { appWithTranslation } from "next-i18next";

function MyApp({ Component, pageProps }) {

<Layout>
        <Component {...pageProps} />
      </Layout>
}

export default appWithTranslation(MyApp);

Note: To use serverSideTranslations inside the Layout I need to use getStaticProps

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common", "home", "footer"])),
      // Will be passed to the page component as props
    },
  };
}

But like we know, we can't do that. So I tried from some guy UKRman - Link from the other post Click here

everything is copied from him except this code

import { serverSideTranslations as baseServerSideTranslations } from 'next-i18next/serverSideTranslations'
import { dt } from '../../constants/defaultTranslate'
import { DEFAULT_LANGUAGE } from '../../constants/languages'
import nextI18NextConfig from '../../../next-i18next.config.js'

const serverSideTranslations = async (locale, domains = []) => {
  return await baseServerSideTranslations(locale, [...dt, ...domains], nextI18NextConfig, [
    DEFAULT_LANGUAGE,
  ])
}

export default serverSideTranslations

Mine is

import { serverSideTranslations as baseServerSideTranslations } from "next-i18next/serverSideTranslations";
// import { dt } from '../../constants/defaultTranslate'
// import { DEFAULT_LANGUAGE } from '../../constants/languages'
import nextI18NextConfig from "../../../next-i18next.config.js";

const serverSideTranslations = async (locale, domains = []) => {
  return await baseServerSideTranslations(
    locale,
    ["bg", "en", ...domains],
    nextI18NextConfig,
    ["bg", "en"]
  );
};

export default serverSideTranslations;

After all that I am getting Error: Default namespace not found \public\translation\en\common.json But file is there and when I remove localePath inside of next-i18next.config.js, is not getting the problem, but I still not fixing the problem with using useTranslation inside a Layout component, which is inside _app. Where now my layout is hooked inside index.js with this code

Home.getLayout = (page) => <Layout>{page}</Layout>

Trying to fix the problem with Layout and next-i18next.config

next-i18next problem with NextJs Layout folder inside of _app

0 Answers0