NextJS: Why i18next works only on http://localhost:3000/de (landingpage) but not as http://localhost-CodePudding

Sorry for being noob but I am really confused on how to work on this. So I followed the instructions on this https://github.com/i18next/next-i18next but confused when it comes to index.js. Whenever I click my toggle switch for /de in my landing page it translates alright in url "http://localhost:3000/de".

But in another page like "About" or in any other page it doesn't translate but the url switch to "http://localhost:3000/de/about". It doesnt go to my 404 error page. But I don't get it why it doesn't translate.

In my index.js if I removed "Service" component which contained all the components of landing page. And replace with other component file like "About" component page it translate alright.

It seems "http://localhost:3000/de" url only works in translation. But in different url path it doesn't. How to do this? Thank you..

Kindly see my code..

My locales path

public/locales/de/common.json

src/pages/_app.js

import nextI18NextConfig from '../../next-i18next.config'

 <Component {...pageProps} />

export default appWithTranslation(App, nextI18NextConfig);

src/pages/index.js

    import React from 'react';
    import Service from 'views/Service';
    import i18nextConfig from '../../next-i18next.config';
    import { serverSideTranslations } from "next-i18next/serverSideTranslations";
    
    const IndexPage = () => {
      
      return (
        <Service/> <— this contains my landing page the only can be translated as “localhost:/3000/de” (src/pages/views/service)
      )
    };
    
    export async function  getServerSideProps({ locale }) {
      return { props: { 
        ...(await serverSideTranslations(locale, ['common', 'footer', 'stripe', ‘navbar'],  i18nextConfig))
       } }
    }
export default IndexPage;

in my navbar it is in global component I put my toggle language switcher src/layouts/Main/components/Navbar/Navbar.js

  const onToggleLanguageClick = (locale) => {
    const { pathname, asPath, query } = router
    router.push({  pathname, query }, asPath, { locale })
  }

  const changeTo = router.locale === 'de' ? 'en' : 'de'

    return (
        <button onClick={() => onToggleLanguageClick(changeTo)}>
            {t('change-locale', { changeTo })}
          </button>
)

this is my next-i18next.config

const path = require('path');


module.exports = {
  i18n: {
    locales: ['en', 'de'],
      defaultLocale: 'en',
  localePath: path.resolve('./public/locales')
  },
}

my next.config.js

const nextConfig = {
    i18n,
…some code

}
module.exports = nextConfig

src/pages/_document.js

import i18nextConfig from '../../next-i18next.config';

    export default class MyDocument extends Document {       
      render() {
        const currentLocale = this.props.__NEXT_DATA__.query.locale ?? i18nextConfig.i18n.defaultLocale;
        return (
          <Html lang={currentLocale}>
    .....

CodePudding user response：

First of all, remove the second argument in the appWithTranslation. There is also no need to change the language in the html tag (src/pages/_document.js). i18 does it itself.

public/locales/en ---common.json & /de ---common.json

Wrong. Use the default paths 'public/locales/en/common.json'. Also you can remove the 'localePath' in i18 config file.

reference: https://github.com/i18next/next-i18next

CodePudding user response：

I figured out my problem. Got confused with many of my file paths. Maybe it can help someone.

Add these to your component

export async function  getServerSideProps({ locale }) {
....code 
}

that doesn't translate your "http://localhost:3000/de/componentname", which in the obvious path: src/pages/componentname.js

... just like my src/pages/index.js above.