versel does not return i18nexus key values from the getServerSideProps nextjs method
Question
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 } } }
1 answers
solution1
0 2023-01-25 00:03:53
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.