Next.js SSR

Use 3Lens with Next.js and handle server-side rendering considerations.

Next.js SSR Demointermediate

Loading example...

Properly integrate 3Lens with Next.js, handling SSR, dynamic imports, and app router.

Features Demonstrated

• Dynamic Imports: Client-only loading for 3Lens
• App Router Support: Works with Next.js 13+ app router
• SSR Safety: No server-side rendering issues
• Suspense Integration: Loading states

Usage

'use client';

import dynamic from 'next/dynamic';

const ThreeLensProvider = dynamic(
  () => import('@3lens/react-bridge').then(m => m.ThreeLensProvider),
  { ssr: false }
);

export default function Page() {
  return (
    <ThreeLensProvider>
      <Canvas>
        <Scene />
      </Canvas>
    </ThreeLensProvider>
  );
}

Related Examples

• React Three Fiber - React integration
• Vanilla Three.js - Basic setup