proper getServerSideProps syntax for Typescript next.js + i18n

user_14536000 0
Viewed 9926

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.

next-i18next i18next typescript next.js
4 Answers

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

  1. Cast the locale as string
export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale as string, ['common', 'header']),
  },
})
  1. Define your own GetServerSideProps type where locale 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.

user_8294930 
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.

user_82801120

Working from the examples I too came up with trying to access { locale }, which came up empty in getServerSideProps.

Using the suggested context (thanks @illia chill) worked like a charm.

Since i was already using the context object - accessing locale as an attribute was an easy solution. (cant comment, so needed to re-iterate like this ;) )

user_70890480

You can define the shape of the data you want to pass a prop using an interface or a type and then pass it as a generic to GetServerSideProps as show below.

export interface User {
  id: string
  firstName: string
  lastname: string
  token: string
}

interface PageProps {
  hydrationData: {
    authStore: {
      user: User
    }
  }
}

export const getServerSideProps: GetServerSideProps<PageProps> =
  async function getServerSideProps(ctx) {

    return {
      props: {
        hydrationData: {
          authStore: {
            user: {
              id: '001',
              firstName: 'John',
              lastname: 'Doe',
              token: 'uuid',
            },
          },
        },
      },
    }
  }

This will keep your typescript compiler happy!

user_90359510
Related