How to use Server Side Rendering (SSR) with next-i18n in a App-router-based setup?
Unanswered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
I got Server Side Rendering working on a Page-router-based setup, but with app-router, I am not allowed to use
Therefore I cannot invoke this:
Therefore, I still need to prefix my page components with
Is there any way to do server side translations in app-based routers?
getStaticProps.Therefore I cannot invoke this:
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Config from "../next-i18next.config.mjs"
export async function getStaticProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale, undefined, Config)),
},
};
}Therefore, I still need to prefix my page components with
'use client'. Is there any way to do server side translations in app-based routers?
6 Replies
@Chinese Alligator I got Server Side Rendering working on a Page-router-based setup, but with app-router, I am not allowed to use `getStaticProps`.
Therefore I cannot invoke this:
tsx
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Config from "../next-i18next.config.mjs"
export async function getStaticProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale, undefined, Config)),
},
};
}
Therefore, I still need to prefix my page components with `'use client'`.
Is there any way to do server side translations in app-based routers?
You can follow this guide: https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview
And then easily use your translations like this:
And then easily use your translations like this:
import { getDictionary } from './dictionaries'
export default async function Page({
params,
}: {
params: Promise<{ lang: 'en' | 'nl' }>
}) {
// Server Component
const lang = (await params).lang
const dict = await getDictionary(lang) // en
return <button>{dict.products.cart}</button> // Add to Cart
}Chinese AlligatorOP
But that'd mean I either have to do server-side translations, or client-side, correct? I cannot initially load the server-side ones and update them client-side when switching language client-side, correct?
@Chinese Alligator But that'd mean I either have to do server-side translations, or client-side, correct? I cannot initially load the server-side ones and update them client-side when switching language client-side, correct?
at the end your translations (in this future version) are just JSON files. So you can (of course) load them on server as you just saw and if you want, you can also pass it down to all your cient components. I like to create a "DictionaryProvider" that provides the current dict to all my client component
Chinese AlligatorOP
Why is the use of
t possible server side when using page routing, but not possible when using app routing?@Chinese Alligator Why is the use of `t` possible server side when using page routing, but not possible when using app routing?
when using pages router everything is clientside by default and on the app router it's the other way around: everything is serverside by default. And hooks are not available on the serverside
@Chinese Alligator solved?