Next with Preact

Works up to Next.js 16.0.10 ✅

Since Next 13.5, Next compiles some of its dist folder into the "dist/compiled/next-server" folder only when publishing to NPM. This means the file "dist/server/render.js" is not the one that runs, and thus the patch does nothing. Instead the patches would have to be applied to "dist/compiled/next-server/pages.runtime.dev.js" and "pages.runtime.prod.js" accordingly. These files are minified so they're much harder to modify. The approach changed to instead patch Preact with a custom version of renderToReadableStream until Preact added their own version.

...Sighs in JavaScript...

If you're unable to use the app directory with React Server Components, streaming and other React 18+ features, but still want/need improvements to Next and its utilities, Next with Preact is for you.

Preact added renderToReadableStream in version 6.5.0. However, App Router is stil incompatible with Preact due to some internal mismatching within hooks.

⚠️ Disclaimer ⚠️

My approach was to achieve this with the least amount of changes to Next.js pointing back to Next 12.3.4. So I can't promise that this will work for all your use cases. I also can't promise that this will automatically work in future versions. Proceed with caution.

Demo

Live URL | CodeSandbox

Dependencies

• next-preact-plugin
• patch-package

Usage

Follow the instructions in next-preact-plugin, and disable esmExternals in your next.config.js to resolve this issue:

 require('next-plugin-preact')({
  experimental: {
    esmExternals: false 
  }
 });

Hot Reloading

Since Next.js 15.2.0, Next added webpack layers, and @prefresh/next stopped working. This can be resolved by adding the layer to the webpack compilation. Refer to next.config.js for the webpack changes needed and more information.

---

Copy the patches directory to your project root.

If you're using patch-package already, add the .patch included here to your patches directory.

Install patch-package, and run patch-package in postinstall:

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

Patches

• Add server.browser export to preact/package.json. Won't be done in Preact. Issue
  • Export added in 10.28.0 preactjs/preact#4940. Patch still needed to point to server.js instead of server.browser.js.