$chiubaca / 🏠 / swapping-react-...

Swapping React for Preact in Next.js

Posted on Fri Dec 10 2021
react preact nextjs

This a slight follow up to by blog about eco-friendly websites.

At work, React is our framework of choice, however it comes at a cost of ~120kb. Preact is a 3kb alternative to React. When used in conjunction with [preact-compat](<https://github.com/preactjs/preact-compat>) we can do a straight swap of React for Preact without any breaking API changes. ****The official docs claim that this thin layer over Preact achieves 100% compatibility with React.

Quick Guide

Starting from a fresh Next.js project we can swap React for Preact by running the following:

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

or with yarn:

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

Next, we need to configure the next.config.js file. I think [next-compose-plugins](<https://www.npmjs.com/package/next-compose-plugins>) is a must for managing multiple next.js plugins.

To install run:

npm i next-compose-plugins

or with yarn:

yarn add next-compose-plugins

note it is installed as a regular dependencies and not a devDependencies . Next.js is very particular about this.

Now we can configure the next.config.js like so:

const withPlugins = require('next-compose-plugins');
const withPreact = require('next-plugin-preact')

/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
	// Next.js configuration goes here - <https://nextjs.org/docs/api-reference/next.config.js/introduction>
};

module.exports = withPlugins(
	[
		[withPreact],
		// Additional plugins are installed here - <https://github.com/cyrilwanner/next-compose-plugins#usage>
	],
	nextConfig
);

That’s it! We can carry on writing React/Preact as normal.

There is a Next.js - Preact - TS - Styled Components template at https://github.com/Neverbland/skeleton/tree/nextjs-preact if you want to get started straight away.

References