How To Use MillionJs In Manual Mode a Next App.
Tags: webdev, javascript, react, nextjs
Published: 2023-04-24 17:51:09

## Introduction

Following a recent announcement by the millionjs creator [Aiden Bai](https://twitter.com/aidenybai) 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! 

{% twitter 1650406345517199361 %}







## What is Millionjs and Nextjs?

![Millionjs' landing page showing off its capabilities](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4211wmclco63kw6qpi3j.png)

**Million** is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to [70% Faster](https://krausest.github.io/js-framework-benchmark/current.html).

**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:

```javascript
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:

```javascript
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:
- [Link to Article's Code](https://github.com/tobySolutions/MillionjsWithNext)
- [Millionjs Documentation](https://millionjs.org)
- [Nextjs documentation](https://nextjs.org/docs)