Contents
はじめに
こんにちは。今回は、私が実際に開発しているSNSプロフィール集約サービス「Procom」の実装中に遭遇したエラー、
「PagePropsに関するエラー」とその解決方法について詳しく紹介します。
Next.jsのApp Router（app/ ディレクトリ）を使っている方、あるいはTypeScriptでしっかり型を扱いたい方にとって、
このエラーは非常にありがちで、意外とつまずきやすいポイントでもあります。
エラーの内容：PageProps が使えない？
ある日、以下のようなコードを書いたときに、Next.jsのビルドで次のエラーが発生しました。
import { PageProps } from 'next/app'; // ❌ これが原因
export default function MyPage({ params }: PageProps) {
// ...
}
表示されたエラー例
Type error: Module '"next/app"' has no exported member 'PageProps'.
「え、PagePropsって使えないの…？」と焦った瞬間でした。
原因：PagePropsはnext/appからは使えない
このエラーの最大の原因は、PagePropsという型がNext.js 13以降のApp Routerで不要かつ存在しない点です。
PageProps は旧来の pages/_app.tsx 用の型であり、
App Router（app/ ディレクトリ）を使っている現在の構成では、そもそも PageProps は使いません。
// これはApp Router（app/page.tsx等）ではNG
import { PageProps } from 'next/app'; // ❌
正しい書き方：型は明示しないか、paramsのみ型定義
App Routerのページファイル（例：app/user/[uid]/page.tsx）では、Next.jsが渡す params や searchParams を使いたいときは、以下のように書きます。
✅ 正しい構文
type Props = {
params: { uid: string };
};
export default function UserPage({ params }: Props) {
return <div>ユーザーID: {params.uid}</div>;
}
実際の修正（Procomでの事例）
Procomの開発では、ユーザーページを app/user/[uid]/page.tsx に作成しています。
当初、以下のようなコードでエラーになりました。
// 誤ったコード
import { PageProps } from 'next/app';
export default function Page({ params }: PageProps) {
return <div>{params.uid}</div>;
}
🔧 修正後
type Props = {
params: { uid: string };
};
export default function Page({ params }: Props) {
return <div>{params.uid}</div>;
}
これでビルドエラーは解消され、動作もバッチリでした。
補足：PageProps を見かけるのはなぜ？
PageProps は主に 旧式の pages/_app.tsx 構成や、Next.js 12以下のドキュメントで登場します。
// pages/_app.tsx用の定義（App Routerでは不要）
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
このため、Next.js 13以降に移行して app/ ディレクトリを使っているなら、基本的に使う機会はありません。
まとめ：同じエラーを防ぐために
| 項目 | 内容 |
|---|---|
| ❌ やってはいけない | import { PageProps } from 'next/app' |
| ✅ 正しい方法 | 自前でparamsなどの型を定義する |
| 対象バージョン | Next.js 13以降のApp Router構成 |
| 備考 | pages/ ディレクトリでは AppProps を使用可能 |
おわりに
Next.jsのApp Routerを使っていると、どうしても旧ドキュメントや過去記事の情報に引きずられてしまうことがあります。
今回の PageProps のエラーもその典型です。
Procomではこのようなトラブルに都度対応しながら、よりモダンな構成へとアップデートを進めています。
このブログが、同じようにApp Routerで開発中の方の助けになれば幸いです。
