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.
Table of content
- Setting up the Nextjs app
- Setting up Millionjs in the app
- Using Million in components
- Overall takeaways
- Resources
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/react-server";
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:
Top comments (13)
Looks amazing. Thanks for the article. Is there any reason not to wrap all your components with block? Also, why not wrap the Home component in this example? And if you wrap a component that has child components, do all child components get processed by the Million virtual DOM?
Yep! It isn't exactly necessary to wrap all components with the block() componentt, but, it's very good if you do. The optimization is insane, although Millionjs has some limitations and it isn't totally a one size fits all solution
Great question, can you inform us if you can find any answer?
will do
I hope the above answers your questions
Yes, thanks for the answer.
Sure thing! Pleasure is all mine.
Wow,what a detailed Article. Thanks for sharing😇
Thank you very much boss!
great article.
I gotta try millionJS.
Thank you very much Amrin!
theres this error with the nextjs versions 13.5 and above. It says "Page "src/app/page.tsx" has an invalid "default" export:
Type "MillionProps" is not valid."
I created using create-next-app@latest
what are the most latest compatible versions? am i doing it wrong?
I keep having the same error when importing million to next.config.js:
SyntaxError: Cannot use import statement outside a module
I already had this error in another project and solved it with a decorator but it was a component decorator. Does anyone know any other way to fix this ?