Next.js

Model Lab renders WebGL and must run in a client component.

Client component

tsx

'use client'

import { ModelLabViewer } from '@taranjeetsinghh/model-lab/viewer'

export default function ProductModel() {
  return (
    <div style={{ height: 560 }}>
      <ModelLabViewer src="/models/product.glb" />
    </div>
  )
}

Dynamic import

tsx

import dynamic from 'next/dynamic'

const ProductModel = dynamic(() => import('./ProductModel'), {
  ssr: false,
  loading: () => <div className="model-skeleton" />,
})

Place model and decoder assets under public/. Import editor CSS inside a client entry or global stylesheet when using ModelLabEditor.