Comments (10)
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.
@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.
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.
sounds a lot like #1158 to me.
this issue makes the package unusable for many projects
from next-translate.
Yeah, it's the same issue as #1158. I created a repro: https://codesandbox.io/p/devbox/relaxed-kapitsa-59xwtj
from next-translate.
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.
+1 running into this issue.
from next-translate.
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.
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.
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)
- Warning: Detected multiple renderers concurrently rendering the same context provider.
- 404 when accssing homepage HOT 7
- 404 on root when using baseURL in vercel HOT 1
- Can't resolve 'next-translate/appWithI18n' on 2.7.0-canary.1 HOT 6
- Cold Start on dynamic routes HOT 5
- Type safety for getT function
- Regular locale naming like "en" breaks the i18n config HOT 1
- Cannot read properties of undefined (reading 'localesToIgnore')
- Docs reference incorrect format/formatter options HOT 1
- App router for domain based local issue HOT 1
- lang useTranslation hook not refreshing in sitemap page HOT 3
- Big loading times and scroll to top once loaded HOT 2
- t is unstable in appDir HOT 1
- Issue & Update on how to use the library with app router HOT 1
- Translations not being loaded when running development build (NextJS 14.1.4) HOT 2
- Change language - compatibility with Next 13
- the demo example is not working
- Add support to ICU format
- NextRouter was not mounted HOT 22
- Integrating Sentry returns a Type Error: `Cannot read properties of undefined (reading 'pageProps')`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-translate.