0

I'm using next-i18next module for multilingual support.

I have some static pages and dynamic pages as well. both working fine on local.

I deployed all static pages on vercel, all worked fine on vercel. But dynamic page is not working on vercel. it shows 404 page for that dynamic page.

Below is the code of the dynamic page. (pages/test-page/[questionId].js)

import { useState, useEffect } from "react";
import {Layout} from "@components/common";
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { TestComponent } from '@components/TestComponent'

const TestPage = () => 
{
    const { t } = useTranslation('common')
    const router = useRouter()
    const {questionId} = router.query;
    const [isApiLoaded,setIsApiLoaded] = useState(false)
    
    return (
        <TestComponent 
            t={t}
            isApiLoaded={isApiLoaded}
            setIsApiLoaded={setIsApiLoaded}
        />
    )
}
TestPage.Layout = Layout

export const getServerSideProps = async ({ locale }) => ({
    props: {
        ...(await serverSideTranslations(locale, ['home', 'common']))
    }
});

export default TestPage;

How to fix this issue?

Prashant Patil
  • 2,153
  • 1
  • 11
  • 25

1 Answers1

1

I was facing the same issue and for a temporary fix I used the i18n object from next-i18next that has a function called getResource that gets the current locale with its translations

// import { i18n } from 'next-i18next';
// import { useRouter } from 'next/router';

const [translation, setTranslation] = useState({});
useEffect(() => {
  const bundle = i18n.getResource(locale, 'common');
  setTranslation(bundle);
}, []);

And to avoid rewrite the code with the t function, you could use

  // LINK https://stackoverflow.com/a/43849204/14263138
  const t = (word) => word
    .split('.')
    .reduce((p, c) => (p && p[c]) || null, translation);

With this applied, you don't need to use the getServerSideProps

Leonardo
  • 11
  • 1