Next with Preact

Works with ➡️ 14.2

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 has changed to instead patch Preact with a custom version of renderToReadableStream that works with Next.

...Sighs in JavaScript...

If you're unable to use the app directory with React Server Components, streaming SSR, Suspense 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

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

• Remove the check for React 18 in next/dist/build/webpack-config.js. Waiting for this PR
• Add server.browser export to preact/package.json. Won't be done in Preact. Issue
• Add renderToReadableStream to preact/compat/server.js. Can be exposed similar to renderToPipeableStream in this PR