Closed10日前にクローズ3

Next.js@12.3.0+NextAuth.js+TypeScriptで_app.tsxをいじるときのTips

Next.js

TypeScript

NextAuth

kage1020 2022/09/10

12.2までのNext.jsではNextAuth.jsをいれるとき_app.tsxは以下のようにするだけでよかった．

import { SessionProvider } from 'next-auth/react'
import type { AppProps } from 'next/app'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

export default MyApp

kage1020 2022/09/10に更新

しかし，12.3になってAppPropsの型定義が変わってしまい，pageProps.sessionを取り出せなくなってしまった．

プロパティ 'session' は型 '{}' に存在しません。

解決策はすでにissueに上がっていた．AppPropsにgenericsを渡すだけでよい．

+ import { Session } from 'next-auth'
  import { SessionProvider } from 'next-auth/react'
  import type { AppProps } from 'next/app'
  import '../styles/globals.css'

- function MyApp({ Component, pageProps }: AppProps) {
+ function MyApp({ Component, pageProps }: AppProps<{ session: Session }>) {
    return (
      <SessionProvider session={pageProps.session}>
        <Component {...pageProps} />
      </SessionProvider>
    )
  }

  export default MyApp

kage1020 2022/09/10

Next.js的にはpagePropsはいらない子だから適宜自分たちで拡張しろよってことなのかなあ？

このスクラップは10日前にクローズされました