【実践】Next.js 13→16メジャーアップグレードの全記録 — 破壊的変更と対応策

// src/app/blogs/[blogId]/page.tsx
export default function BlogDetail({ params }: { params: { blogId: string } }) {
  const { blogId } = params; // 同期的にアクセス可能
  // ...
}

// src/app/blogs/[blogId]/page.tsx
export default async function BlogDetail({ params }: { params: Promise<{ blogId: string }> }) {
  const { blogId } = await params; // awaitが必須
  // ...
}

// generateMetadataも同様にawaitが必要
export async function generateMetadata({ params }: { params: Promise<{ blogId: string }> }) {
  const { blogId } = await params;
  const blog = await getDetail(blogId);
  return { title: blog.title };
}

// libs/gtag.ts のPageviewコンポーネント
'use client';
import { useSearchParams } from 'next/navigation';

export function GoogleAnalytics() {
  const searchParams = useSearchParams(); // Suspenseなしで使用
  // ...
}

// layout.tsx
import { Suspense } from 'react';
import { GoogleAnalytics } from '@/libs/gtag';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Suspense fallback={null}>
          <GoogleAnalytics />
        </Suspense>
        {children}
      </body>
    </html>
  );
}

<Suspense fallback={<SearchFormSkeleton />}>
  <SearchForm />
</Suspense>

npm install @types/react@19 @types/react-dom@19

// React.FC の children が暗黙的に含まれなくなった
// Before
const Component: React.FC = ({ children }) => { ... };

// After - 明示的にchildrenを定義
const Component: React.FC<{ children: React.ReactNode }> = ({ children }) => { ... };

// Before: initialValueがnullでもOK
const ref = useRef<HTMLDivElement>(null);

// After: React 19では RefObject の型が変更
// null初期値の場合は MutableRefObject ではなく RefObject を返す
const ref = useRef<HTMLDivElement>(null);
// 型は RefObject<HTMLDivElement | null> になる