Блог

Вот _app.tsx по умолчанию из NextJS:

 function MyApp({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}
  

Проблема в том, что как только вы переключаетесь на TypeScript, вы получаете предупреждение в ES6Lint о том, что для этих типов внутренне задан тип ‘any’. При этом я не могу понять, какой тип установить для этих двух, чтобы это не вызывало больше ошибок позже из-за несоответствия типов. К каким типам TypeScript я должен отнести эти два?

Встроенный AppProps тип теперь является универсальным. Чтобы использовать свой пользовательский PageProps , просто передайте его в AppProps тип:

 import { AppProps } from 'next/app';

interface CustomPageProps { // <--- your custom page props
   // your props
}

function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
                                             //   ^^^ use your custom props here
  return <Component {...pageProps} />
                    // ^^^^^ pageProps is now typeof CustomPageProps
}
  

Последнее решение: NextJS AppProps

По состоянию на next.js версия 12.3.0, общий код, переданный в AppProps , будет передан pageProps (см. Соответствующий PR). Смотрите пример ниже:

 // importing the provided NextJS type
import type { AppProps } from "next/app";

// use the type and pass it your page props type
export default function App({
  Component,
  pageProps,
}: AppProps<CustomPageProps>) {
  //...
}
  

Старое решение (предварительно next.js 12.3.0):

Улучшено AppProps , чтобы разрешить настраиваемый pageProps

NextJS предоставляет AppProps тип из коробки, который вы можете импортировать и использовать в своем _app компоненте. Это предоставит запрошенные вами типы. Однако этот тип ограничивается pageProps any типом по умолчанию, который может быть не тем, что вы хотите.

Если вы хотите больше контролировать это, AppProps принимает аргумент типа, но передает его только вниз Component , оставляя pageProps в качестве any типа независимо от того, что.

Мы можем исправить это, изменив AppProps тип, которому фактически передается его аргумент type pageProps . Смотрите рабочий пример ниже.

_app.tsx

 // importing the provided NextJS type
import type { AppProps as NextAppProps } from "next/app";

// modified version - allows for custom pageProps type, falling back to 'any'
type AppProps<P = any> = {
  pageProps: P;
} amp; Omit<NextAppProps<P>, "pageProps">;

// use the new type like so, replacing 'CustomPageProps' with whatever you want
export default function App({
  Component,
  pageProps,
}: AppProps<CustomPageProps>) {
  //...
}
  

Если вы все еще получаете предупреждение о «отсутствующем типе возвращаемого значения в функции», просто добавьте возвращаемый тип JSX.Element

 import { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return <Component {...pageProps} />
}
  

На случай, если вам err тоже нужен объект:

 export default function App({
  Component,
  pageProps,
  err,
}: AppProps amp; { err: any }) {
  // Workaround for https://github.com/vercel/next.js/issues/8592
  return <Component {...pageProps} err={err} />
}
  

Я считаю, что вам нужны типы, которые getInitialProps также будут учтены. Вот они:

 type Props<P> = AppProps amp; P;

interface AppType<P> {
  (props: Props<P>): ReactElement;
  getInitialProps?: (context: AppContext) => Props<P> | Promise<Props<P>>;
}
  

Документация: https://nextjs.org/docs/basic-features/typescript#custom-app

 import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}