Preact for Nextjs

November 08, 2020

Things needed to do to swap out React for Preact

How to swap React for Preact

Dependencies

update dependencies to load React from Preact sources
we need next-plugin-preact as well

-  "react": "16.13.1",
-  "react-dom": "16.13.1",
+  "next-plugin-preact": "^3.0.3",
+  "preact": "^10.5.5",
+  "preact-render-to-string": "^5.1.11",
+  "react": "github:preact-compat/react#1.0.0",
+  "react-dom": "github:preact-compat/react-dom#1.0.0",
+  "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1",

Config

// next.config.js
const withPreact = require("next-plugin-preact");

module.exports = withPreact({
  experimental: {
    modern: true,
  },
  target: "serverless",
});

Comparison

The framework size drops from ~70kb down to ~20kb.

framework size drops from ~70kb to ~20kb