Closed2024/04/22にクローズ3

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

Next.js

TypeScript

NextAuth

kage1020

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

しかし，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

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

このスクラップは2024/04/22にクローズされました