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.
That's it
Yes, that's it! It's super easy 🚀!