Vercel

登録してみた。

GitHub連携

Vercelのプロジェクト側でリポジトリをインポートすることで自動デプロイの設定も行われる。

インポート時にWebhook登録などの設定も自動で行われ、プッシュ時等にVercelに通知がいく模様。

そのため別途GitHub Actionsの設定などは不要。

リポジトリ内のブランチにプッシュしたものはプレビュー用としてデプロイされる。

master（main）以外のブランチも同様で、ブランチごとに異なる環境にデプロイされる。

プッシュごとにビルド、デプロイが自動で走るため、無料版では上限に注意が必要。

特定のブランチへのコミットのみ本番（あるいはプレビュー）デプロイするよう設定を変更することも可能。（ただしデフォルトはすべてのコミットでデプロイ）

動的API

https://nextjs.org/docs/messages/sync-dynamic-apis

Next.js15から以下のプロパティ、関数が非同期となった。

• params
• searchParams
• cookies()
• draftMode()
• headers()

以下のコードではエラーが発生する。

function Page({ params }) {
  // 直接 params.id にアクセスしている
  return <p>ID: {params.id}</p>
}

以下の様に修正が必要

function Page({ params }) {
  const { id } = await params;
  return <p>ID: {id}</p>
}

非同期となった理由

paramsの取得を非同期にし、取得前の段階でparamsを使用しない部分の処理を走らせるため。

TTFBが改善される、、、らしい

これはストリーミングレンダリングの技術とも関連する。

ストリームレンダリング

Next.js 15 / React 18〜

コンポーネントで分割した部分をSuspenseの機能を使って分割してクライアントに送信する仕組み。

従来もSuspenseを使って読み込みが重いコンポーネントを読み込み次第差し替える対応が可能だったが、それがサーバークライアント間でも行われているイメージ。

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<Loading />}>
        <Content />
      </Suspense>
    </>
  );
}

Suspenseの外は<Loading />とともにすぐに返され、Suspenseが解決次第、差分（<Content />）がクライアントに送信される。

React側

「ストリーミング前提」の仕組みが組み込まれている。

• renderToPipeableStream / renderToReadableStream
  • HTML をチャンク単位で出力する API
• <Suspense> とサスペンド制御
  • どのコンポーネントが「待ち状態」かを内部的に把握している。
  • サスペンド中のコンポーネントはプレースホルダーを設置し、ストリームの分割ポイントを作る。

Next.js側

• ストリーミング送信
  • Reactからデータを受け取りストリーミング送信する。
• <Suspense> ごとにチャンクを切って送信制御
  • Suspense外を先に送り、解決次第Suspense内を送信する。