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

What causes the difference in inference for unspecified generics between a simple function call and a null-coalescing operator in TypeScript?

What is the best way to compare two TypeScript object arrays for equality, especially when some objects may have multiple ways to be considered equivalent

Where specifically in the code should I be looking for instances of undefined values?

Implement a system that allows users to subscribe to different projects with customized stripe subscriptions

elimination of nonexistent object

"Encountering a 500 error on Chrome and Internet Explorer while trying to sign

Using NextJs <Script> is only effective after a page has been reloaded

Integrating Javascript and JQuery in Reactjs: A Comprehensive Guide

Upgrade from Next.js version 12

Turn off the auto locale detection feature in next-intl for the initial visit

React throwing an error when trying to use inline fontWeight styling with Typescript

Error encountered during Jasmine unit testing for the ng-redux @select directive

Passing information from the main component to a service through API connections

The delay function in RxJS allows for waiting to return a value until a specific condition is met within a stream and

Formulate a multi-line string using a collection in React's JavaScript framework

Can you explain how the "reduce" function can be implemented using an interface in TypeScript?

Tips for injecting scripts into the head tag after an Angular component has been loaded

Incorrect Angular Routing Component OpeningI am experiencing an issue where

"When a class extends another class and utilizes properties within a static property, it essentially becomes

What is the best way to simulate an overloaded method in jest?