How can ReactJS 19 be used with Next.js in less than five minutes?

React 19 + Nextjs (Updated)

How can ReactJS 19 be used with Next.js in less than five minutes?

Try reactjs 19 features using nextjs within the simple step.

On the last day of the React conference, the React team announced that reactjs 19 was an RC release. If you are curious about how it works, try it locally with nextjs.

In a small tutorial, I will tell you how to install and use React 19 with nextjs. For that, follow the steps below:

1. Create a new nextjs app.
2. Install babel-plugin-react-compiler
3. Enable experimental react compiler

Create a new nextjs app.

First, create a new fresh app using create next app CLI using npm, yarn, or pnpm.

npx create-next-app@rc
# or
pnpm create next-app@rc

I used the pnpm to create a fresh new next app and check the command output.

➜  medium pnpm create next-app@rc nextjs-19
.../share/pnpm/store/v3/tmp/dlx-123778   |   +1 +
.../share/pnpm/store/v3/tmp/dlx-123778   | Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /home/officialrajdeepsingh/medium/nextjs-19.

Using pnpm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

Packages: +358
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/next/15.0.0-rc.0: 20.52 MB/20.52 MB, done
Downloading registry.npmjs.org/@next/swc-linux-x64-gnu/15.0.0-rc.0: 42.72 MB/42.72 MB, done
Downloading registry.npmjs.org/@next/swc-linux-x64-musl/15.0.0-rc.0: 51.07 MB/51.07 MB, done
Progress: resolved 382, reused 346, downloaded 13, added 358, done

dependencies:
+ next 15.0.0-rc.0
+ react 19.0.0-rc-f994737d14-20240522
+ react-dom 19.0.0-rc-f994737d14-20240522

devDependencies:
+ @types/node 20.12.12
+ @types/react 18.3.3
+ @types/react-dom 18.3.0
+ eslint 8.57.0 (9.3.0 is available)
+ eslint-config-next 15.0.0-rc.0
+ postcss 8.4.38
+ tailwindcss 3.4.3
+ typescript 5.4.5

Done in 12h 17m 27.2s
Initialized a git repository.

Success! Created nextjs-19 at /home/officialrajdeepsingh/medium/nextjs-19

Install babel-plugin-react-compiler

In the next step, install the React experimental compiler in your project using node package manager.

npm install babel-plugin-react-compiler
# 
pnpm add babel-plugin-react-compiler

The command output look like this.

➜  nextjs-19 git:(main) pnpm add babel-plugin-react-compiler 

Packages: +25 -1
+++++++++++++++++++++++++-
Progress: resolved 406, reused 379, downloaded 4, added 25, done

dependencies:
+ babel-plugin-react-compiler 0.0.0-experimental-592953e-20240517

Done in 28s

Enable experimental react compiler

Lastly, enable the experimental recompiler option in nextjs using the next.config.js file.

// next.config.{js|ts}

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental:{
    reactCompiler: true
  }
};

export default nextConfig;

Lastly, paste the counter component in your nextjs application.

"use client"

import React, { useState } from 'react';

export default function Home() {
 
 const [count, setCount] = useState(0)


  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className=' flex flex-col gap-2' id="mainArea">
        <h1 className='text-6xl'> count: <span>{count}</span> </h1>
        <button className='bg-white text-black p-2 mt-5' onClick={() => { setCount(count + 1) }}>count++</button>
      </div>

    </main>
  );

React 19 automatically memorizes every component for you. To verify whether your component automatically memorizes or does not.

Reactjs adds a slight blue indicator, which you can check with the dev tool to see which component you automatically memorized.

To verify whether React 19 works, open the dev tool in your browser.

Check out which component was memorized or not by reactjs with the dev tool.

To learn more about frontend developers, reactjs, nextjs, and Linux stuff, follow the frontend web publication on Medium and other updates. You can also follow me on Twitter (X) and Medium.