【開発ブログ】Next.jsのカレンダー実装で起きた複数のエラーとその解決法【Procom開発記】

プロコム開発チーム

こんにちは、Procom開発チームです。
今回は「ユーザーページのカレンダーに日付を反映させる機能」を追加しようとした際に発生した複数のビルドエラーや型エラーの解決について、実例を交えて解説します。

Contents

1 🔧 やりたかったこと
2 🧨 発生したエラー一覧
3 💡 今回の学び
4 ✅ 最終的な実装のポイント
5 🏁 まとめ

🔧 やりたかったこと

ユーザーページで表示されるカレンダーで日付をクリックしたら、下にある入力欄（予定の登録フォーム）にその日付が反映されるようにしたい！
一見シンプルなこの仕様ですが、Next.jsとTypeScript、そしてクライアント／サーバーの境界をまたぐ構成の中で、以下のようなトラブルが次々に発生しました。

🧨 発生したエラー一覧

1. PATCH APIの型エラー

Type error: Route "app/api/user/[uid]/route.ts" has an invalid "PATCH" export:
Type "{ params: { uid: string; }; }" is not a valid type for the function's second argument.

原因と対処法

Next.js App Routerでは、API Routeの関数定義における引数の型に注意が必要です。

// ❌ 誤り（古い形式）
export async function PATCH(
  req: NextRequest,
  { params: { uid } }: { params: { uid: string } }
)

// ✅ 修正後
export async function PATCH(
  req: NextRequest,
  context: { params: { uid: string } }
)

ポイント： 引数の型は context: { params: { ... } } の形で統一する必要があります。

2. createCalendarの引数不足

Type error: Expected 4 arguments, but got 2.
createCalendar(currentDate, isOwnPage);

原因と対処法

createCalendar 関数の定義を以下のように変更していたため：

export async function createCalendar(
  date: Date = currentDate,
  isEditable: boolean = false,
  reloadEvents = false,
  uid: string
)

呼び出し元で uid を渡していなかったことが原因です。

// ❌ 修正前
createCalendar(currentDate, isOwnPage);

// ✅ 修正後（uidを追加）
createCalendar(currentDate, isOwnPage, true, uid);

3. uidが取得できない問題

カレンダー表示の関数に必要な uid を取得するため、ページのURLから取得するコードを用意：

function getUidFromURL(): string {
  const match = window.location.pathname.match(/\/user\/([^\/]+)/);
  return match ? match[1] : '';
}

そして、Reactコンポーネント内で以下のように使用：

const uid = getUidFromURL();

このようにすることで、ログイン中のユーザーでなくてもページURLに含まれる uid を取得し、カレンダーの編集や日付反映を可能にしました。

💡 今回の学び

APIルートの型定義はNext.js App Routerのルールに従うべし
→ 引数は context: { params } 形式にしないとビルドで失敗します。
関数定義を変更したら呼び出し側の修正も忘れずに！
→ 引数の追加や順番変更は慎重に。特にライブラリ的に使っているユーティリティ関数では注意が必要。
Reactクライアントコンポーネントでは、URL情報を window.location から取得可能
→ サーバー側では不可ですが、use client のついたコンポーネントならOK。

✅ 最終的な実装のポイント

以下のようにまとめました：

const uid = getUidFromURL(); // クライアント側で取得

useEffect(() => {
  if (Array.isArray(profile.calendarEvents)) {
    const eventObj: Record<string, string[]> = {};
    profile.calendarEvents.forEach(e => {
      if (e.date && Array.isArray(e.events)) {
        eventObj[e.date] = e.events;
      }
    });
    localStorage.setItem('calendarEvents', JSON.stringify(eventObj));
    setEvents(eventObj);
    createCalendar(currentDate, isOwnPage, true, uid); // ✅ 4つの引数で正しく呼び出し
  }
}, [profile, isOwnPage, currentDate]);