0

I ran into this problem: I added a translation to my site using next-i18next, so that the development was faster, I used i18nexus. When I develop applications I don't have any problems. But when uploading it to Versel, the values from i18nexus simply do not display (only the names of the keys are output). For output, I use the getServerSideProps method. I can't use the getStaticProps method because to use it in [id] components, getStaticPath is required, and I don't need it in the project because I don't get data by SSR.

next-i18next.config - fail

module.exports = {
   i18n: {
      locales: ['en', 'ru', 'ar', 'es'],
      defaultLocale: 'en'
   }
}

next.config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
  images: {
    domains: ["cdn.worldota.net"]
  },
  i18n: {
    locales: ['en', 'ru', 'ar', 'es'],
    defaultLocale: 'en',
  },
  env: {
    API_HOST: 'http://localhost:3000/api'
  },
}

module.exports = nextConfig

_app.tsx

function App({ Component, pageProps }: AppProps) {
//code

  return (
    <>
      <ReactReduxContext.Consumer>
        {({ store }) => (
          <PersistGate persistor={(store as any).__persistor} loading={<LoadingRouter />}>
            <Head>
              <link rel="icon" href={'./favicon.svg'} type="image/svg" />
            </Head>
            <div className='wrapper'>
              {loading && <LoadingRouter />}
              <Component {...pageProps} />
            </div>
          </PersistGate>
        )}
      </ReactReduxContext.Consumer>
    </>
  )
}

App.getInitialProps = wrapper.getInitialAppProps(store => async ({ ctx, Component }) => {
// store.dispatch(getUserData(userData.data.user)) и т.д.
   return {
    pageProps: Component.getInitialProps ? await Component.getInitialProps({ ...ctx, store 
   }) : {},
  }
})

index.tsx

const Home: NextPage<HomeType> = ({ locale }) => {
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(languageFunction(locale))
  }, [])

  return (
    <div className='shelters_housing'>
      <MainScreen />
      <div className='shelters_housing_flex'>
        <div className='shelters_housing_flex_container'>
          <TravelToEarn />
          <SearchByPlacementType />
          <PopularPlacesInRussia />
          <SubscribeNewsletter />
          <PopularHouses />
          <OurFavoriteDestinations />
        </div>
      </div>
      <SaveTimeAndMoney />
      <Footer />
    </div>
  )
}

export const getServerSideProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale!, ['main', 'footer', 'header', 'common', 'regions', 'discover'])),
      locale
    }
  }
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Стас Лабанов
  • 5
  • 3

1 Answers1

0

It sounds like you need to check this out in the docs of next-i18next:

https://github.com/i18next/next-i18next#vercel-and-netlify

You'll need to include localePath: path.resolve('./public/locales') in your next-i18next.config.js

dcporter7
  • 535
  • 3
  • 14