Integration guide
Three.js with Next.js
Build high-performance 3D web apps with React & Next.js SSR
All integration guides →Overview
Three.js in Next.js
Next.js is the most popular React framework in the world, and pairing it with Three.js lets you ship server-rendered pages with dynamic 3D experiences. Learn how to configure dynamic imports, handle SSR safely, and optimize performance for production.
Quick start
npm install three @react-three/fiber @react-three/drei// app/page.tsx
import dynamic from 'next/dynamic'
const Scene = dynamic(() => import('@/components/Scene'), { ssr: false })
export default function Home() {
return <Scene />
}
// components/Scene.tsx
'use client'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
export default function Scene() {
return (
<Canvas>
<ambientLight />
<mesh>
<boxGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
<OrbitControls />
</Canvas>
)
}- +SSR & SSG for fast initial page loads
- +App Router & React Server Components support
- +Optimized Image component for 3D asset thumbnails
- +Built-in API routes for backend logic
- +Vercel deployment with edge caching
- −Three.js must be dynamically imported (ssr: false) to avoid hydration errors
- −Canvas context is client-side only — requires 'use client' directive
- −Bundle size can grow quickly without code splitting
Best fit
What this pairing is good at
Every stack has a shape it suits. These are the projects where Next.js and Three.js pull in the same direction.
Product configurators with SEO landing pages
Marketing websites with 3D hero sections
E-commerce with 3D product previews
Portfolio sites with interactive scenes
F.A.Q
Frequently asked questions
What people ask about running Three.js inside Next.js.
Setup
Getting the scene on the page.
Three.js accesses browser APIs during import. Use next/dynamic with { ssr: false } to delay the import to the client side.
Yes. Mark your Canvas component as 'use client' and import it dynamically from any Server Component.
In production
Performance, builds and gotchas.
Place models in the /public folder and use useGLTF from @react-three/drei. For production, serve them from a CDN or S3.