korrekt getServerSideProps-syntax för Typescript next.js + i18n

Jag har problem med next-i18next-integration i ett NextJS Typescript-projekt - det finns nästan inga nya exempel någonstans. Jag har redan konfigurerat internationaliserad routing, men jag kan inte ordentligt ställa in i18next så länge getServerSideProps-syntaxen stör mig.

Jag vet inte mycket om Typescript och är inte bekant med typdeklarationer än.

Koden ser ut så här, mestadels kopierad från next-i18next-dokumentationen :

### index.tsx

// rest of index.tsx...

export const getServerSideProps: GetServerSideProps = async ({locale}) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'header']),
  },
})

export default Home

Ett fel kastas i mitt IDE om "locale". Även om jag använder getServerSideProps är jag inte ens säker på att det är den bästa lösningen för ett mestadels statiskt projekt, men det verkar som att jag inte kan undvika det om jag planerar en SSR i slutändan. Ett enkelt sätt att leverera korrekt översatt innehåll + ha en matchande URL-locale skulle vara fantastiskt.

Svar #1

Skrivfelet om lokala inställningar är korrekt, eftersom det kan vara tomt när i18n inte är konfigurerat. Se diskussionen här: https://github.com/isaachinman/next-i18next/issues/1307

Det finns flera sätt att hantera detta problem

  1. Konvertera lokalinställningen till sträng
export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale as string, ['common', 'header']),
  },
})
  1. Definiera din egen GetServerSideProps-typ där locale inte är valfri och använd den.
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']),
  },
})

Jag använder själv det andra alternativet eftersom det sättet slipper jag att kasta samma variabel hela tiden, som redan är en sträng.

Relaterade artiklar