live2d-web ドキュメント

Next.js と SSR

Next.js の Server Component と Client Component での使い分けを説明します。

ブラウザで動く処理は Client Component に置く

基本 API と live2d-web/inspect は SSR 中に読み込んでも安全です。モデルの描画と /react は Client Component で使用してください。Server Component からはモデルの URL だけをデータとして渡します。

'use client'
 
import { Live2DCanvas, Live2DModel } from 'live2d-web/react'
 
export function Avatar() {
  return (
    <Live2DCanvas coreUrl="/live2dcubismcore.min.js">
      <Live2DModel src="/models/model.model3.json" />
    </Live2DCanvas>
  )
}

Core とモデルは静的アセットとして配信

Core と書き出したモデルを public/ に置くか、同一オリジンの絶対 URL を渡します。moc3 やテクスチャを Server Component に import せず、Client Component にはシリアライズ可能な URL と設定だけを渡してください。

初期化をクライアント画面に限定

基本パッケージと live2d-web/inspect は SSR で評価できますが、Canvas の生成はブラウザーで行います。controller をモジュール変数に保存せず、unmount 時に解放します。

production build で確認

next build 後に、周囲の UI がサーバーレンダリングされ、window エラーがないことを確認します。最終的な base path と CSP で Core、model3、参照アセットを読み込めるかも確認してください。