Install Million.js

Million.js assumes that you've already initialized a React project. If you haven't, we recommend checking out react.dev (opens in a new tab) first.

If you're just looking to try out Million.js, check out the quickstart.

Million.js is compatible with React 18 and above. If you're using an older version of React, you'll need to upgrade first (opens in a new tab).

Install package

First things first, you'll need to install Million.js. You can do this with your favorite package manager:

npm install million

Use the compiler

Then, add the compiler to your build tool of choice:

Million.js is supported within the /app ("use client" components only) and /pages

next.config.mjs

import million from 'million/compiler';
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
 
const millionConfig = {
  auto: true,
  // if you're using RSC:
  // auto: { rsc: true },
}
 
export default million.next(nextConfig, millionConfig);

Ignoring components

If a certain component conficts with the Million.js runtime, it's possible to skip over them via the // million-ignore comment.

// million-ignore
function App() {
  return ...
}

Advanced customization

Automatic mode provides options to tune automatic mode:

threshold: The threshold for the heuristic to determine whether a component should be converted to Million.js. The greater the threshold, fewer components will be optimized, and vice versa. The default is 0.1.
skip: An array of identifiers that indicate a component should be skipped. You can put hook names, variable names, etc. The default is [].

const options = {
  auto: {
    threshold: 0.25, // default: 0.1,
    skip: ['useBadHook', /badVariable/g] // default []
  }
}

Muting help messages

If you don't want to see the help messages, you can pass the { mute: true } option to the compiler.

Introduction Tutorial