Introduction
Following a recent announcement by the millionjs creator Aiden Bai about support of Millionjs for Nextjs apps in the newest release of Millionjs (version 2.3.0), this article pretty much had to be a thing!
What is Millionjs and Nextjs?
Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% Faster.
Next.js is a popular open-source framework for building web applications using React. It allows developers to create server-side rendered (SSR) React applications with ease, making it a popular choice for building production-ready web applications.
Why Using MillionJS in a Next App Can Be Useful
Million works with React. Million makes creating web apps just as easy (It's just wrapping a React component!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of your Next app.
In a normal React Application, we can totally strip off the react-dom and replace it with Million's DOM, but, we aren't able to do that yet in Nextjs.
Setting Up The Nextjs App
For this article we'll start by setting up our Next app. To set up next app locally, go to a directory open up that directory in any code editor and type the following command:
npx create-next-app@latest
Now, change your directory into the Next app in your terminal and type the following command:
npm run dev
The command above starts the server.
Setting Up Millionjs
To set up Millionjs in your Next, app; you're going to have to install the Next library in your codebase. To do that, go ahead and type the following command in your NEXT app:
npm install million
Bravo!! We now have Million installed.
Next step would be to add compiler built for NEXT into the application. In your root directory, start by renaming your next.config.js to next.config.mjs
Then, your next.config.mjs should match the below:
import million from "million/compiler";
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
export default million.next(nextConfig);
Using Million in components
We won't be doing anything too complex here, but, you can just go ahead and edit your index.tsx / index.jsx to match the following:
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState } from "react";
import { block } from "million/next";
const Main = () => {
const [count, setCount] = useState(0);
return (
<main className={styles.main}>
<h1 className={styles.title}>Welcome to Next.js with Million!</h1>
<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>pages/index.tsx</code>
</p>
<p className={styles.description}>
Check out <a href="millionjs.org">Millionjs</a>
</p>
<button onClick={() => setCount(count + 1)}>Count is {count}</button>
</main>
);
};
const MainBlock = block(Main);
const Home = () => {
return (
<div className={styles.container}>
<Head>
<title>Nextjs With Million</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<MainBlock />
</div>
);
};
export default Home;
Go ahead and Navigate back to your browser to see the changes that you've just made!
And that pretty much does it! The above is a very simple and minimalistic use-case of Millionjs in a Nextjs app.
Wait!!! The styling? Go ahead and check the styles folder in your Next app's root directory
Overall Takeaways
Millionjs is a lightweight virtual DOM that can improve the performance of React applications.
Millionjs can be integrated into a Nextjs app to improve performance.
To set up Millionjs in a Nextjs app, you need to install the Millionjs library and add a compiler built for Nextjs into the application.
Using Millionjs in components is as simple as wrapping them in the block function provided by the Millionjs library.
Overall, using Millionjs in a Nextjs app can help reduce overhead and improve the rendering and loading speeds of your application.
Resources: