Preact for Nextjs

November 8, 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.