React Three Next is a free, open-source boilerplate for creating Next.js applications that combine normal 2D DOM content with 3D WebGL scenes rendered by React Three Fiber and Three.js. It is maintained by the pmndrs organization and installed via the create-r3f-app command-line tool. The starter keeps a single persistent WebGL canvas alive across page navigation, so 3D elements can appear anywhere on a page without being re-created on every route change.
What is React Three Next?
React Three Next is a minimalist starter template that pairs the Next.js App Directory architecture with @react-three/fiber and Three.js. Its core function is to let developers embed Three.js scenes directly inside regular page sections, using a tunnel-rat-based portal system to render DOM components into the WebGL context. The template takes a standard Next.js project and produces a working site with a persistent canvas, GLSL shader import support, and optional TypeScript scaffolding.
Key Features
- Persistent canvas — The WebGL canvas is not unmounted when navigating between pages, avoiding costly re-initialization on each route change.
- DOM-integrated 3D — Components inside the
Viewcomponent render in the 3D context, letting 3D content be placed in any div of the page. - Viewport scissoring — For performance, the canvas uses
gl.scissorto segment the viewport into smaller render areas. - TypeScript option — Adding
-tsor--typescriptto the scaffold command generates a TypeScript project. - Tailwind default — Tailwind CSS is the default styling system; a styled-components variant is also available via the CLI.
- GLSL imports — The starter supports importing GLSL shader files directly into components.
- PWA support — The project is preconfigured for progressive web app functionality.
- High performance scores — The README reports a Lighthouse score of 100 for Performance, Accessibility, Best Practices, and SEO, with first load JavaScript around 79kb.
Who is it for?
- React developers building interactive portfolios — They can embed a rotating 3D model in a hero section while keeping the rest of the page as normal React components.
- Creative agencies and studios — The persistent canvas and scissor-based viewport allow multi-page marketing sites to share a single WebGL scene, improving navigation fluidity.
- Developers learning React Three Fiber — The starter provides a complete, working reference for combining Next.js, R3F, and Three.js, with optional extras like drei, a11y, and r3f-perf.
What can you do with React Three Next?
- 3D product showcases — Place a product model inside a regular page section using the
Viewcomponent, with interactions synchronized to the DOM. - Interactive landing pages — Keep a WebGL background constant across routes while DOM content changes, reducing reload overhead.
- Shader experiments — Use built-in GLSL import support to render custom fragment shaders within a React page.
How does React Three Next work?
The template uses tunnel-rat to portal components between the DOM renderer and the WebGL renderer. Anything rendered inside the View component is tunneled into the 3D context, while the canvas employs gl.scissor to allocate exactly the needed viewport segments. This keeps the canvas mounted and synchronized with the DOM across route changes.
FAQ
How do I create a new project with React Three Next?
Run yarn create r3f-app next my-app or npx create-r3f-app next my-app. To scaffold a TypeScript version, append -ts or --typescript to the command.
What styling options does the starter include?
Tailwind CSS is the default style. The CLI also supports a styled-components variant, so you can choose either when creating a project.
Is React Three Next free to use?
Yes, it is an open-source starter hosted on GitHub under the pmndrs organization and available through npm without cost.
What performance does the starter claim?
The README reports a Lighthouse score of 100 in all four categories, first load JavaScript of roughly 79kb, and a TTL around 100ms.
Does React Three Next work with the App directory?
Yes, the starter is based on the Next.js App directory architecture, so it uses the modern file-based routing and server components structure.
