DEV Community

Cover image for Use Preact in Next.js 13
Ephraim Duncan
Ephraim Duncan

Posted on

Use Preact in Next.js 13

Introduction

Next.js uses React by default. In this blogpost, I want to replace React with Preact and compare the build differences.

Preact is a JavaScript library, considered the lightweight 3kb alternative of React with the same modern API and ECMA Script support. Preact has the fastest Virtual DOM compared to other JavaScript frameworks. It is small in size. Tiny! It is designed to work in a browser with DOM, which justifies why it is so tiny.

Why Replace React

There are a few reasons why you would do this and there are some other posts that explain it very well.

The key distinction is that Preact lacks several of the experimental features included in React, like Suspense and Concurrent Mode. You have a strong argument for replacing React with Preact if you don't use any of these of the more sophisticated features of React.

I'll summarize some of the reasons you should replace React with Preact.

  1. Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM.
  2. Preact has a small size!
  3. Preact is fast, and not just because of its size.
  4. Preact is highly compatible with React API and supports the same ECMA Script
  5. Preact has a package named preact/compat to let developers use React libraries with Preact.

Learn more about the differences of Preact from React here

Get Started

Let's start by creating a new Next.js app.



npx create-next-app next-with-preact --use-pnpm


Enter fullscreen mode Exit fullscreen mode

Next, we need to install Preact in app.



pnpm install preact


Enter fullscreen mode Exit fullscreen mode

Setup app Directory in Next.js 13

Next.js 13 introduces layouts with the app directory. To use the app directory, add the following to your next.config.js file.



module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
};


Enter fullscreen mode Exit fullscreen mode

In the main directory, create an app directory and a hello directory in the app directory. Add a page.tsx in the hello directory.

The app directory should look like this



app/
├── hello
│   └── page.tsx
├── head.tsx
└── layout.tsx


Enter fullscreen mode Exit fullscreen mode

The head.tsx and layout.tsx will be generated when you start your server in dev environment.

Add the following to your app/hello/page.tsx



export default function HelloPage(): JSX.Element {
  return <div>Hello from app directory</div>;
}


Enter fullscreen mode Exit fullscreen mode

Replace the contents of pages/index.tsx with a simple page component.



export default function Home() {
  return <div>Index Page from pages directory</div>;
}


Enter fullscreen mode Exit fullscreen mode

Run your app with pnpm dev and inspect http://localhost:3000/ and http://localhost:3000/hello to confirm everything is working.

The Swap

Once everything is working, we need to swap React with Preact in our Next.js app.

We need to tell Next.js that we'd like to swap out React for Preact by using Webpack's aliasing feature only in client production build. The dev server will run with React.

Let's update our next.config.js with the following



module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },

  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        "react/jsx-runtime.js": "preact/compat/jsx-runtime",
        react: "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat",
      });
    }
    return config;
  },
};


Enter fullscreen mode Exit fullscreen mode

That's it!

Once you build your Next.js application with next build, you should see a decrease in bundle size. Compare the build results for our demo application.

With Preact
Next.js build with Preact

With React
Next.js build

next-plugin-preact

The Preact Team provides a plugin for use with Next.js. It works in both dev and production environments.

Install the plugin



pnpm install next-plugin-preact preact react@npm:@preact/compat react-dom@npm:@preact/compat react-ssr-prepass@npm:preact-ssr-prepass preact-render-to-string


Enter fullscreen mode Exit fullscreen mode

Usage

Use the plugin your next.config.js like this



// next.config.js
const withPreact = require("next-plugin-preact");

module.exports = withPreact({
  /* regular next.js config options here */
});


Enter fullscreen mode Exit fullscreen mode

If you are not using any experimental React features in your Next.js app, I would recommend replacing React with Preact to reduce your bundle size by a considerable chunk.

Top comments (8)

Collapse
 
maikbrockhaus profile image
maik-brockhaus

Thanks for upgrading this Post to NextJS 13, but your explanation is not supposed to work right know.

There is a leading issue on Github for NextJS explaining that Preact X is not working with version 13
github.com/vercel/next.js/issues/4...

This is due to the ReactJS version bumb to 18.2.0, the compat library preact-render-t-string not fulfilling the missing function renderToReadableStream
There is a draft to change this, but still open: github.com/preactjs/preact-render-...

The next-plugin-preact is capable to replace react with preact successfully, but then afterwards fails when starting up the server as some exports are not fulfilled.

Can you please provide a working copy of your tutorial on github for further testing?

Cheers,
Maik

Collapse
 
martinratinaud profile image
Martin Ratinaud

Just tried today and still encounter this problem unfortunately. Any advice?

Collapse
 
kylessg profile image
Kyle Johnson

Haha, small world

Collapse
 
qingzhoufeihu profile image
Jagger

The problem has been solved

Collapse
 
fandyajpo profile image
Fandoy

how to use react hook inside ?

still import them hook from react or preact/hooks ?

Collapse
 
kylessg profile image
Kyle Johnson

Preact actas like a polyfill/alais for react so implementation wise nothing changes, you still import from react.

A lot of this is due to the following in package.json

    "react": "npm:@preact/compat@^17.1.2",
Enter fullscreen mode Exit fullscreen mode
Collapse
 
romartyn profile image
romartyn

Just started a new pet project with Next 14 and tried to use Preact by your tutorial (thank you so muck) but found some diffs wth Next 13 so stayed on React fow now.

Collapse
 
qingzhoufeihu profile image
Jagger

Did you encounter any difficulties