Using Preact with Next.js

March 21, 2022

2 min read


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.

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

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


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 🚀!