getInitialPropsを使ってないのにTypeError: Cannot read properties of undefined (reading 'getInitialProps')エラー

エラーを発生した時のソースコードは？

Next.jsの学習中に発生したエラー。

TypeError: Cannot read properties of undefined (reading 'getInitialProps')

getInitialPropsは非推奨で使用していないはずなのに...　うーん

コードを見て間違いを探した結果

pages/_app.tsx

//自分の間違い。exportの後のdefaultが抜けている。
import type { AppProps } from 'next/app'
export function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

pages/_app.tsx

//正解
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

引用：Routing: Custom App | Next.js

学び１名前付きエクスポートとデフォルトエクスポートの違い

export function MyApp名前付きエクスポート

インポート時に {　} 内に指定した名前でインポートする必要がある。

import { MyApp } from './MyApp';

export default function MyAppデフォルトエクスポート

任意の名前でインポートする必要がある。

１つのモジュール内に1つだけexport defaultできる。

import MyApp from './MyApp';
//もしくは、
import App from './MyApp';//インポート時に任意の名前なので、exportしている時の関数名と違ってもOK

学び２_app.jsはどんなファイル？

• Next.jsは、_app.jsファイルを最初に読み込み、その中で定義されたAppコンポーネントを使用して、各ページのレンダリングを処理する。

• _app.jsファイルは、すべてのページに共通のレイアウトやグローバルな振る舞いを定義するためのファイル。したがって、Appコンポーネントは_app.jsファイル内でエクスポートされる必要がある。

• pages/_app.jsファイル内でAppコンポーネントがデフォルトエクスポートされている場合、Next.jsはそのファイルを自動的に読み込み、Appコンポーネントを使用してページのレンダリングを行う。そのため、明示的にimport文を使用してAppコンポーネントをインポートする必要はない。

学び３TypeError: Cannot read properties of undefined (reading 'getInitialProps')とは

このエラーは、通常、ページコンポーネント内でgetInitialPropsが定義されているかどうかをNext.jsが検出しようとするときに発生する。

Next.jsが最初に読み込む_app.jsファイルを正しく読み込めていない。
↓getInitialPropsが存在しない場合、（自身のソースにもgetInitialPropsは存在しなかった）

getInitialPropsが存在しないので、Next.jsは代わりに何も返さないコンポーネントを返そうする。
↓
その結果、undefinedが返される。
↓
その後、ページコンポーネントでこのundefinedにアクセスしようとすると、TypeErrorが発生。

デフォルトエクスポートを使用することで、Next.jsが_app.jsファイルを正しく読み込み、Appコンポーネントを適切に処理することができる。

非推奨のgetInitialPropsとは？
ページ内のサーバーサイドレンダリングを可能にし、初期データを追加出来るようになります。つまり、既にデータが追加されているページをサーバーから送信するということです。これは特に SEO 対策に有効です。
引用：Data Fetching: getInitialProps | Next.js