correct usage of getServerSideProps with Typescript in a next.js project using i18n

Question

correct usage of getServerSideProps with Typescript in a next.js project using i18n

I'm encountering challenges with integrating next-i18next into a Typescript NextJS project. There are very few recent examples available for reference. I have successfully set up internationalized routing, but I am facing difficulties in configuring i18next due to issues with the getServerSideProps syntax.

My knowledge of Typescript is limited, and I am not yet familiar with type declarations.

The code snippet provided below resembles the example 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 regarding "locale" is being flagged in my IDE. Despite using getServerSideProps, I am uncertain if this is the most suitable solution for a predominantly static project. However, it appears unavoidable if I intend to implement SSR later on. An effective method for delivering accurately translated content while maintaining consistent URL locale would be greatly appreciated.

typescript next.js i18next next-i18next

Answer 1

Answer №1

The issue with the typing error related to locale is valid because it may be empty if i18n setup is not done properly. You can find a detailed discussion on this topic here: https://example.com/discussion

There are various approaches to address this issue.

Convert the locale to a string data type

export const fetchServerData: FetchServerData = async ({ selectedLocale }) => ({
  props: {
    ...await serverSideTranslations(selectedLocale as string, ['common', 'header']),
  },
})

Create your own custom FetchServerData type where selectedLocale is mandatory and utilize that instead.

type CustomFetchServerData<
  M extends { [key: string]: any } = { [key: string]: any },
  N extends ParsedUrlQuery = ParsedUrlQuery
> = (context: FetchServerDataContext<N>) => Promise<FetchServerDataResult<M>>

type FetchServerDataContext<N extends ParsedUrlQuery = ParsedUrlQuery> = {
  req: IncomingMessage & {
    cookies: NextApiRequestCookies
  }
  res: ServerResponse
  params?: N
  query: ParsedUrlQuery
  preview?: boolean
  previewData?: PreviewData
  resolvedUrl: string
  selectedLocale: string // This is the crucial part.
  locales?: string[]
  defaultLocale?: string
}

export const fetchServerData: CustomFetchServerData = async ({ selectedLocale }) => ({
  props: {
    ...await serverSideTranslations(selectedLocale, ['common', 'header']),
  },
})

I personally prefer the second option as it eliminates the need for repeatedly casting the same variable, which is already in string format.

Answer 2

The issue with the typing error related to locale is valid because it may be empty if i18n setup is not done properly. You can find a detailed discussion on this topic here: https://example.com/discussion

There are various approaches to address this issue.

Convert the locale to a string data type

export const fetchServerData: FetchServerData = async ({ selectedLocale }) => ({
  props: {
    ...await serverSideTranslations(selectedLocale as string, ['common', 'header']),
  },
})

Create your own custom FetchServerData type where selectedLocale is mandatory and utilize that instead.

type CustomFetchServerData<
  M extends { [key: string]: any } = { [key: string]: any },
  N extends ParsedUrlQuery = ParsedUrlQuery
> = (context: FetchServerDataContext<N>) => Promise<FetchServerDataResult<M>>

type FetchServerDataContext<N extends ParsedUrlQuery = ParsedUrlQuery> = {
  req: IncomingMessage & {
    cookies: NextApiRequestCookies
  }
  res: ServerResponse
  params?: N
  query: ParsedUrlQuery
  preview?: boolean
  previewData?: PreviewData
  resolvedUrl: string
  selectedLocale: string // This is the crucial part.
  locales?: string[]
  defaultLocale?: string
}

export const fetchServerData: CustomFetchServerData = async ({ selectedLocale }) => ({
  props: {
    ...await serverSideTranslations(selectedLocale, ['common', 'header']),
  },
})

I personally prefer the second option as it eliminates the need for repeatedly casting the same variable, which is already in string format.

Answer 3

Answer №2

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
.....
//consider using cxt or context (or locale) variables
export const getServerSideProps: GetServerSideProps = async (ctx) => ({
      props: {
        ...await serverSideTranslations(ctx.locale, ['common', 'header']),
      },
    })
    
export default Home

If this code snippet doesn't produce the desired outcome, feel free to inform me so we can explore other options together.

Answer 4

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
.....
//consider using cxt or context (or locale) variables
export const getServerSideProps: GetServerSideProps = async (ctx) => ({
      props: {
        ...await serverSideTranslations(ctx.locale, ['common', 'header']),
      },
    })
    
export default Home

If this code snippet doesn't produce the desired outcome, feel free to inform me so we can explore other options together.

Answer 5

Answer №3

When passing data as a prop in Next.js, you can define its shape using an interface or a type. This can be done by creating a generic and passing it to GetServerSideProps, as demonstrated 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 approach will ensure that your typescript compiler is satisfied with the data passed as props!

Answer 6

When passing data as a prop in Next.js, you can define its shape using an interface or a type. This can be done by creating a generic and passing it to GetServerSideProps, as demonstrated 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 approach will ensure that your typescript compiler is satisfied with the data passed as props!

correct usage of getServerSideProps with Typescript in a next.js project using i18n

Answer №1

Answer №2

Answer №3

Similar questions

Using the combination of Stripe and CommerceJS for Bancontact payments

Detecting Typescript linting issues in VSCode using Yarn version 3.2.3

Currently, I am developing a project in Next.js and looking to integrate the Cropper feature from the 'react-easy-crop' library. However, I am encountering some difficulties along the way

What could be the reason for the appearance of Next.js compile indicator in my final production build?

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

Check out the selected values in Ionic 3

Gaining entry to the REDUX state from a Higher Order Component

The validator function in FormArray is missing and causing a TypeError

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

retrieving a single object from $resource by passing a non-ID parameter

Exploring the world of tabbed dynamic routing in Angular 2 version 4

Tapping on the hyperlink results in a 404 error when utilizing the next version 14.1

Chart.js Axis Labels Orientation Guidelines

The 'payload' property is not found within the 'Actions' type

Showing data related to a certain value - what's the best way?

Creating a countdown clock in Angular 5

Adding a background video to my NextJS project resulted in an error being thrown

What is the syntax for assigning a public variable within a TypeScript function?

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

Leveraging the power of useSWR for seamless backend integration with pagination