Preact: Optimize your Next.js build with 5 lines of code

March 26, 2021 •


1 min read

Hey hey👋 let's get started on this quickly, in this note you can find a way to optimize your build size by 38% with just a lib install and 5 lines of code.

What is Preact?

According to his website, Preact is a Fast 3kB alternative to React with the same modern API. Basically overrides a lot of the methods that use React, like render for example, and optimize it at build-time.

Optimize Next.js build with Preact

  1. Install Preact

    yarn add preact or npm i preact

  2. Create a next.config.js if you don't already have one in the root of your project

    touch next.config.js

  3. Add the next code or adapt your previous config

    module.exports = {
      webpack(config, { dev, isServer }) {
        // ${previousConfig...}
        // Replace React with Preact only in client production build
        if (!dev && !isServer) {
          Object.assign(config.resolve.alias, {
            react: "preact/compat",
            "react-dom/test-utils": "preact/test-utils",
            "react-dom": "preact/compat",
        return config

Ready 🎉