I'm struggling with next-i18next integration in a NextJS Typescript project - has nearly no recent examples anywhere. I've already configured internationalized routing, but I can't properly setup i18next as long as getServerSideProps syntax is bothering me.
I don't know much about Typescript, and am not familiar with types declarations yet.
The code looks like this, mostly copied from next-i18next documentation :
### index.tsx
// rest of index.tsx...
export const getServerSideProps: GetServerSideProps = async ({locale}) => ({
props: {
...await serverSideTranslations(locale, ['common', 'header']),
},
})
export default Home
An error is thrown in my IDE about "locale". Even though I'm using getServerSideProps, i'm not even sure that it is the best solution for a mostly static project, but it seems I can't avoid it if I'm planning a SSR in the end. A simple way to deliver correctly translated content having a matching URL locale would be awesome.
CodePudding user response:
The typing error about locale is correct, because it can be empty when i18n isn't set up. See discussion here: https://github.com/isaachinman/next-i18next/issues/1307
There are multiple ways to deal with this issue
- Cast the locale as string
export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
props: {
...await serverSideTranslations(locale as string, ['common', 'header']),
},
})
- Define your own
GetServerSideProps
type wherelocale
isn't optional and use that one.
type CustomGetServerSideProps<
P extends { [key: string]: any } = { [key: string]: any },
Q extends ParsedUrlQuery = ParsedUrlQuery
> = (context: GetServerSidePropsContext<Q>) => Promise<GetServerSidePropsResult<P>>
type GetServerSidePropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery> = {
req: IncomingMessage & {
cookies: NextApiRequestCookies
}
res: ServerResponse
params?: Q
query: ParsedUrlQuery
preview?: boolean
previewData?: PreviewData
resolvedUrl: string
locale: string // This is where the magic happens.
locales?: string[]
defaultLocale?: string
}
export const getServerSideProps: CustomGetServerSideProps = async ({ locale }) => ({
props: {
...await serverSideTranslations(locale, ['common', 'header']),
},
})
I'm using the second option myself because that way I don't have to cast the same variable all the time, which is also already a string.
CodePudding user response:
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
.....
//try cxt or context (or locale) variables
export const getServerSideProps: GetServerSideProps = async (ctx) => ({
props: {
...await serverSideTranslations(ctx.locale, ['common', 'header']),
},
})
export default Home
If it doesn't work, notify me, and I will share my solution.