Three.js with Next.js
Build high-performance 3D web apps with React & Next.js SSR
Integration Guide
Overview
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>
)
}✓Pros
- •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
✗Cons
- •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
Frequently Asked Questions
Why do I get 'document is not defined' with Three.js in Next.js?
Three.js accesses browser APIs during import. Use next/dynamic with { ssr: false } to delay the import to the client side.
Can I use React Three Fiber with the Next.js App Router?
Yes. Mark your Canvas component as 'use client' and import it dynamically from any Server Component.
How do I load GLTF models efficiently in Next.js?
Place models in the /public folder and use useGLTF from @react-three/drei. For production, serve them from a CDN or S3.
Best Use Cases
- →Product configurators with SEO landing pages
- →Marketing websites with 3D hero sections
- →E-commerce with 3D product previews
- →Portfolio sites with interactive scenes