DEV Community

Cover image for How To Use MillionJs In a Next App.
Tobiloba Adedeji
Tobiloba Adedeji

Posted on • Updated on

How To Use MillionJs In a Next App.

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?

Millionjs' landing page showing off its capabilities

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);

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 (11)

Collapse
 
mattbarnicle profile image
Matt Barnicle

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?

Collapse
 
tobysolutions profile image
Tobiloba Adedeji

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

Collapse
 
ekimcem profile image
Ekim Cem Ülger

Great question, can you inform us if you can find any answer?

Collapse
 
mattbarnicle profile image
Matt Barnicle

will do

Thread Thread
 
tobysolutions profile image
Tobiloba Adedeji

I hope the above answers your questions

Thread Thread
 
mattbarnicle profile image
Matt Barnicle

Yes, thanks for the answer.

Thread Thread
 
tobysolutions profile image
Tobiloba Adedeji

Sure thing! Pleasure is all mine.

Collapse
 
clericcoder profile image
Abdulsalaam Noibi

Wow,what a detailed Article. Thanks for sharing😇

Collapse
 
tobysolutions profile image
Tobiloba Adedeji

Thank you very much boss!

Collapse
 
coderamrin profile image
Amrin

great article.
I gotta try millionJS.

Collapse
 
tobysolutions profile image
Tobiloba Adedeji

Thank you very much Amrin!