4

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?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Prashant Patil
  • 2,463
  • 1
  • 15
  • 33

4 Answers4

4

Adding localePath in next-i18next.config.js did help in my case.

const path = require('path')

module.exports = {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'de'],
      localePath: path.resolve('./public/locales')
    }
  };
Dawid Kubicki
  • 41
  • 2
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
1

Although the post is now old, I share the solution that solved the problem in my project (focus on the addition of localePath):

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'it', 'de', 'es', 'fr', 'ja']
  },
  defaultNs: 'shared',
  fallbackLng: { default: ['en', 'it', 'de', 'es', 'fr', 'ja'] },
  localePath: path.resolve('./public/locales'),
};

I specify that localePath should not be included among the properties of i18n as indicated in another answer as doing so produces a type error.

Also make sure to use getServerSideProps and not getStaticProps on pages, for example:

export async function getServerSideProps({ locale }) {
  return {
    props: {
      ...(await ssrTranslations(locale, ['login', 'shared'])),
    },
  };
}
lgalassi
  • 26
  • 4
-1

Import the serverSideTranslations

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

Now from the getServerSideProps, pass the ..(await serverSideTranslations(locale, ["common"])), with the props.

export const getServerSideProps: GetStaticProps = async ({
  locale,
  locales,
  query
}: any) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    }
  }
};

Now add your language strings inside /public/locales/en/common.json

For example

{
  "home": {
    "Test": "Test"
  }
}

You can add more language strings inside the locales directory.

Restart your Next.js app. It will work.

Techomoro
  • 1
  • 1