Using Preact with Next.js

March 21, 2022

2 min read

— views

Getting Started

This blog post will explain how you can easily add Preact to your Next.js application to reduce Next.js' bundle size.

Note: Some features in React.js that are not yet supported in Preact, may break some parts in your Next.js application.

Preact installation

Preact can be easily installed with the following command:

$
npm install preact

Next.js configuration

To enable Preact, we must edit our Next config.

next.config.js
module.exports = {
  webpack: (config, { dev, isServer }) => {

    // Note, preact is only enabled for production builds (`next build`)
    if (!dev && !isServer) {
      config.resolve.alias = {
        ...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;
  },
}

Usage

Once you build your Next.js application, you should see a decrease in bundle size. Below you can see the results on my site.

With Preact
With Preact
Without Preact
Without Preact

That's it

Yes, that's it! It's super easy 🚀!