Coder Social home page Coder Social logo

Comments (10)

i2gor87 avatar i2gor87 commented on June 8, 2024 1

I might have a solution here, but it might not be suitable for everyone. For me it does only half the work, because I want to use dynamic language changes via queryParams and this solution does not address this issue (but the content is translated and header on reload is translated as well). I hope someone can provide a more suited solution

Diving into the next.js docs, I found out that

layouts preserve state, remain interactive, and do not re-render.

but there is another option - templates which

are similar to layouts in that they wrap each child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation.

That being said, if you have this structure

// src/components/translated-component.tsx
'use client';
import useTranslation from 'next-translate/useTranslation';
export const TranslatedComponent = () => {
  const { t } = useTranslation('common');
  return <div>This is component that needs translation, translation value: {t('test')}</div>;
};
// src/app/layout.tsx
import type {Metadata} from 'next'
import {ReactNode} from "react";
import TranslatedComponent from "@/components/translated-component";
import './globals.css'

export const metadata: Metadata = {
    title: 'Website title',
    description: 'Website description',
}

export default function LocaleLayout({ children } : { children: ReactNode }) {
    return (
        <html lang='en' suppressHydrationWarning>
        <body>
            <TranslatedComponent />
            {children}
        </body>
        </html>
    )
}

and you run into issue mentioned before, you can take out TranslatedComponent from layout.tsx (or js, or jsx) and put it into new file template.tsx. But only moving the component won't solve the issue, you need to use useTranslation inside template.tsx and pass translated strings as props to problematic element:

// src/components/translated-component.tsx
export const TranslatedComponent = ({value} : {value:string}) => {
  return <div>This is component that needs translation, translation value: {value}</div>;
};
// src/app/layout.tsx
import type {Metadata} from 'next'
import {ReactNode} from "react";
import './globals.css'

export const metadata: Metadata = {
    title: 'Website title',
    description: 'Website description',
}

export default function LocaleLayout({ children } : { children: ReactNode }) {
    return (
        <html lang='en' suppressHydrationWarning>
        <body>
            // <TranslatedComponent /> // remove this line
            {children}
        </body>
        </html>
    )
}
// src/app/template.tsx
import TranslatedComponent from "@/components/translated-component";
import useTranslation from 'next-translate/useTranslation';

export default function Template({children}: { children: React.ReactNode }) {
    const { t } = useTranslation('common');
    return <div>
        <TranslatedComponent value{t('test')}/>
        {children}
        <Footer/>
    </div>
}

which would result in following nested structure:

<Layout>
   <Template>{children}</Template>
</Layout>

Basically template starts doing the work of layout, but with useEffect and other client functions

More info in NextJS documentation
I also including link to corrected sandbox that I forked from #1173 (comment)

P.S. I'm not very experienced with next.js and typescript, so if there are any hidden problems with using template file over layout file, I really would like to know. But this setup is working for me so far.
P.S.S Before fix I just put my dynamic components in page. But that's weird solution =(

from next-translate.

i2gor87 avatar i2gor87 commented on June 8, 2024 1

@acidfernando This still doesn't solve the issue for people who would like to use the dynamic translation by lang={locale} method. For some reason, the template.tsx is updated only on page transitions, changing translation on the page translates only content, but not strings in the component in the template.tsx. You can see that behaviour in my sandbox - clicking on english / french buttons changes translations for body component, but not the component inside template

from next-translate.

bmirandan avatar bmirandan commented on June 8, 2024

My team encountered the same issue just yesterday. We even did a test to check this out and we've been able to replicate it. It seems to be a problem with the last version only 'cause we downgraded and it works client side.

from next-translate.

fuetgeo avatar fuetgeo commented on June 8, 2024

sounds a lot like #1158 to me.
this issue makes the package unusable for many projects

from next-translate.

acidfernando avatar acidfernando commented on June 8, 2024

Yeah, it's the same issue as #1158. I created a repro: https://codesandbox.io/p/devbox/relaxed-kapitsa-59xwtj

from next-translate.

i2gor87 avatar i2gor87 commented on June 8, 2024

Any updates on this? Because I tend to use one layout tsx for almost all pages where I need consistent layout and this breaks things for me

from next-translate.

mikebywaters avatar mikebywaters commented on June 8, 2024

+1 running into this issue.

from next-translate.

acidfernando avatar acidfernando commented on June 8, 2024

That works for my use case. I think this is not an error with next-translate but with how nextJS works. I think this issue should be closed with this fix

Also, it would be interesting to have this knowledge somewhere in the docs, I think people will be running into this quite frequently

I'm not sure where to add it, though 😅

from next-translate.

kristian240 avatar kristian240 commented on June 8, 2024

One thing that might be helpful here is the fact that I experience this when I render the children behind a client-only gurad (we use this pattern https://github.com/gfmio/react-client-only)

When component is not wrapped with client only guard the translation is loaded (but only if the client component is rendered after the {children}.

from next-translate.

matmkian avatar matmkian commented on June 8, 2024

Do we have some updates regarding this issue? It's pretty huge. I personally had to use another lib to manage translations because of this :-( It's sad because I love this lib 👍

from next-translate.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.