Интеграция R3F в Next.js

Интеграция R3F в Next.js

Пошаговое руководство по подключению React Three Fiber в проекте на Next.js App Router. Уникальная ценность — настройка под наш стек и типичные подводные камни.

Зависимости

npm install three @react-three/fiber @react-three/drei

1. Динамический импорт Canvas

R3F использует WebGL и не работает на сервере. Импортируйте Canvas только на клиенте:

"use client";

import dynamic from "next/dynamic";

const Canvas = dynamic(
  () => import("@react-three/fiber").then((mod) => mod.Canvas),
  { ssr: false }
);

2. Обёртка страницы

Создайте компонент сцену с директивой "use client" и используйте динамический Canvas:

// app/demo/Scene.tsx
"use client";

import dynamic from "next/dynamic";

const Canvas = dynamic(
  () => import("@react-three/fiber").then((mod) => mod.Canvas),
  { ssr: false }
);

export default function Scene() {
  return (
    <div className="h-[400px] w-full">
      <Canvas>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="orange" />
        </mesh>
      </Canvas>
    </div>
  );
}

3. Страница Next.js

Страница может оставаться серверным компонентом — сцена рендерится на клиенте:

// app/demo/page.tsx
import Scene from "./Scene";

export default function DemoPage() {
  return (
    <main>
      <h1>3D демо</h1>
      <Scene />
    </main>
  );
}

4. Важные моменты

• Высота контейнера — задайте явную высоту для Canvas (h-[400px], min-h-screen и т.п.), иначе сцена не отрисуется.
• Suspense — при загрузке WASM (Rapier, и т.п.) оберните Canvas в <Suspense fallback={<div>Загрузка...</div>}>.
• Производительность — избегайте тяжёлых сцен на мобильных; используйте frameloop="demand" для статичных сцен.

Связанные статьи

• React Three Fiber (R3F) — основы R3F
• Drei — компоненты для R3F — готовые компоненты
• Частые ошибки при работе с 3D — типичные проблемы

Дополнительно

• React Three Fiber
• Dynamic Import (ленивая загрузка)