● next.js 16.3 で データ取得前の状態をテストしやすくなった

Next.js 16.3では、Playwright向けの Playwright Test Helper が追加されました。

これを使うと、Instant Navigation の状態をE2Eテストで検証できます。

インストール

npm install -D @next/playwright

利用例

import { instant } from "@next/playwright";

await instant(page, async () => {
  await page.click('a[href="/profile"]');
  await expect(page.getByTestId("profile-name")).toBeVisible();
});

instant() の中では、サーバーデータの取得完了を待たず、キャッシュ済みの画面（Shell）の状態をテストできます。

これまで確認しづらかった「クリック直後の画面」を簡単に検証できるようになりました。