A Work in Progress

developer's blog by Wei
lots of work in progress notes
TimelineCredits

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
framework size drops from ~70kb to ~20kb